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

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

QQNavigation.gif

实现这种效果的技术点:

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

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

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

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

Google Play.gif

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

Paste_Image.png

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

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

Paste_Image.png

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

Paste_Image.png

3. FragmentTabHost自定义底部Tab布局

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

Paste_Image.png

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

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

重写前是这样的:

Paste_Image.png

重写后是这样的:

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

Paste_Image.png

Paste_Image.png

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

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

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

or maybe,是为你准备的