Android 5.0 以后,谷孫終于在SlidingMenu火過(guò)頭后,推出了自己的抽屜式布局!
在你學(xué)習(xí)DrawerLayout之前,你先看看這篇文章,只需要一分鐘,一定要看!!
歡迎回來(lái),本文主要涉及一下幾個(gè)知識(shí)面:
1 如何快速集成DrawerLayout
2 DrawerLayout的細(xì)節(jié)處理,如監(jiān)聽(tīng),如ToogleButtton(這個(gè)涉及到ToolBar,暫時(shí)不說(shuō))
3 如何添加自定義的頭布局,以及獲取頭布局的子控件
4 更改NavigationView menu的字體樣式
先來(lái)一張圖,表示這是抽屜式側(cè)滑布局:
快速集成DrawerLayout
主布局文件:drawer_layout.xml
<android.support.v4.widget.DrawerLayout
android:id="@+id/id_drawerlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/content_layout"/>
<android.support.design.widget.NavigationView
android:id="@+id/id_navigationview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
/>
</android.support.v4.widget.DrawerLayout>
然后,啟動(dòng)你的App,動(dòng)動(dòng)你的大拇指,一個(gè)簡(jiǎn)單的側(cè)滑就出來(lái)了!相比SlidingMenu,這貨還算簡(jiǎn)單的,只需要布局就完成集成.
其中: android:layout_gravity="left",這個(gè)屬性是設(shè)置左側(cè)滑還是右側(cè)滑,right當(dāng)然就是右側(cè)滑了!
那好,既然如此,可以往里面填東西了.一般來(lái)說(shuō),側(cè)滑里面的內(nèi)容都是用戶相關(guān)的.
看看navigationview源碼和網(wǎng)上各路大神的列子發(fā)現(xiàn),其內(nèi)部側(cè)滑菜單以列表的方式展現(xiàn)(之前用的是listView,后來(lái)改為RecyclerView了),所以,我們必須自己寫一個(gè)menu菜單,如圖所示:
menu文件:activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="@+id/nav_me"
android:icon="@drawable/icon_clean"
android:title="我"/>
<item
android:id="@+id/nav_friend"
android:icon="@drawable/icon_clean"
android:title="好友"/>
</group>
<group
android:id="@+id/group_manage"
android:checkableBehavior="none">
<item
android:id="@+id/nav_manage"
android:icon="@drawable/icon_clean"
android:title="應(yīng)用管理"/>
</group>
<group
android:id="@+id/group_settings"
android:checkableBehavior="none">
<item
android:id="@+id/nav_theme"
android:title="主題風(fēng)格"/>
<item
android:id="@+id/nav_night"
android:title="夜間模式"/>
<item
android:id="@+id/nav_setting"
android:title="設(shè)置"/>
<item
android:id="@+id/nav_suggestion"
android:title="意見(jiàn)反饋"/>
<item
android:id="@+id/nav_about"
android:title="關(guān)于"/>
</group>
</menu>
在AS里preView,這段代碼的預(yù)覽是:
現(xiàn)在我們把他加到NavigationView里,在主布局里的NavigationView控件里,我們加入一行代碼:
** app:menu="@menu/activity_main_drawer"**
再啟動(dòng)你的App,動(dòng)動(dòng)你的大拇指,看看你的效果:
添加自定義的頭布局,以及獲取頭布局的子控件
當(dāng)然,這樣的布局肯定是很low的,大多數(shù)的側(cè)滑欄都是自定義的,各種高達(dá)冷酷,那我們也來(lái)自定義吧.剛才我已經(jīng)講過(guò),側(cè)滑的選項(xiàng),底層都是用列表實(shí)現(xiàn)的,所以,我們肯定沒(méi)辦法在menu添加布局,從新寫一個(gè)吧:
layout中新建如圖所示布局:
側(cè)滑菜單頭布局:slide_head.xml
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<ImageView
android:id="@+id/head_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="40dp"
android:src="@drawable/headr_other"/>
</LinearLayout>
再啟動(dòng)你的app,動(dòng)動(dòng)你的大拇指,看看效果,是不是瞬間感覺(jué)就可以裝逼了:
集成的差不多了,現(xiàn)在該來(lái)點(diǎn)擊了!menu的點(diǎn)擊,也是谷孫子封裝好了的,和一般的button點(diǎn)擊無(wú)異.直接上代碼吧:
在你的Activity中為mNavigaView 設(shè)置監(jiān)聽(tīng)
/*找到NavigationView*/
mNavigaView = (NavigationView) findViewById(R.id.id_navigationview);
/*為NavigationView設(shè)置菜單的點(diǎn)擊監(jiān)聽(tīng)事件*/
mNavigaView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
/*ToastUtils是我自己封裝的,你用系統(tǒng)自帶的吧*/
ToastUtils.showToast(ohter.this, "猴子的救兵來(lái)了");
return false;
}
});
肯定又有寶寶說(shuō),我咋知道點(diǎn)擊的是哪一個(gè)呢,不著急,一步一步來(lái)!
NavigationView會(huì)把被點(diǎn)擊的菜單以MenuItem對(duì)象返回,item.getId()就可以獲取到你是點(diǎn)擊的那一個(gè),前提是你在menu的布局中為每一個(gè)menuitem設(shè)置了id.
單個(gè)item的監(jiān)聽(tīng)事件:
mNavigaView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
String string = null;
switch (id) {
case R.id.nav_me:
string = "我";
break;
case R.id.nav_about:
string = "關(guān)于";
break;
case R.id.nav_friend:
string = "好友";
break;
case R.id.nav_manage:
string = "通知";
break;
case R.id.nav_message:
string = "私信";
break;
case R.id.nav_night:
string = "夜間模式";
break;
case R.id.nav_notification:
string = "通知";
break;
case R.id.nav_setting:
string = "設(shè)置";
break;
case R.id.nav_suggestion:
string = "意見(jiàn)反饋";
break;
case R.id.nav_theme:
string = "主題風(fēng)格";
break;
}
/*ToastUtils是我自己封裝的,你用系統(tǒng)自帶的吧*/
ToastUtils.showToast(ohter.this, "猴子的救兵來(lái)了:" + string);
return false;
}
});
不過(guò)呢,slide_head.xml里,一些控件的事件監(jiān)聽(tīng)怎么辦呢?這個(gè)時(shí)候只能從Activity中動(dòng)態(tài)加載布局,代碼如下:
View headView = mNavigaView.inflateHeaderView(R.layout.nav_header_main);
mHeadPic = (ImageView) headView.findViewById(R.id.head_pic);
mHeadPic.setOnClickListener(click);
private View.OnClickListener click = new View.OnClickListener() {
@Override
public void onClick(View v) {
ToastUtils.showToast(ohter.this, "猴子被電擊了");
}
};
重新啟動(dòng)app,動(dòng)動(dòng)你的大拇指,傻眼了對(duì)不,因?yàn)榧虞d了兩個(gè)silde_head.xml
解決辦法:刪除這行代碼
更改NavigationView menu的字體樣式
style中添加樣式:MenuTextStyle
<style name="MenuTextStyle">
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">22sp</item>
</style>
然后將** app:theme="@style/MenuTextStyle"**添加到NavigationView中:
重啟app看看樣式是不是改變了?
碎碎念:個(gè)人建議,無(wú)論什么布局,全部放到頭布局中去,別使用menu,這是脫了褲子打屁多此一舉.
如果你讀到這兒了,說(shuō)明你認(rèn)真學(xué)習(xí)了,恭喜你,又進(jìn)步了,如果你覺(jué)得有用,歡迎給個(gè)"喜歡",謝謝!
如有不明,歡迎加群:584275290
