Android Design新特性－NavigationView实现抽屉式

最新推荐文章于 2024-06-16 22:25:48 发布

XKCK

最新推荐文章于 2024-06-16 22:25:48 发布

阅读量840

点赞数

分类专栏： Android

Android 专栏收录该内容

71 篇文章

订阅专栏

本文介绍如何在Android应用中实现导航抽屉功能，包括添加依赖库、创建菜单项及布局等步骤，并提供代码示例。

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

效果图
这里写图片描述

添加依赖库
（要是高版本的Android Studio，则已经为我们自动添加了所需的依赖库）

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:design:22.2.1'
}

创建菜单项
nav_menu.xml

<?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/home"
            android:title="Home"
            android:icon="@drawable/ic_home"/>
        <item
            android:id="@+id/settings"
            android:title="Settings"
            android:icon="@drawable/ic_setting"/>
        <item
            android:id="@+id/trash"
            android:title="Trash"
            android:icon="@drawable/ic_trash"
            />
        <item
            android:id="@+id/logout"
            android:title="Logout"
            android:icon="@drawable/ic_exit"
            />
    </group>
</menu>

创建布局
nav_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="190dp"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:src="@drawable/ic_person"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/tv_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1234563278@126.com"
        android:layout_gravity="center"
        android:textSize="20sp"
        android:textColor="@color/White"/>



</LinearLayout>

nav_menu与nav_header分别为NavigationView中的头部与菜单项。记得NavigationView必须以DrawerLayout为父容器

content_main.xml

<?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="match_parent"
    >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Navigation Drawer"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textSize="25sp"
        />

</RelativeLayout>

main.xml

<?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"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">



        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            >

        </android.support.v7.widget.Toolbar>



    </android.support.design.widget.CoordinatorLayout>


    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu"
        android:layout_gravity="start"
        >

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

界面

package com.example.demo.navigationviewtest;

import android.os.Bundle;
import android.support.design.widget.NavigationView;
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 android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {


    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mActionBarDrawerToggle;
    private Toolbar mToolbar;
    private NavigationView mNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mToolbar = (Toolbar) findViewById(R.id.tool_bar);
        mNavigationView = (NavigationView) findViewById(R.id.navigation_view);

        mToolbar.setTitle("NavigationView");
        setSupportActionBar(mToolbar);

        mActionBarDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.open,R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };


        mActionBarDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                int id = menuItem.getItemId();
                switch (id) {
                    case R.id.home:
                        Toast.makeText(getApplicationContext(), "Home", Toast.LENGTH_SHORT).show();
                        mDrawerLayout.closeDrawers();
                        break;
                    case R.id.settings:
                        Toast.makeText(getApplicationContext(), "Settings", Toast.LENGTH_SHORT).show();
                        mDrawerLayout.closeDrawers();
                        break;
                    case R.id.trash:
                        Toast.makeText(getApplicationContext(), "Trash", Toast.LENGTH_SHORT).show();
                        mDrawerLayout.closeDrawers();
                        break;
                    case R.id.logout:
                        Toast.makeText(getApplicationContext(), "Logout", Toast.LENGTH_SHORT).show();
                        mDrawerLayout.closeDrawers();
                        break;
                }

                return true;
            }
        });


        TextView tv_email = (TextView)findViewById(R.id.tv_email);
        tv_email.setText("http://blog.youkuaiyun.com/wiseclown");



    }


}