DrawerLayout配合NavigationView简单实现侧滑菜单栏

最新推荐文章于 2020-05-31 10:51:46 发布

一颗烂葱

最新推荐文章于 2020-05-31 10:51:46 发布

阅读量2.8k

点赞数 1

分类专栏：安卓学习

本文链接：https://blog.youkuaiyun.com/a8341025123/article/details/52951290

版权

安卓学习专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了DrawerLayout和NavigationView的使用方法，包括布局配置、代码实现及菜单项点击监听等关键步骤。

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

什么是DrawerLayout

DrawerLayout谷歌官方出品的侧滑菜单控件，在support-V4包下，可以自由实现侧滑菜单内的内容。

什么是NavigationView

如果说DrawerLayout是侧滑菜单的实现，那么NavigationView是谷歌为开发者提供好的一种侧滑菜单风格，简单易用，快速实现Material Design风格

开发准备

在gradle下

dependencies {
compile fileTree(dir: ‘libs’, include: [‘*.jar’])
compile ‘com.android.support:appcompat-v7:24.2.0’
}

layout\activity_drawer.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawerlayout"
    android:fitsSystemWindows="true"
    >

    <LinearLayout
        android:id="@+id/main_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

                />


        <TextView
            android:id="@+id/text_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="这里是主面板区域"
            android:textSize="25sp">
        </TextView>



    </LinearLayout>

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


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

可以看到，整个被DrawerLayout包裹的布局划分成了两部分：LinearLayout和NavigationView。在DrawerLayout中，应该把主界面布局放在前面，侧滑菜单布局放在后面。所以这里LinearLayout是主界面，NavigationView是侧滑菜单的界面，如上图。

主布局里就放了一个Toolbar和TextView，这里不是讲解重点就不介绍。这里讲解NavigationView.

android:layout_width=”wrap_content”

可以看到宽度我设置成了wrap_content，因为是Material Design风格，宽度已经固定好拉

android:layout_gravity=”start”

android:layout_gravity=”start” 这句是设置侧滑菜单从左滑出，如果设置成end是从右边滑出

app:headerLayout=”@layout/nv_header”

菜单内的“头布局”，就是图中的类似用户头像的布局

app:menu=”@menu/main_drawer”

侧滑菜单内的“菜单布局”

layout/nv_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="180dp"
    android:background="@drawable/background_material"
    android:orientation="vertical"
    android:gravity="bottom"
    android:padding="16dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_marginTop="8dp"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center_vertical"
        >
        <ImageView
            android:id="@+id/profile_image"
            android:layout_width="76dp"
            android:layout_height="76dp"
            android:background="@drawable/z"
            />
    </LinearLayout>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="一颗烂葱"
        android:textSize="14sp"
        android:textColor="#000"
        android:textStyle="bold"
        android:paddingBottom="4dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="youkuaiyun.com"
        android:textSize="14sp"
        android:textColor="#000"
        />

</LinearLayout>

menu\main_drawer

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item android:id="@+id/navigation_item1"
            android:checkable="true"
            android:title="SwipeRefresh"
            android:icon="@mipmap/ic_launcher"/>
        <item android:id="@+id/navigation_item2"
            android:checkable="true"
            android:title="CollapsingToolbarLayout"
            android:icon="@mipmap/ic_launcher"/>
        <item android:id="@+id/navigation_item3"
            android:checkable="true"
            android:title="Toolbar"
            android:icon="@mipmap/ic_launcher"/>
        <item android:id="@+id/navigation_item4"
            android:checkable="true"
            android:title="DrawerLayout"
            android:icon="@mipmap/ic_launcher"/>

        <item android:id="@+id/navigation_sub"
            android:title="其他">
            <menu>
                <item android:id="@+id/navigation_sub_item1"
                    android:checkable="true"
                    android:title="xxxx"
                    android:icon="@mipmap/ic_launcher"/>
                <item android:id="@+id/navigation_sub_item2"
                    android:checkable="true"
                    android:title="xxxx"
                    android:icon="@mipmap/ic_launcher"/>
                <item android:id="@+id/navigation_sub_item3"
                    android:checkable="true"
                    android:title="xxxx"
                    android:icon="@mipmap/ic_launcher"/>
            </menu>
        </item>
    </group>
</menu>

1.布局之后，就是代码的实现了。在代码中,要将DrawerLayout和NavigationView“绑定”到一块,如何绑定呢？使用ActionBarDrawerToggle

2.菜单内的点击监听则有NavigationView.setNavigationItemSelectedListener()来实现

3.你也可以选择不将DrawerLayout和NavigationView绑定，这样的话Toolbar的左边就不会出现弹出侧滑菜单的按钮，可以自己去定制返回按钮

放码

private Toolbar toolbar;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("DrawerLayout测试");
        navigationView = (NavigationView) findViewById(R.id.navigationView);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        setSupportActionBar(toolbar);


        //三行代码绑定DrawerLayout和NavigationView
        ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close);
        actionBarDrawerToggle.syncState();
        drawerLayout.addDrawerListener(actionBarDrawerToggle);

        //菜单栏的点击监听
         navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
                 switch (menuItem.getItemId()) {
              case R.id.navigation_item1:
                //Intent intent = new Intent(MainActivity.this,SwipeRefresh.class);
                //startActivity(intent);
                break;
                default:
                //Toast.makeText(MainActivity.this,"menu click",Toast.LENGTH_SHORT).show();
                break;
            }
            return true;
        });
    }
}