NavigationView的实例应用

本实例的最终效果图：

下面分析实现效果：

一：添加包依赖

在引入compile 'com.android.support:design:22.2.0'后，android studio报错，与编译版本24不同。于是把22.2.2改为24.2.0之后就成功了。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    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.0'
    compile 'com.android.support:design:24.2.0'
    compile 'com.android.support:support-v4:24.2.0'
    testCompile 'junit:junit:4.12'
}

二：主布局 ：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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--主页面bar-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#30469b"/>
        <!--内容显示布局-->
        <FrameLayout
            android:id="@+id/frame_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
    <!--定义侧边栏-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer" />
    <!--android:layout_gravity="left" 侧边栏从左边滑出。设为right从右边滑出-->
</android.support.v4.widget.DrawerLayout>

</pre>NavigationView菜单整体分为俩部分，上面一部分叫做He'aderLayout,下面的点击项都是menu。<p></p><p>也就是说：</p><p><span style="white-space:pre"></span>headerlayout就是给导航栏增加一个头部Layout.</p><p><span style="white-space:pre"></span>menu就是对应菜单项的选择条目。</p><p>三：headerlayout和menu对应的布局navigation_header.XML和菜单drawer.XML文件。</p><p>navigation_header.XML</p><p></p><pre name="code" class="java"><?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="200dp"
    android:background="#30469b">
    <TextView
        android:id="@+id/header_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="HeaderLayout"
        android:textColor="#ffffff"
        android:textSize="25sp" />

</RelativeLayout>

</pre>drawer.XML 在目录res/menu/drawer.xml中。需新建menu菜单<p></p><p></p><pre name="code" class="java"><?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/item_one"
            android:icon="@mipmap/icon"
            android:title="我的动态"></item>
        <item
            android:id="@+id/item_two"
            android:icon="@mipmap/icon"
            android:title="我的留言"></item>
        <item
            android:id="@+id/item_three"
            android:icon="@mipmap/icon"
            android:title="附近的人"></item>
    </group>
</menu>

android:checkableBehavior="single"指组中只有一个菜单项可以checked（radio按钮）。

如果要实现item之间的分割线，可以用group包含不同的item来实现，记得为group添加id.

四：MainActivity代码：

package com.example.myservice.navigation;


import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;

import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //设置ToolBar
        final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setTitleTextColor(Color.WHITE);
        setSupportActionBar(mToolbar);

        //设置抽屉DrawerLayout
        final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar,
                R.string.drawer_open, R.string.drawer_close);
        mDrawerToggle.syncState();//初始化状态
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        //设置导航栏NavigationView的点击事件
        NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                switch (menuItem.getItemId())
                {
                    case R.id.item_one:
                        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentOne()).commit();
                        mToolbar.setTitle("我的动态");
                        break;
                    case R.id.item_two:
                        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentTwo()).commit();
                        mToolbar.setTitle("我的留言");
                        break;
                    case R.id.item_three:
                        getSupportFragmentManager().beginTransaction().replace(R.id.frame_content,new FragmentThree()).commit();
                        mToolbar.setTitle("附近的人");
                        break;
                }
                menuItem.setChecked(true);//点击了把它设为选中状态
                mDrawerLayout.closeDrawers();//关闭抽屉
                return true;
            }
        });
    }
}

上面的Fragment动态替换过程中，可以在beginTransaction()后面添加 .addToBackStack(null). 来实现后退栈。（注意前后有点啊）

上面的FragmentOne,FragmentTwo,FragmentThree以及对应的布局layout_one,layout_two,layout_three很简单，就不贴代码了。

demo地址：http://www.it165.net/uploadfile/files/2015/0712/navigationView.rar

原文：http://www.it165.net/pro/html/201507/46841.html