DrawerLayout 和NavigationView 实现抽屉式侧滑

最新推荐文章于 2021-04-29 14:22:10 发布

原创最新推荐文章于 2021-04-29 14:22:10 发布 · 472 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一种实现侧滑菜单的方法，通过使用DrawerLayout和NavigationView组件，结合自定义属性，逐步展示了如何创建抽屉效果的侧滑菜单，并提供了完整的代码示例。

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

看到侧滑我想我们都可能觉得他很难实现，其实不然。那下面我们就看看我是这么完成的。
首先我们对侧滑这个界面做一个简单的分析，
侧滑我们看做是手机展示给用户的两个视图，在侧拉的过程中一个将另一覆盖。而每一视图又不同的展示着view 组件，并做监听。
有思路就好说了，那我们就来一步步实现吧。
首先在app build.gradle里添加

注意sdk版本

 compile 'com.android.support:design:24.2.1'

使用 DrawerLayout 作为父布局，该布局至少包含两个view 。

这个属性设置滑出 layout_gravity=”left”,

<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout_drawerlayout"
        tools:context="com.tool.nativeproject.MainActivity">

        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Hello World!" />

        <android.support.design.widget.NavigationView
            android:id="@+id/design_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:fitsSystemWindows="true"


            app:itemTextColor="#000000"
            app:itemIconTint="#FFBE1EAB"
            app:itemBackground="@mipmap/ic_launcher"

            app:headerLayout="@layout/head_view"
            app:menu="@menu/menu_drawer">

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

因为是抽屉的效果，所以我们让他们的宽高都充满了父容器，前一个text view 在这里是底层，当慢慢拉出是有NavigationView 来覆盖。app:headerLayout=”@layout/head_view app:menu=”@menu/menu_drawer”>
分别是我们拉出来后看见的 head，和我们的 menu

接线来我们定义 NavigationView 里边的

head_view

<?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:id="@+id/tv_textview"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:text="head_view"/>

</RelativeLayout>

menu
在values 包下建

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/nav_order"
        android:checked="true"
        android:icon="@mipmap/ic_launcher"
        android:title="标题" />
    <item
        android:id="@+id/nav_wallet"
        android:checked="true"
        android:icon="@mipmap/ic_launcher"
        android:title="标题" />
    <item
        android:id="@+id/nav_message"
        android:checked="true"
        android:icon="@mipmap/ic_launcher"
        android:title="标题" />
    <item
        android:id="@+id/nav_setting"
        android:checked="true"
        android:icon="@mipmap/ic_launcher"
        android:title="标题" />

</menu>

下边看我们完整的代码。
activity

package com.example.fristproject.twenty;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.example.fristproject.R;

/**
 * Created by Administrator on 2016/9/20.
 */
public class SideslipActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    DrawerLayout mDrawerLayout;
    NavigationView mNavigationView;
   TextView tv;
    View headView;
    @Override
    protected void onCreate( Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sideslip);
       tv = (TextView) findViewById(R.id.tv);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.layout_drawerlayout);
        mNavigationView = (NavigationView) findViewById(R.id.design_navigation_view);
        mNavigationView.setNavigationItemSelectedListener(this);
        //获取头部View控件
        headView = mNavigationView.getHeaderView(0);
        final TextView textView = (TextView) headView.findViewById(R.id.tv_textview);

        //头部View进行事件的操作
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(SideslipActivity.this, textView.getText().toString(), Toast.LENGTH_LONG).show();
            }
        });
    }

    @Override
    public boolean onNavigationItemSelected( MenuItem item) {
        switch (item.getItemId()) {
            case R.id.nav_order:
                mDrawerLayout.closeDrawers();
                tv.setText("nav_order");
                break;
            case R.id.nav_wallet:
                mDrawerLayout.closeDrawers();
                tv.setText("nav_wallet");
                break;
            case R.id.nav_message:
                tv.setText("nav_message");
                mDrawerLayout.closeDrawers();
                break;
            case R.id.nav_setting:
                tv.setText("nav_setting");
                mDrawerLayout.closeDrawers();
                break;
        }
        return false;

    }



}

activity_sideslip.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout_drawerlayout"
        tools:context="com.tool.nativeproject.MainActivity">

        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Hello World!" />

        <android.support.design.widget.NavigationView
            android:id="@+id/design_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/head_view"
            app:itemTextColor="#000000"
            app:itemIconTint="#FFBE1EAB"
            app:itemBackground="@mipmap/ic_launcher"
            app:menu="@menu/menu_drawer">

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


</RelativeLayout>

当然这样实现由一定的局限mune 里边的设置有我们自定义属性来决定。这时候就不能完成我们的需要，我们考虑把 NavigationView 这个控件换成list view 用他的多布局来实现，这样就灵活了很多。具体看
http://blog.youkuaiyun.com/lmj623565791/article/details/46405409