[Android]DrawerLayout滑动菜单+NavigationView

爱被打了一巴掌 2024-03-27 09:06 70阅读 0赞

**DrawerLayout的介绍**

--------------------

滑动菜单，就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式即节省了屏幕空间，又实现了非常好的动画效果，是Material Design中推荐的做法。

**DrawerLayout的用法**

--------------------

DrawerLayout是一个布局，在布局中允许放入两个直接的子控件：

第一个子控件是主屏幕中显示的内容。

第二个子控件是滑动菜单中显示的内容。

<?xml version="1.0" encoding="utf-8"?>
    <androidx.drawerlayout.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar1"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"//高度设置为actionBar的高度
                    android:background="?attr/colorPrimary"//背景颜色设置为colorPrimary
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"//单独将弹出的菜单项指定为浅色主题
                  />
        />
       <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="This is menu"
            android:layout_gravity="start"
            android:background="#fff"
            android:textSize="30sp"/>
    </androidx.drawerlayout.widget.DrawerLayout>

添加导航按钮展示滑动菜单

class MainActivity : AppCompatActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            setSupportActionBar(toolbar)
            supportActionBar?.let {
                it.setHomeAsUpIndicator(R.drawable.is_menu)//设置一个导航按钮图标
               it.setDisplayHomeAsUpEnabled(true)//让导航按钮显示出来
            }
       }
        override fun onCreateOptionsMenu(menu: Menu): Boolean {
            menuInflater.inflate(R.menu.toolbar,menu)
            return true
        }
    
        override fun onOptionsItemSelected(item: MenuItem): Boolean {
            when(item.itemId){
                android.R.id.home->{
                    var drawerLayout:DrawerLayout=findViewById(R.id.drawerLayout)
                    drawerLayout.openDrawer(GravityCompat.START)//将滑动菜单展现初来
                }
                ... 
            }
            return true
        }
    }

![a10f3141ebee4f6286b892dca6a6bc04.png][]

**NavigationView的介绍**

--------------------

NavigationView是Material库中提供的一个控件，它不仅是严格按照Material Design的要求设计的，而且可以将滑动菜单页面的实现变得非常简单。

**NavigationView的使用**

--------------------

添加依赖

implementation 'com.google.android.material:material:1.7.0'
        implementation 'de.hdodenhof:circleimageview:3.0.1'

先来准备菜单项

res/menu/nav\_menu.xml

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <group android:checkableBehavior="single">//single表示组中的所有菜单项只能单选
            <item
                android:id="@+id/navCall"
                android:title="Call"
                android:icon="@drawable/nav_call"/>
            <item
                android:id="@+id/navFriends"
                android:title="Friend"
                android:icon="@drawable/is_friends"/>
            <item
                android:id="@+id/navLocation"
                android:title="Location"
                android:icon="@drawable/is_location"/>
            <item
                android:id="@+id/navMail"
                android:title="Main"
                android:icon="@drawable/nav_mail"/>
            <item
                android:id="@+id/navTask"
                android:icon="@drawable/nav_tasks"
                android:title="Tasks"/>
        </group>
    
    </menu>

准备头部布局

res/layout/nav\_header.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="180dp"
        android:padding="10dp"
        android:background="@color/purple_500">
        <de.hdodenhof.circleimageview.CircleImageView//将图片圆形化
            android:id="@+id/iconImage"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/img"
            android:layout_centerInParent="true"/>
        <TextView
            android:id="@+id/mailText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="1111111111@qq.com"
            android:textColor="#FFF"
            android:textSize="14sp"/>
        <TextView
            android:id="@+id/userText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/mailText"
            android:text="TT"
            android:textColor="#FFF"
            android:textSize="14sp"/>
    </RelativeLayout>

定义NavigationView

<com.google.android.material.navigation.NavigationView
            android:id="@+id/navView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/nav_menu"//显示具体的菜单项
            app:headerLayout="@layout/nav_header"//显示头部布局
    />

处理菜单项的点击事件

navView.setCheckedItem(R.id.navCall)//将Call菜单项设置为默认选中
    navView.setNavigationItemSelectedListener {//设置一个菜单项选中事件的监听器
                drawerLayout.closeDrawers()//将滑动菜单关闭
                true//表示此事件已被处理
    }

效果如图：

![c9ab43c9a3f946b09f56653e4e6a9a53.png][]

[a10f3141ebee4f6286b892dca6a6bc04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/893102f4ee5b448e8e384dd248220d6b.png
[c9ab43c9a3f946b09f56653e4e6a9a53.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8167a9a8d4b540a08d9c81e92341066e.png