Hello,大家好~
平時使用App時嫌吠,你可能早就注意到
許多應(yīng)用左側(cè)都有側(cè)滑菜單欄的效果
(比如:QQ止潘、OfO等),看上去真是炫酷極了~
不知道你是否也像我一樣辫诅,好奇這種抽屜式的滑動菜單是怎么實現(xiàn)的呢凭戴?
下面就讓我們一起來看一下,這個看上去復(fù)雜的功能炕矮,到底是怎么實現(xiàn)的吧O(∩_∩)O
1.認(rèn)識 DrawerLayout
滑動菜單這個功能看起來挺復(fù)雜者冤,分析一下其實還是挺容易的。之所以這么說档痪,是因為我大Google提供了一個控件涉枫,使得實現(xiàn)這個炫酷的功能簡單又方便。而這個控件腐螟,正是:DrawerLayout 愿汰!
其實看DrawerLayout這個名字,我們也能知道乐纸,這是一個布局衬廷。在這個布局中可以包含兩個子控件:第一個子控件是主屏幕上的內(nèi)容(也就是演示效果圖中小智所在的頁面);第二個子控件便是左側(cè)滑動出菜單所包含的內(nèi)容(也就是我們效果圖的個人詳情頁)汽绢。
這樣一說吗跋,你可能就明白了。整個效果庶喜,其實通過一個DrawerLayout小腊,外加主頁面和菜單頁布局的設(shè)計救鲤,即可實現(xiàn)久窟。
2.滑動菜單的實現(xiàn)過程
1.activity_main.xml 中,引入DrawerLayout 控件本缠,代碼主體框架如下:
上圖中我并沒給出具體的代碼斥扛,而是給出一個大體的結(jié)構(gòu),是因為我覺得丹锹,在文章分析中稀颁,不要讓代碼細(xì)節(jié)擾亂了我們的思路,后續(xù)詳細(xì)代碼我會上傳到github(點擊原文跳轉(zhuǎn))楣黍。
我們可以看到匾灶,DrawerLayout中,包含兩個子控件:第一子控件和第二子控件租漂。其實這里的子控件并沒有限制和要求阶女,我們可以根據(jù)需求添加自己需要的控件或布局。但是哩治,在第二子控件中我保留了一個屬性:
android:layout_gravity="start"
需要注意的是秃踩,這個屬性是第二子控件中必須要指定的,其意義在于告訴DrawerLayout滑動菜單是從屏幕的左側(cè)還是右側(cè)滑出业筏。比如:left表示滑動菜單在左邊憔杨;right表示滑動菜單在右邊;而指定start則表示蒜胖,滑動菜單會根據(jù)系統(tǒng)語言進(jìn)行判斷該從那邊呼出消别。
至此抛蚤,通過修改布局文件,我們就已經(jīng)基本實現(xiàn)了滑動菜單的效果寻狂。
2.雖然通過上述操作霉颠,“抽屜式”滑動菜單效果初現(xiàn)。但是回想一下QQ或OfO等應(yīng)用的滑動菜單荆虱,我們會發(fā)現(xiàn)蒿偎,它們在主頁面左上角一般都會有一個頭像或者圖片,點擊頭像或圖片時怀读,同樣會達(dá)到呼出滑動菜單的效果诉位。這樣不僅可以多一種呼出菜單的方式,更可以顯式的告訴用戶菜枷,我們該側(cè)有一個“隱形”滑動菜單的功能~
相關(guān)實現(xiàn)代碼如下圖:
代碼可見苍糠,現(xiàn)在onCreate方法中,通過actionBar實例的兩個方法:
setDisplayHomeAsUpEnabled用于將左上角導(dǎo)航按鈕顯示出來(HomeAsUp按鈕)啤誊;
setHomeAsUpIndicator方法用于設(shè)置導(dǎo)航按鈕圖片岳瞭。
在onOptionsItemSelected方法中,對HomeAsUp按鈕添加點擊事件蚊锹,需要留意的是HomeAsUp按鈕的id永遠(yuǎn)都是 android.R.id.home 瞳筏,openDrawer方法表示將滑動菜單呼出,參數(shù)同XML第二個子控件的滑動菜單方向牡昆。
3.完善你的滑動菜單
經(jīng)過上述過程姚炕,我們滑動菜單的效果已經(jīng)基本可以實現(xiàn)。但是看起來可能有些簡陋丢烘,這時候就需要你結(jié)合其他一些控件和靈活利用控件的屬性柱宦,來不斷的實現(xiàn)和完善你滑動菜單的炫酷效果!比如結(jié)合:Toolbar播瞳、NavigationView等~
Toolbar是MaterialDesign推薦使用的標(biāo)題欄控件掸刊,不僅繼承ActionBar的所有功能,且靈活度高赢乓,可搭配其他控件實現(xiàn)MaterialDesign效果忧侧。要注意的是,應(yīng)用Toolbar的話骏全,需要隱藏先把AppTheme中style屬性設(shè)為NoActionBar苍柏,將其隱藏。這里先了解一下姜贡,代碼中有所應(yīng)用试吁,需要可簡單參考一下。
NavigationView,Design Support庫中根據(jù)MaterialDesign風(fēng)格要求設(shè)計的一個控件熄捍,可幫助我們把滑動菜單的實現(xiàn)過程變得更簡單烛恤,比如:
app:menu = “@menu/..” 和 app:headerLayout 屬性,可加載設(shè)置相關(guān)內(nèi)容余耽。同時缚柏,NavigationView的點擊事件,實現(xiàn)起來也不難碟贾。
所以币喧,一起用起來吧,結(jié)合多種控件袱耽,
實現(xiàn)你心中炫酷的側(cè)滑菜單欄杀餐!