侧滑菜单（二）NavigationView的简单使用

上一次我们使用了DrawerLayout来实现侧滑，http://blog.csdn.net/sinat_35159441/article/details/77249450，现在我们在上次的基础上，使用DrawerLayout结合NavigationView来实现侧滑菜单。

先看效果：

步骤如下：

一：在gradle中进行配置

因为NavigationView是design包下的，所有我们要在gradle中引入这个包。

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:design:24.2.1'
    testCompile 'junit:junit:4.12'
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

二：在布局文件中引入NavigationView

布局文件如下:

<?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">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/colorPrimary"
        app:title="侧滑菜单" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.NavigationView
            android:id="@+id/navi"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/navi_menu"
            app:headerLayout="@layout/head_layout"
            >
        </android.support.design.widget.NavigationView>
        <TextView
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="这是主界面"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

可以看到NavigationView的根标签下有两个属性 app:menu=”@menu/navi_menu”
app:headerLayout=”@layout/head_layout”

意思是指定侧滑菜单中的头和菜单和下方的菜单，我们从上面的效果图可以看到侧滑菜单分为了两部分，上面的头和下面的菜单。分别指定其资源文件即可。

2.1、head的布局文件

<?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="match_parent"
    android:orientation="vertical"
    android:padding="30dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerVertical="true"
        android:src="@drawable/photo" />

    <TextView
        android:id="@+id/name"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="UserName:hmc" />
    <TextView
        android:layout_toRightOf="@+id/image"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mail:121.com" />
</RelativeLayout>

2.2、menu的布局文件

创建文件res–>menu–>navi_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/call"
            android:icon="@drawable/nav_call"
            android:title="Call" />
        <item
            android:id="@+id/friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends" />
        <item
            android:id="@+id/location"
            android:icon="@drawable/nav_call"
            android:title="Call" />
        <item
            android:id="@+id/Mail"
            android:icon="@drawable/nav_mail"
            android:title="Call" />
        <item android:title="其他">
            <menu>
                <item
                    android:id="@+id/setting"
                    android:icon="@drawable/ic_dashboard"
                    android:title="设置" />
                <item
                    android:id="@+id/about"
                    android:icon="@drawable/ic_event"
                    android:title="关于我们" />
            </menu>
        </item>
    </group>
</menu>

可以看到item里面还可以嵌套menu，实现的效果可见上面的效果图，以一条横线来区分一般的item和嵌套menu的item。

三：代码实现、

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    ActionBarDrawerToggle toggle;
    DrawerLayout drawerLayout;
    NavigationView navi;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawlayout);

        navi = (NavigationView) findViewById(R.id.navi);
        //固定写法，让侧滑的开关与侧滑状态进行绑定
        toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
        toggle.syncState();
        drawerLayout.addDrawerListener(toggle);

        //修改默认显示的icon
        ActionBar ab = getSupportActionBar();
        ab.setHomeAsUpIndicator(R.drawable.nav_mail);
        ab.setDisplayHomeAsUpEnabled(true);
//修改默认选中的条目
//navi.setCheckedItem(R.id.friends);
//子条目的点击事件
        navi.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.location:
                        break;
                }
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }
}

需要注意的有两点：默认显示的三条横杠是可以自定义的，可以设置自条目的点击事件。