仿QQ首页底栏

作者: 学渣罗小贱 | 来源:发表于2016-08-31 20:47 被阅读448次

仿QQ首页底栏案例

实现效果图

源码地址:https://github.com/luojunquan/QQPractise.git

注意事项:

 // 开启一个Fragment事务
//        FragmentTransaction transaction = fragmentManager.beginTransaction();

    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

在onCreate()方法中先是调用了initViews()来获取每个控件的实例,并给相应的控件设置好点击事件,然后调用setTabSelection()方法设置默认的选中项,这里传入的0说明默认选中第1个Tab项。

那么setTabSelection()方法中又是如何处理的呢?可以看到,首先第一步是调用clearSelection()方法来清理掉之前的选中状态,然后开启一个Fragment事务,并隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上。接下来根据传入的index参数判断出选中的是哪一个Tab项,并改变该Tab项的图标和文字颜色,然后将相应的Fragment添加到界面上。这里注意一个细节,我们添加Fragment的时候并没有使用replace()方法,而是会先判断一下该Fragment是否为空,如果是空的则调用add()方法添加一个进来,如果不是空的则直接调用show()方法显示出来即可。那么为什么没有使用replace()方法呢?这是因为replace()方法会将被替换掉的那个Fragment彻底地移除掉,该Fragment的生命周期就结束了。当再次点击刚才那个Tab项的时候,就会让该Fragment的生命周期重新开始,onCreate()、onCreateView()等方法都会重新执行一遍。这显然不是我们想要的,也和ActivityGroup的工作原理不符,因此最好的解决方案就是使用hide()和show()方法来隐藏和显示Fragment,这就不会让Fragment的生命周期重走一遍了。

设置完默认选中项后,我们当然还可以通过点击Tab项来自由地切换界面,这就会进入到onClick()方法中。onClick()方法中的逻辑判断非常简单,当点击了消息标签时就会选中第1个tab项,点击联系人标签时就会选中第2个tab项,点击动态标签时就会选中第3个tab项,点击设置标签时就会选中第4个tab项。都是通过调用setTabSelection()方法来完成的,只是传入了不同的参数。


当开启一个事物时,必须用V4包里getSupportFragmentManager,并且加载的fragment里的fragment也必须要用v4包里的,

这里有一个小bug就是底栏的高度不能低于80dp,可能是图标的问题,当低于80dp时,汉字不显示

相关文章

  • 仿QQ首页底栏

    仿QQ首页底栏案例 实现效果图 源码地址:https://github.com/luojunquan/QQPrac...

  • iOS 仿QQ侧边栏

    粗仿QQ侧边栏 分析:QQ侧边栏都用了哪些手势,有哪些效果? QQ的主页是个UITabbarController,...

  • 仿QQ侧边栏

    这里只实现了qq侧边栏的效果。略显简单。类似下图 demo地址:点击下载

  • 用electron仿qq首页

    QQ首页的弹窗和天气效果都挺好,最近琢磨了一下用electron来仿造出这样的效果,主要是弹窗控件这块,也考虑了一...

  • 仿QQ音乐底部栏

    最近在开发一款高仿QQ音乐播放器的Demo,遇到了一个问题,在QQ音乐主界面有一个常驻底部栏,底部栏中有一个可左右...

  • 仿QQ首页视差滚动效果

    偶然看到了QQ官网的设计,感觉这种视差滚动很有趣,就仿了一个。主要是为图片背景设置background-attac...

  • iOS 高仿QQ侧边栏

    项目中要做侧边栏效果,网上诸多demo,都不是最理想的。 借鉴了其他demo,用一个viewController容...

  • Android工具类

    标题栏样式https://github.com/getActivity/TitleBar仿QQ文件选择器https...

  • 初学CSS仿QQ邮箱首页界面

    最近跟着老师学习了做一个简单的QQ邮箱的首页界面,每个星期坚持打卡,希望学有所成。 首先是将界面分成2个部分:he...

  • iOS LearnNavigationBar

    LearnNavigationBar 得到App的首页下拉隐藏导航栏效果、得到App的我的下拉效果、QQ空间App...

网友评论

    本文标题:仿QQ首页底栏

    本文链接:https://www.haomeiwen.com/subject/dvhcettx.html