前言
關(guān)于Material Design相關(guān)的控件，前兩篇文章已經(jīng)介紹了一些常用的控件了，這篇文章主要介紹一下DrawerLayout+NavigationView+Toolbar宾符。這樣Material Design的也介紹的差不多了，剩下RecyclerView策肝、cardView肛捍、CoordinatorLayout一些控件，以后有機會慢慢再寫之众。
效果圖
這里寫圖片描述
DrawerLayout
介紹：導(dǎo)航欄從左側(cè)滑入拙毫。這是Google應(yīng)用中常見的模式，并且遵循列表的鍵盤和指標棺禾。通常代表應(yīng)用程序在屏幕左邊緣的主要導(dǎo)航選項缀蹄。它大部分時間都是隱藏的，但是當用戶從屏幕的左邊緣滑動手指時會顯示膘婶，或者在應(yīng)用的頂層缺前，用戶觸摸工具欄中的應(yīng)用程序圖標。
NavigationView
介紹：被設(shè)計用于應(yīng)用導(dǎo)航悬襟，提供了一種通用的導(dǎo)航方式衅码，體現(xiàn)了設(shè)計的一致性。而NavigationView的典型用途就是配合之前v4包的DrawerLayout脊岳，作為其中的Drawer部分逝段，即導(dǎo)航菜單的本體部分。NavigationView是一個導(dǎo)航菜單框架割捅，使用menu資源填充數(shù)據(jù)奶躯，使我們可以更簡單高效的實現(xiàn)導(dǎo)航菜單。它提供了不錯的默認樣式亿驾、選中項高亮嘹黔、分組單選、分組子標題莫瞬、以及可選的Header儡蔓。
Toolbar
介紹：Toolbar是在 Android 5.0 開始推出的一個 Material Design 風格的導(dǎo)航控件 ，Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導(dǎo)航欄疼邀，以此來取代之前的 Actionbar 浙值。與 Actionbar 相比， Toolbar 明顯要靈活的多檩小。它不像 Actionbar 一樣，一定要固定在Activity的頂部烟勋，而是可以放到界面的任意位置规求。除此之外，在設(shè)計 Toolbar 的時候卵惦，Google也留給了開發(fā)者很多可定制修改的余地阻肿，這些可定制修改的屬性在API文檔中都有詳細介紹。
使用
一.在build.gradle文件中添加
compile 'com.android.support:appcompat-v7:X.X.X'
compile 'com.android.support:design:X.X.X'
compile 'com.android.support:support-v4:X.X.X'
// X.X.X specify the version
二.style樣式
MD對應(yīng)的style
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<!-- 箭頭 -->
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
<!--返回鍵樣式-->
<item name="android:fitsSystemWindows">true</item>
</style>
<!-- 左邊的箭頭指示-->
<style name="DrawerArrowStyle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>
三.xml布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<!--
//為了效果更好沮尿，toolbar使用單獨的theme
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
//修改的是彈出菜單項的theme
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/buttom_navigation"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
四.menu代碼
<?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_notification"
android:title="通知" />
<item
android:id="@+id/nav_message"
android:title="私信" />
</group>
<group
android:id="@+id/group_manage"
android:checkableBehavior="none">
<item
android:id="@+id/nav_manage"
android:title="應(yīng)用管理" />
</group>
<group
android:id="@+id/group_settings"
android:checkableBehavior="none">
<item
android:id="@+id/nav_theme"
android:title="主題風格" />
<item
android:id="@+id/nav_setting"
android:title="設(shè)置" />
<item
android:id="@+id/nav_suggestion"
android:title="意見反饋" />
<item
android:id="@+id/nav_about"
android:title="關(guān)于" />
</group>
</menu>
五.Activity代碼
public class DrawerLayoutActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener {
@BindView(R.id.drawer_layout)
DrawerLayout mDrawerLayout;
@BindView(R.id.toolbar)
Toolbar mToolbar;
@BindView(R.id.navigation_view)
NavigationView mNavigationView;
private ActionBarDrawerToggle mDrawerToggle;
@Override
protected int attachLayoutRes() {
return R.layout.activtiy_drawer_layout;
}
@Override
protected void initView() {
//設(shè)置toolbar標題文本
mToolbar.setTitle("首頁");
//設(shè)置toolbar
setSupportActionBar(mToolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
//設(shè)置左上角圖標是否可點擊
actionBar.setHomeButtonEnabled(true);
//左上角加上一個返回圖標
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
@Override
protected void initDate() {
//創(chuàng)建返回鍵丛塌，并實現(xiàn)打開關(guān)/閉監(jiān)聽
/**
* drawerLayout左側(cè)菜單（或者右側(cè)）的展開與隱藏可以被DrawerLayout.DrawerListener的實現(xiàn)監(jiān)聽到较解，
* 這樣你就可以在菜單展開與隱藏發(fā)生的時刻做一些你希望做的事情。
* 如果你的activity有actionbar的話赴邻，還是建議你用ActionBarDrawerToggle來監(jiān)聽印衔，ActionBarDrawerToggle實現(xiàn)了DrawerListener，所以他能做DrawerListener可以做的任何事情姥敛，
* 同時他還能將drawerLayout的展開和隱藏與actionbar的app 圖標關(guān)聯(lián)起來奸焙，當展開與隱藏的時候圖標有一定的平移效果，點擊圖標的時候還能展開或者隱藏菜單彤敛。
* */
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
mNavigationView.setNavigationItemSelectedListener(this);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
String mString = null;
switch (id) {
case R.id.nav_notification:
mString = "通知";
break;
case R.id.nav_message:
mString = "私信";
break;
case R.id.nav_manage:
mString = "應(yīng)用管理";
break;
case R.id.nav_theme:
mString = "主題風格";
break;
case R.id.nav_setting:
mString = "設(shè)置";
break;
case R.id.nav_suggestion:
mString = "意見反饋";
break;
case R.id.nav_about:
mString = "關(guān)于";
break;
}
mToolbar.setTitle(mString);
mDrawerLayout.closeDrawer(GravityCompat.START);
return true;
}
}
總結(jié)與注意
- DrawerLayout允許放入兩個直接子控件与帆，第一個控件是主屏幕顯示的內(nèi)容，第二個控件是滑動菜單中顯示的內(nèi)容墨榄。
- DrawerLayout中android:layout_gravity="start"屬性的意思玄糟，表示會根據(jù)系統(tǒng)語言進行判斷，如果系統(tǒng)語言是從左往右（如漢語袄秩、英語）阵翎，滑動菜單就在左邊；如果系統(tǒng)語言是從右往左（如阿拉伯語）播揪，滑動菜單就在右邊贮喧。
- 點擊ToolBar icon打開側(cè)滑菜單，需要在onOptionsItemSelected（）中添加如下代碼猪狈，意思是交給
ActionBarDrawerToggle去處理app icon的點擊事件箱沦。由于ActionBarDrawerToggle實現(xiàn)了DrawerListener，所以他能做DrawerListener可以做的任何事情雇庙，控制打開和關(guān)閉谓形。
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
- 當使用NavigationView時，style中不可以自定義textColorPrimary這個字段疆前，因為我的理解是使用“android：textColorPrimary”需要最小的version為21寒跳。所以會報 Error inflating class android.support.design.widget.NavigationView 這個錯誤。
- 如果想打造一個比較好看的菜單竹椒，NavigationView這個可以添加menu和headerLayout來實現(xiàn)市面上比較好看的效果童太。
- NavigationView.setCheckedItem()將菜單某個item設(shè)置為默認選中。
