學習Android的新的UI控件Material Design（二）——DrawerLayout + NavigationView實現側滑菜單功能

側滑菜單功能使用的是DrawerLayout + NavigationView的功能實現具體實現方式如下：

修改activity_main.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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<FrameLayout 
android:layout_width="match_parent"
android:laytou_heigth="matcht_parent">
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
</FrameLayout>

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    layout_gravity="start"
    android:text="This is menu"
    android:textSize="30sp"
    android:background="#FFF"/

</android.support.v4.widget.DrawerLayout>

現在修改MainActivity的代碼如下：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
 

  mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  

ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
    //將菜單按鈕添加進去
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeAsUpIndicator(R.drawable.ic_dns_black_24dp);
}

public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;

//在這個方法中添加一個新的圖標功能

現在運行一下代碼可以得到簡單的側滑菜單

要使用NavigationView的功能要導入開源庫Design Support庫具體如下：

compile 'com.android.support:design:26+'
compile 'de.hdodenhof:circleimageview:2.1.0'

然後創建相應的nav_menu.xml文件代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">

        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/ic_settings_phone_black_24dp"
            android:title="Call"/>

        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/ic_friends_black"
            android:title="Friends"/>

    </group>
</menu>

再創建一個nav_header.xml的文件用於存放圓形頭像框的控件具體代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/icon_image"
        android:src="@mipmap/ic_launcher"
        android:layout_centerInParent="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:layout_alignParentBottom="true"
        android:text="[email protected]"
        android:textSize="14sp"/>

    <TextView
        android:id="@+id/mail"
        android:layout_above="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tony Green"
        android:textColor="#fff"
        android:textSize="14sp"/>

</RelativeLayout>

現在在activity_main.xml的文件中導入需要的兩個佈局文件代碼如下：

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/nav_menu"
    app:headerLayout="@layout/nav_header"
    />

這個佈局放在DrawerLayout的佈局下

然後修改MainActivity的代碼如下：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
 

  mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
  

NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
//初始化控件

ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
    //將菜單按鈕添加進去
    actionBar.setDisplayHomeAsUpEnabled(true);
    actionBar.setHomeAsUpIndicator(R.drawable.ic_dns_black_24dp);
}

navView.setCheckedItem(R.id.nav_call);
navView.setNavigationItemSelectedListener(new NavigationView
        .OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        mDrawerLayout.closeDrawers();

return true;

//在這個方法中添加一個新的圖標功能

public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;