通过 NavigationView 创建导航抽屉

来源：互联网发布：手机截图软件编辑：程序博客网时间：2024/04/27 02:51

NavigationView 可用于方便地创建导航抽屉，并且向下兼容到 Android 2.1。

效果如下（AndroidStudio 1.5）：

要使用 DrawerLayout,需要 v4 包，使用 NavigationView，需要 v7 包。

compile 'com.android.support:design:22.2.0' // 可修改，如下：

布局文件 content_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"    android:fitsSystemWindows="false">    <!-- 我的内容布局-->    <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/text1" />    <android.support.design.widget.NavigationView        android:id="@+id/navigation"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/navigation_header"        app:menu="@menu/my_navigation_items" /></android.support.v4.widget.DrawerLayout>

其中的 android:fitsSystemWindows 属性，大意如下：

这是一个 boolean 值的内部属性，让 View 可以根据系统窗口（如 status bar）来调整自己的布局，如果值为 true ，就会调整 View 的 padding 属性来给 system windows 留出空间。

headerLayout就是给导航栏增加一个头部Layout。

menu就是对应菜单项的选择条目。

navigation_header.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="250dp"    android:background="?attr/colorPrimary"    android:gravity="center"    android:orientation="vertical"    android:padding="10dp"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <ImageView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_marginTop="16dp"        android:background="@drawable/xx07"/>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:gravity="center"        android:text="hello，world ！"        android:textAppearance="@style/TextAppearance.AppCompat.Body1"        android:textSize="20sp"/></LinearLayout>

my_navigation_items ：

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <!--注意图片的大小，图片大了将显示不了，现在所有的大约为 21px * 21px -->    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_2"            android:icon="@drawable/icon_communities"            android:title="@string/text2"/>        <item            android:id="@+id/nav_3"            android:icon="@drawable/icon_event"            android:title="@string/text3"/>        <item            android:id="@+id/nav_4"            android:icon="@drawable/icon_hangouts"            android:title="@string/text4"/>        <item            android:id="@+id/nav_5"            android:icon="@drawable/icon_hot"            android:title="@string/text5"/>    </group>    <item android:title="@string/text6">        <menu>            <item                android:icon="@drawable/icon_local"                android:title="@string/text7"/>            <item                android:icon="@drawable/icon_photos"                android:title="@string/text8"/>        </menu>    </item></menu>

其中的 <group android:checkableBehavior="single"> 设定一组菜单项为至多只有一个可被选中，非常适合用于通

过导航抽屉切换呈现的 Fragment，若需要默认选中一个菜单项则只需要给指定 item 加上

android:checked="true" 即可。

所用的 strings.xml:

<resources>    <string name="app_name">ChouTi</string>    <string name="action_settings">Settings</string>    <string name="text1">打开</string>    <string name="text2">艺术家</string>    <string name="text3">专辑</string>    <string name="text4">歌曲</string>    <string name="text5">播放列表</string>    <string name="text6">子列表</string>    <string name="text7">设置</string>    <string name="text8">风格</string>    <string name="drawer_open">打开</string>    <string name="drawer_close">关闭</string></resources>

MainActivity.java :

package com.scxh.chouti;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Gravity;import android.view.MenuItem;import android.view.View;import android.widget.Button;public class MainActivity extends AppCompatActivity {    private DrawerLayout mDrawerLayout;    private NavigationView navigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        navigationView = (NavigationView) findViewById(R.id.navigation);        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,                mDrawerLayout,                toolbar,                R.string.drawer_open,                R.string.drawer_close);        mDrawerToggle.syncState();//初始化状态        mDrawerLayout.setDrawerListener(mDrawerToggle);        setupDrawerContent(navigationView);        Button button = (Button) findViewById(R.id.button);        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                mDrawerLayout.openDrawer(Gravity.LEFT);            }        });    }    private void setupDrawerContent(final NavigationView navigationView) {        navigationView.setNavigationItemSelectedListener(                new NavigationView.OnNavigationItemSelectedListener() {                    @Override                    public boolean onNavigationItemSelected(MenuItem menuItem) {                        menuItem.setChecked(true);                        mDrawerLayout.closeDrawers();                        return true;                    }                });    }}

其中的 ActionBarDrawerToggle 是 DrawerLayout.DrawerListener 实现。

作用：

1. 改变 android.R.id.home 返回的图标；

2. Drawer 拉出，隐藏，带有 android.R.id.home 动画效果；

3. 监听 Drawer 拉出，隐藏。

如果不使用 ActionBarDrawerToggle，可修改 MainActivity.java 代码，改后效果如下（只写了打开功能，没有写关

闭功能）：

MainActivity.java :

package com.scxh.chouti;import android.os.Bundle;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBar;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Gravity;import android.view.MenuItem;import android.view.View;import android.widget.Button;public class MainActivity extends AppCompatActivity {    private DrawerLayout mDrawerLayout;    private NavigationView navigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        // 启用home as up        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        final ActionBar actionBar = getSupportActionBar();        if (actionBar != null) {            actionBar.setHomeAsUpIndicator(R.drawable.icon_communities);            actionBar.setDisplayHomeAsUpEnabled(true);        }        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        navigationView = (NavigationView) findViewById(R.id.navigation);       /* ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,                mDrawerLayout,                toolbar,                R.string.drawer_open,                R.string.drawer_close);        mDrawerToggle.syncState();//初始化状态        mDrawerLayout.setDrawerListener(mDrawerToggle);*/        setupDrawerContent(navigationView);        Button button = (Button) findViewById(R.id.button);        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                mDrawerLayout.openDrawer(Gravity.LEFT);            }        });    }    private void setupDrawerContent(final NavigationView navigationView) {        navigationView.setNavigationItemSelectedListener(                new NavigationView.OnNavigationItemSelectedListener() {                    @Override                    public boolean onNavigationItemSelected(MenuItem menuItem) {                        menuItem.setChecked(true);                        mDrawerLayout.closeDrawers();                        return true;                    }                });    }    /**     * 在home菜单被点击的时候，打开drawer（这一步和navigation view没什么关系）     */    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case android.R.id.home:                mDrawerLayout.openDrawer(GravityCompat.START);                return true;        }        return super.onOptionsItemSelected(item);    }}

0 0