首發(fā)于我的博客,轉(zhuǎn)載請注明作者和原文鏈接惫搏。
用以實現(xiàn)Android中的抽屜樣式，在Google自己推出BottomNavigation之前蚕涤，抽屜樣式的交互可謂Material Design的標桿筐赔。
添加內(nèi)容布局作為DrawerLayout的首個子view，并設置寬高為match_parent揖铜，不能設置layout_gravity茴丰。
在內(nèi)容布局之下添加抽屜布局，設置layout_gravity天吓，控制其在屏幕的左或右出現(xiàn)贿肩。一般設置高度match_parent，寬度wrap_content龄寞。不能設置多個抽屜布局汰规，會報錯。
抽屜布局呢物邑，其實任意view都可以溜哮，但是Material Design中推薦使用NavigationView。
定義Style
首先修改下我們之前的styles.xml文件色解，設置狀態(tài)欄為透明茂嗓。
在《Material Design ( 1 ) - 主題樣式》的基礎(chǔ)上，再添加如下：
在res/values/styles.xml中添加：
<style name="AppTheme.Fit" parent="AppTheme.NoActionBar"/>
在res/values-v21/styles.xml中添加：
<style name="AppTheme.Fit" parent="AppTheme.NoActionBar">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
NavigationView
完整的NavigationView由頭部自定義布局科阎，下部分的menu布局組成述吸。
app:headerLayout設置頭部布局。
app:menu設置menu布局锣笨。
定義NavigationView頭部布局
在res/layout下創(chuàng)建 nav_header_main.xml：
<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="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:padding="@dimen/spacing_16"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_spacing"
app:srcCompat="@android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_spacing"
android:text="Android Studio"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio@android.com" />
</LinearLayout>
定義NavigationView的menu內(nèi)容
在res/menu下創(chuàng)建 drawer_layout.xml：
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools" />
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
</menu>
DrawerLayout
DrawerLayout需要注意的地方前面說過了蝌矛，直接看XML。
XML布局
<android.support.v4.widget.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"
android:fitsSystemWindows="true"
android:id="@+id/drawer_layout">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/drawer_layout" />
</android.support.v4.widget.DrawerLayout>
DrawerLayout
很簡單错英，就是單純作為最外層的布局使用入撒。
需要注意android:fitsSystemWindows="true"，設置為true之后走趋，在5.0以上的設備中就有沉浸式狀態(tài)欄的效果衅金。NavigationView
app:headerLayout設置頭部布局噪伊。
app:menu設置menu內(nèi)容簿煌。
android:layout_gravity="start"必須。如果不設置鉴吹，NavigationView會占滿整個布局姨伟。
app:itemIconTintmenu圖標的顏色
app:itemBackgroundmenu背景顏色
app:itemTextColormenu字體的顏色
Java代碼：DrawerLayoutActivity
public class DrawerLayoutActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawerlayout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
}
}
使用了ActionBarDrawerToggle來給Toolbar的左邊添加一個圖標，帶有一個交互動畫豆励。
在AndroidManifest.xml中注冊該Activity夺荒，同時別忘記把主題設置成我們前面定義過的那個瞒渠。
<activity android:name=".drawerlayout.DrawerLayoutActivity"
android:theme="@style/AppTheme.Fit"/>
給NavigationView添加點擊事件
這里menu的點擊事件，和頭部布局中的點擊事件需要分開寫技扼。
menu點擊
Activity 需要實現(xiàn) NavigationView.OnNavigationItemSelectedListener 接口伍玖。
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
重寫下面的方法：
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
} else if (id == R.id.nav_manage) {
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
頭部布局點擊
- 獲取頭部布局
View headerView = navigationView.getHeaderView(0);
- 然后通過調(diào)用headerView中的findViewById方法來查找到頭部的控件，設置點擊事件即可剿吻。
NavigationView的menu圖標顏色
上面這么用的時候窍箍，會發(fā)現(xiàn)menu的圖標好像全是統(tǒng)一的一個顏色，那我們想顯示圖片自身的顏色呢丽旅？
navigationView.setItemIconTintList(null);
