高仿Android QQ菜单,左侧抽屉,底部导航

实现这种效果的方式有很多,在不使用第三方包的前提下,这里用V4包原生DrawerLayout+FragmentTabHost控件实现, 先来张效果图:

高仿Android QQ菜单,左侧抽屉,底部导航_第1张图片
QQNavigation.gif

实现这种效果的技术点:

  • DrawerLayout拖动菜单时主内容布局不会跟着移动
  • DrawerLayout拖动时很生硬,是直接拖出来的
  • FragmentTabHost自定义底部Tab布局
  • 解决FragmentTabHost切换时,主布局Fragment会重走生命周期的问题

好吧,你可能不知道我在说什么, 一个一个来:

1. DrawerLayout拖动菜单时主内容布局不会跟着移动

你可能见到的DrawerLayout的使用效果是这样的,这是Google Play上的DrawerLayout,当手指侧滑时,左侧抽屉菜单会覆盖中间布局,中间布局不会随手指拖动而移动

高仿Android QQ菜单,左侧抽屉,底部导航_第2张图片
Google Play.gif

解决这个问题很简单, 在DrawerLayout的监听事件onDrawerSlide回调中对其进行操作,slideOffset是滑动的偏移值:会在0~1之间变化:

高仿Android QQ菜单,左侧抽屉,底部导航_第3张图片
Paste_Image.png

2. DrawerLayout拖动时很生硬,是直接拖出来的

DrawerLayout菜单拖出来时,默认最先展示到屏幕上的是菜单布局的边缘位置,而QQ的侧滑菜单最先展示在屏幕上的是菜单布局中间偏右的位置,目测大概是黄金分割点,如图:

高仿Android QQ菜单,左侧抽屉,底部导航_第4张图片
Paste_Image.png

解决这个问题也不难, 动态修改菜单布局的PadingLeft,在菜单滑出的过程中,PadingLeft从菜单宽度的(1-0.618)倍,动态减少到0方可实现这种效果:

高仿Android QQ菜单,左侧抽屉,底部导航_第5张图片
Paste_Image.png

3. FragmentTabHost自定义底部Tab布局

第一次听说FragmentTabHost可以用来做导航之后,就去找资料,官方文档还给了示例代码https://developer.android.google.cn/reference/android/support/v4/app/FragmentTabHost.html
当我跑上这段代码之后完全高兴不起来,太TM难看了,底部Tab就几个文字,然后就去查API,果然有了新的发现:

高仿Android QQ菜单,左侧抽屉,底部导航_第6张图片
Paste_Image.png

4. 解决FragmentTabHost切换时,主布局Fragment会重走生命周期的问题

当切换底部的Tab时,主布局中的三个Fragment会重走生命周期,也就意味着页面的数据又得重新加载,这对用户体验都不是个好消息,解决的办法就是重写FragmentTabHost,其实就是改了原控件的几个方法:

重写前是这样的:


高仿Android QQ菜单,左侧抽屉,底部导航_第7张图片
Paste_Image.png

重写后是这样的:


高仿Android QQ菜单,左侧抽屉,底部导航_第8张图片

代码就是在原有控件的基础上改了三行:

高仿Android QQ菜单,左侧抽屉,底部导航_第9张图片
Paste_Image.png
高仿Android QQ菜单,左侧抽屉,底部导航_第10张图片
Paste_Image.png

好了,原本不那么看好的控件经过改造,已经丑小鸭变成天鹅了.
代码链接:https://github.com/Shib90/QQNavigationDemo-master

当然这个只是模仿拿来练手,还存在很多问题:

  • status bar颜色
  • 底部消息数背景图不一样,并且没有拖拽动画
  • ...

or maybe,是为你准备的

你可能感兴趣的:(高仿Android QQ菜单,左侧抽屉,底部导航)