通过 NavigationView 创建导航抽屉

本文详细介绍了如何在Android Studio中利用NavigationView与DrawerLayout创建导航抽屉,包括布局文件、相关包依赖、代码实现及关键属性解释,同时提供了完整的示例代码与说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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);
    }

}



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值