Android 开发之Android Material Design NavigationView侧滑界面自定义

Android 开发之Android Material Design NavigationView侧滑界面自定义

一、侧滑界面Menu自定义：

在menu文件夹下新建activity_main_drawer.xml文件，自定义标题和icon：

<pre name="code" class="java"><?xmlversion="1.0"encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">   
<groupandroid:checkableBehavior="single">
        <itemandroid:id="@+id/nav_forWhy"    android:icon="@drawable/ic_nav_for_why"
            android:title="十万个为什么"/>
        <itemandroid:id="@+id/nav_knowledge"android:icon="@drawable/ic_nav_knowledge"
            android:title="百科知识"/>
        <itemandroid:id="@+id/nav_expo"android:icon="@drawable/ic_nav_expo"
            android:title="科普博览"/>
        <itemandroid:id="@+id/nav_reader"android:icon="@drawable/ic_nav_reader"
            android:title="科普读物"/>
        <itemandroid:id="@+id/nav_favorite"android:icon="@drawable/ic_nav_favorite"
            android:title="我的私藏"/>
    </group>

    <itemandroid:title="其他">
        <menu>
            <itemandroid:id="@+id/nav_author"android:icon="@drawable/ic_nav_author"
                android:title="作者"/>
            <itemandroid:id="@+id/nav_about"android:icon="@drawable/ic_nav_about"
                android:title="版权说明"/>
        </menu>
    </item>
</menu>

二、侧滑界面头部布局自定义

在layout下新建nav_header_main.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="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">

    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/imageView" />

    <TextView android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="@string/app_name"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Encyclopedia World"
        android:id="@+id/textView" />

</LinearLayout>

三、开始创建activity的布局文件

将自定义menu和头部布局添加到activity_main.xml布局文件的NavigationView控件中:

<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_main"
    app:menu="@menu/activity_main_drawer" />

四、在activity声明并调用NavigationView

声明NavigationView:

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

对NavigationView每个item的进行监听：

@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();

    switch (id){
        case R.id.nav_forWhy://十万个为什么
                        break;
        case R.id.nav_knowledge://百科知识
                       break;
        case R.id.nav_expo://科普博览
            break;
        case R.id.nav_reader://科普读物
                      break;
        case R.id.nav_favorite://我的私藏
                       break;
        case R.id.nav_author://作者
                        break;
        case R.id.nav_about://版权说明
                     break;
    }

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);//关闭侧滑界面
    return true;
}

五、最终效果图：

Demo下载地址：http://zhushou.360.cn/detail/index/soft_id/3145828