什么是 DrawerLayout
DrawerLayout(抽屜式導(dǎo)航欄)是一個(gè)面板隙袁,它將應(yīng)用的主要導(dǎo)航選項(xiàng)顯示在屏幕左邊緣痰娱。大多數(shù)情況下,它處于隱藏狀態(tài)菩收,但是如果用戶從屏幕左邊緣滑動(dòng)手指猜揪,同時(shí)在應(yīng)用頂層觸摸操作欄中的應(yīng)用圖標(biāo),它將會(huì)顯示出來
簡(jiǎn)單來說這是一個(gè)實(shí)現(xiàn)了側(cè)滑菜單效果的控件坛梁,主要分為側(cè)邊菜單和主內(nèi)容兩部分,并可根據(jù)手勢(shì)操作進(jìn)行展開或隱藏腊凶。下面結(jié)合 Toolbar + DrawerLayout + NavigationView 來學(xué)習(xí)一下
簡(jiǎn)單使用
按照慣例划咐,我們先看一下效果圖:
從效果圖來看,界面主要分為3部分:Toolbar钧萍、內(nèi)容區(qū)域褐缠、側(cè)邊欄(NavigationView)。下面我們就該效果看看具體實(shí)現(xiàn)风瘦,如果對(duì) Toolbar 不熟悉的队魏,可以看我的前一篇文章 MaterialDesign(一),ToolBar使用
- 引入 com.android.support:design
由于我們這個(gè)例子使用到 NavigationView万搔,所以需要引入 com.android.support:design
compile 'com.android.support:design:26.1.0'
- xml 文件創(chuàng)建
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary">
<!--此處可以添加自定義控件-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="custom"
android:textColor="@android:color/white"
android:textSize="16sp"/>
</android.support.v7.widget.Toolbar>
<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="內(nèi)容"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header"
app:menu="@menu/menu_nav"/>
</android.support.v4.widget.DrawerLayout>
從 xml 布局文件看胡桨,我們的根布局是 DrawerLayout,里面包含兩個(gè)部分瞬雹,從上到下第一部分必須是主布局昧谊,第二部分是側(cè)邊欄,這里的側(cè)邊欄我們使用了 NavigationView酗捌,也可以是任意視圖呢诬。第二部分必須添加 android:layout_gravity
屬性,這里使用了 android:layout_gravity="start"
表示是左側(cè)邊欄胖缤。NavigationView 的其他屬性尚镰,下面介紹 NavigationView 再進(jìn)行解釋,現(xiàn)在主要關(guān)注 DrawerLayout 的實(shí)現(xiàn)
- Activity 中獲取并設(shè)置相關(guān)屬性值哪廓,以及事件監(jiān)聽
@BindView(R.id.drawer_layout)
DrawerLayout mDrawerLayout;
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 點(diǎn)擊導(dǎo)航圖標(biāo)展開側(cè)邊欄
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
// 如有需要可以設(shè)置DrawerLayout監(jiān)聽
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
// 滑動(dòng)過程回調(diào)
}
@Override
public void onDrawerOpened(View drawerView) {
// 展開回調(diào)
}
@Override
public void onDrawerClosed(View drawerView) {
// 關(guān)閉回調(diào)
}
@Override
public void onDrawerStateChanged(int newState) {
// 狀態(tài)改變回調(diào)
}
});
可以看出在 Activity 中無需設(shè)置什么狗唉,主要設(shè)置一下 Toolbar 的導(dǎo)航圖標(biāo)點(diǎn)擊時(shí)展開側(cè)邊欄,設(shè)置監(jiān)聽可根據(jù)具體業(yè)務(wù)設(shè)置
NavigationView 介紹
Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.
NavigationView is typically placed inside a DrawerLayout.
大致的意思是 NavigationView 代表著應(yīng)用的標(biāo)準(zhǔn)導(dǎo)航欄撩独,菜單的內(nèi)容可以由菜單資源文件填充敞曹,通常放置在 DrawerLayout 中
上面我們?cè)?xml 中已經(jīng)使用到 NavigationView 這個(gè)控件了账月,下面了解一下使用到的這兩個(gè)屬性, app:headerLayout="@layout/nav_header"
屬性是給導(dǎo)航欄設(shè)置一個(gè)頭布局澳迫,可以引用 layout 文件局齿; app:menu="@menu/menu_nav"
屬性是為導(dǎo)航欄設(shè)置菜單項(xiàng),支持分組橄登,根據(jù)效果圖抓歼,看下具體的實(shí)現(xiàn)
nav_header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="240dp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/android_bg"/>
</LinearLayout>
menu_nav.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="設(shè)置">
<menu>
<group android:id="@+id/setting_g_1">
<item
android:id="@+id/setting_item_1"
android:icon="@drawable/ic_settings_black_24dp"
android:title="設(shè)置1"/>
<item
android:id="@+id/setting_item_2"
android:icon="@drawable/ic_settings_black_24dp"
android:title="設(shè)置2"/>
</group>
</menu>
</item>
<item android:title="設(shè)置(個(gè)性)">
<menu>
<group android:id="@+id/setting_g_2">
<item
android:id="@+id/setting_item_3"
android:icon="@drawable/ic_settings_black_24dp"
android:title="設(shè)置3"/>
<item
android:id="@+id/setting_item_4"
android:icon="@drawable/ic_settings_black_24dp"
android:title="設(shè)置4"/>
</group>
</menu>
</item>
</menu>
這里簡(jiǎn)單的設(shè)置了一張圖片作為頭部,菜單項(xiàng)則使用了兩個(gè)分組拢锹,每個(gè)分組里面有兩個(gè)菜單項(xiàng)谣妻,可以說是非常簡(jiǎn)單。最后在 Activity 中設(shè)置各個(gè)菜單項(xiàng)的點(diǎn)擊事件即可卒稳,代碼如下
mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
String tip = "";
switch (id) {
case R.id.setting_item_1:
tip = "設(shè)置1";
break;
case R.id.setting_item_2:
tip = "設(shè)置2";
break;
case R.id.setting_item_3:
tip = "設(shè)置3";
break;
case R.id.setting_item_4:
tip = "設(shè)置4";
break;
}
Toast.makeText(ToolbarActivity.this, tip, Toast.LENGTH_SHORT).show();
// 隱藏側(cè)邊欄
mDrawerLayout.closeDrawer(GravityCompat.START);
return false;
}
});
結(jié)語
本文主要介紹了 DrawerLayout 和 NavigationView 的使用蹋半,DrawerLayout 在實(shí)際開發(fā)過程中用的也比較多。想了解更多充坑,可以參考官方 API减江。DrawerLayout API,NavigationView API捻爷,請(qǐng)自備梯子辈灼。本文 demo 已上傳到 github