實(shí)現(xiàn)這種效果的方式有很多,在不使用第三方包的前提下,這里用V4包原生DrawerLayout+FragmentTabHost控件實(shí)現(xiàn), 先來(lái)張效果圖:
實(shí)現(xiàn)這種效果的技術(shù)點(diǎn):
- DrawerLayout拖動(dòng)菜單時(shí)主內(nèi)容布局不會(huì)跟著移動(dòng)
- DrawerLayout拖動(dòng)時(shí)很生硬,是直接拖出來(lái)的
- FragmentTabHost自定義底部Tab布局
- 解決FragmentTabHost切換時(shí),主布局Fragment會(huì)重走生命周期的問(wèn)題
好吧,你可能不知道我在說(shuō)什么, 一個(gè)一個(gè)來(lái):
1. DrawerLayout拖動(dòng)菜單時(shí)主內(nèi)容布局不會(huì)跟著移動(dòng)
你可能見(jiàn)到的DrawerLayout的使用效果是這樣的,這是Google Play上的DrawerLayout,當(dāng)手指?jìng)?cè)滑時(shí),左側(cè)抽屜菜單會(huì)覆蓋中間布局,中間布局不會(huì)隨手指拖動(dòng)而移動(dòng)
解決這個(gè)問(wèn)題很簡(jiǎn)單, 在DrawerLayout的監(jiān)聽(tīng)事件onDrawerSlide回調(diào)中對(duì)其進(jìn)行操作,slideOffset是滑動(dòng)的偏移值:會(huì)在0~1之間變化:
2. DrawerLayout拖動(dòng)時(shí)很生硬,是直接拖出來(lái)的
DrawerLayout菜單拖出來(lái)時(shí),默認(rèn)最先展示到屏幕上的是菜單布局的邊緣位置,而QQ的側(cè)滑菜單最先展示在屏幕上的是菜單布局中間偏右的位置,目測(cè)大概是黃金分割點(diǎn),如圖:
解決這個(gè)問(wèn)題也不難, 動(dòng)態(tài)修改菜單布局的PadingLeft,在菜單滑出的過(guò)程中,PadingLeft從菜單寬度的(1-0.618)倍,動(dòng)態(tài)減少到0方可實(shí)現(xiàn)這種效果:
3. FragmentTabHost自定義底部Tab布局
第一次聽(tīng)說(shuō)FragmentTabHost可以用來(lái)做導(dǎo)航之后,就去找資料,官方文檔還給了示例代碼https://developer.android.google.cn/reference/android/support/v4/app/FragmentTabHost.html
當(dāng)我跑上這段代碼之后完全高興不起來(lái),太TM難看了,底部Tab就幾個(gè)文字,然后就去查API,果然有了新的發(fā)現(xiàn):
4. 解決FragmentTabHost切換時(shí),主布局Fragment會(huì)重走生命周期的問(wèn)題
當(dāng)切換底部的Tab時(shí),主布局中的三個(gè)Fragment會(huì)重走生命周期,也就意味著頁(yè)面的數(shù)據(jù)又得重新加載,這對(duì)用戶(hù)體驗(yàn)都不是個(gè)好消息,解決的辦法就是重寫(xiě)FragmentTabHost,其實(shí)就是改了原控件的幾個(gè)方法:
重寫(xiě)前是這樣的:
重寫(xiě)后是這樣的:
代碼就是在原有控件的基礎(chǔ)上改了三行:
好了,原本不那么看好的控件經(jīng)過(guò)改造,已經(jīng)丑小鴨變成天鵝了.
代碼鏈接:https://github.com/Shib90/QQNavigationDemo-master
當(dāng)然這個(gè)只是模仿拿來(lái)練手,還存在很多問(wèn)題:
- status bar顏色
- 底部消息數(shù)背景圖不一樣,并且沒(méi)有拖拽動(dòng)畫(huà)
- ...
or maybe,是為你準(zhǔn)備的
