[Android]DrawerLayout sliding menu + NavigationView

Introduction to DrawerLayout

---

The sliding menu is to hide some menu options instead of placing them on the main screen, and then the menu can be displayed by sliding. This method not only saves screen space, but also achieves very good animation effects, which is the recommended method in Material Design.

Usage of DrawerLayout

---

DrawerLayout is a layout that allows two direct child controls to be placed in the layout:

The first child control is what is displayed in the main screen.

The second child control is what is displayed in the sliding menu.

<?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>

Add a navigation button to display a sliding menu

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

 Introduction to NavigationView

---

NavigationView is a control provided in the Material library. It is not only designed in strict accordance with the requirements of Material Design, but also makes the implementation of sliding menu pages very simple.

Use of NavigationView

---

add dependencies

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

Let's prepare the menu items first

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>

 Prepare the header layout

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="[email protected]"
        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>

Define 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"//显示头部布局
/>

Handle click events for menu items

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

 The effect is as shown in the figure: