簡年1:Android側(cè)滑菜單欄是怎么實現(xiàn)的斑胜?

Hello,大家好~

平時使用App時嫌吠,你可能早就注意到

許多應(yīng)用左側(cè)都有側(cè)滑菜單欄的效果

(比如:QQ止潘、OfO等),看上去真是炫酷極了~

不知道你是否也像我一樣辫诅,好奇這種抽屜式的滑動菜單是怎么實現(xiàn)的呢凭戴?

下面就讓我們一起來看一下,這個看上去復(fù)雜的功能炕矮,到底是怎么實現(xiàn)的吧O(∩_∩)O

老規(guī)矩么夫,先上效果圖

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 控件本缠,代碼主體框架如下:

引入 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è)滑菜單欄杀餐!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市朱巨,隨后出現(xiàn)的幾起案子史翘,更是在濱河造成了極大的恐慌,老刑警劉巖冀续,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件琼讽,死亡現(xiàn)場離奇詭異,居然都是意外死亡洪唐,警方通過查閱死者的電腦和手機(jī)钻蹬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來桐罕,“玉大人脉让,你說我怎么就攤上這事桂敛」ε冢” “怎么了?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵术唬,是天一觀的道長薪伏。 經(jīng)常有香客問我,道長粗仓,這世上最難降的妖魔是什么嫁怀? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮借浊,結(jié)果婚禮上塘淑,老公的妹妹穿的比我還像新娘。我一直安慰自己蚂斤,他們只是感情好存捺,可當(dāng)我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般捌治。 火紅的嫁衣襯著肌膚如雪岗钩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天肖油,我揣著相機(jī)與錄音兼吓,去河邊找鬼。 笑死森枪,一個胖子當(dāng)著我的面吹牛视搏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播县袱,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼凶朗,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了显拳?” 一聲冷哼從身側(cè)響起棚愤,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎杂数,沒想到半個月后宛畦,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡揍移,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年次和,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片那伐。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡踏施,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出罕邀,到底是詐尸還是另有隱情畅形,我是刑警寧澤,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布诉探,位于F島的核電站日熬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏肾胯。R本人自食惡果不足惜竖席,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望敬肚。 院中可真熱鬧毕荐,春花似錦、人聲如沸艳馒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至虽填,卻和暖如春丁恭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背斋日。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工牲览, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人恶守。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓第献,卻偏偏與公主長得像,于是被迫代替她去往敵國和親兔港。 傳聞我的和親對象是個殘疾皇子庸毫,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內(nèi)容