实现这种效果的方式有很多,在不使用第三方包的前提下,这里用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,是为你准备的
网友评论