Android学习笔记：NavigationView实现侧拉抽屉

概述

---

NavigationView 是Google在2015年的IO大会上，发布的AndroidDesign Support Library的新控件，用于取代ActionBar，变得更加的灵活，新的Android Design Support Library兼容性也得到了提升，能够向下兼Android2.2版本。

———-Android Design Support Library使用详解—————

---

实现效果：

编译环境

---

1. Linux下 Android
2. 版本：Android 5.0，SDK API 21
3. compile 'com.android.support:design:23.1.1' （添加在build.gradle中）

实现源码

---

布局文件：
activity_main.xml 主布局是一个DrawerLayout，由官方的文档可以知道，里面包含了一个你自己定义的布局，还有一个NavigationView的侧拉栏布局。

<?xml version="1.0" encoding="utf-8"?><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/dl1"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.example.steam.apptoolbar.MainActivity">    <include layout="@layout/main_layout" />    <!-- NavigationView-->    <android.support.design.widget.NavigationView        android:id="@+id/navigationview"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/na_vi_headerlayout"        app:menu="@menu/navi_menu">    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

下面用na_vi_headerlayout.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="200dp"    android:background="?attr/colorPrimary"    android:gravity="center"    android:orientation="vertical">    <ImageView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_marginTop="10dp"        android:background="@mipmap/img2" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:text="海绵宝宝"        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:text="hello  to the menu" /></LinearLayout>

navi_menu.xml ：需要写在menu文件中

<?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/g1_i1"            android:title="itme1" />        <item            android:id="@+id/g1_i2"            android:title="itme2" />        <item            android:id="@+id/g1_i3"            android:title="itme3" />        <item            android:id="@+id/g1_i4"            android:title="itme4" />    </group>    <item android:title="Version">        <menu>            <item                android:id="@+id/g2_i1"                android:title="version1" />            <item                android:id="@+id/g2_i2"                android:title="version2" />        </menu>    </item></menu>

如果你要添加菜单栏的图标，增加一个icon属性就行了。

---

自定义的布局文件：main_layout.xml

<?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="wrap_content"        android:background="?attr/colorPrimary"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        app:subtitle="subtitle"        app:title="title" />    <TextView        android:id="@+id/tv2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:layout_marginTop="150dp"        android:text="test"        android:textColor="@color/material_blue_700"        android:textSize="50dp" /></LinearLayout>

---

最后是MainActivity.class

package com.example.steam.apptoolbar;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.design.widget.NavigationView.OnNavigationItemSelectedListener;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import layout.CententFragment;public class MainActivity extends AppCompatActivity        implements OnNavigationItemSelectedListener {    private DrawerLayout myDrawerLayout;    private NavigationView myNaviView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //设置toolbar        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        //初始化控件        myDrawerLayout = (DrawerLayout) findViewById(R.id.dl1);        myNaviView = (NavigationView) findViewById(R.id.navigationview);        /*        *ActionBarDrawerToggle 将toolbar和Drawer联系起来        * 初始参数ActionBarDrawerToggle(Activity activity, DrawerLayout drawerLayout,        * Toolbar toolbar, @StringRes int openDrawerContentDescRes,         * @StringRes int closeDrawerContentDescRes);(当前Activity,drawerLayout,toolbar,打开侧拉栏时候的文字提示,关闭侧拉栏时候的文字提示         *         */        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this, myDrawerLayout, toolbar, R.string.open, R.string.close);        myDrawerLayout.setDrawerListener(toggle);        toggle.syncState();//刷新toolbar        //设置点击监听        myNaviView.setNavigationItemSelectedListener(this);    }    @Override    public void onBackPressed() {        if (myDrawerLayout.isDrawerOpen(GravityCompat.START)) {            myDrawerLayout.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }    @Override    public boolean onNavigationItemSelected(MenuItem item) {        myDrawerLayout.closeDrawer(GravityCompat.START);        return true;    }}

这里还需要提到的是ActionBarDrawerToggle的构造方法的第三个参数，以前是可以不使用这个参数的，但在最新的Material Design设计规范中ActionBar已经被Toolbar取代，变得更加的灵活，所以此方法中需要 传递一个Toolbar的对象。

---

what the f

其实上面的侧拉抽屉效果可以在三秒钟之内实现，=。=是的，Android Studio新建一个NavigationView Drawer Activity。

当然你想自定义一个抽屉上面的东西也是要明白的。还有一种实现侧拉蓝抽屉的方式是在DrawerLayout中定义一个Listview，通过适配器来实现效果。

---

新的一周，晚安。