Material Design related knowledge points (2)

DrawLayout

How to achieve the sidebar effect mentioned above?
The beginning is very simple, Android and help us figure it out, just add a controlDrawerLayout

此处代码放在LinearLayout里面（也就是侧滑栏那一块）
  特别注意如果没有这段代码，你侧滑没有效果
      android:layout_gravity="start"

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
   
    android:id="@+id/drawerlayout02"
    tools:context=".Drawer02Activity">
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
       />
</FrameLayout>
    <LinearLayout
        android:id="@+id/left_layout"
        这里也的宽度也要设置一些，不要设置为match_parent
        android:layout_width="300dp"
        android:layout_height="match_parent"
         特别注意如果没有这段代码，你侧滑没有效果
      android:layout_gravity="start"
        android:orientation="horizontal"
        android:layout_gravity="start">

    <com.google.android.material.navigation.NavigationView
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        />
    </LinearLayout>
</androidx.drawerlayout.widget.DrawerLayout>

Here, DrawerLayout is used as the root layout, and FrameLayout is wrapped inside, which contains the content contained in the home page, and LinearLayout wraps the NavigationView. This LinearLayout is the content to be displayed in the sidebar. app:menu is the menu bar, and app:headerLayout wraps the header information on it.

NavigationView滑动菜单页面
需要添加依赖
implementation 'com.android.support:design:24.2.1'

下面的依赖是实现圆角图片的
    implementation 'de.hdodenhof:circleimageview:3.1.0'

av_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="#009688">
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/animal"
        android:src="@drawable/animal"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mail"
        android:layout_alignParentBottom="true"
        android:text="[email protected]"
        android:textSize="20sp"
        android:textColor="#fff"/>
    <TextView
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:layout_above="@+id/mail"
        android:textSize="20sp"
        android:textColor="#fff"
        android:text="William——tao"
        />

</RelativeLayout>

nav_menu

<?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/nav_call"
       android:icon="@drawable/add"
       android:title="Call"/>
       />
    <item
        android:id="@+id/nav_friends"
        android:icon="@drawable/delete"
        android:title="Friends"/>
    <item
        android:id="@+id/nav_mail"
        android:icon="@drawable/menu"
        android:title="Mail"/>
</group>
</menu>

Part of java code:

public class Drawer02Activity extends AppCompatActivity {
    
    
    private DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer02);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout = findViewById(R.id.drawerlayout02);
        NavigationView navigationView = findViewById(R.id.nav_view);
        //获取标题栏
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
    
    
        /// 给左上角图标的左边加上一个返回的图标
            actionBar.setDisplayHomeAsUpEnabled(true);
            //改变原有图标的icon
            actionBar.setHomeAsUpIndicator(R.drawable.menu);
        }
        //为滑动菜单页面添加事件，点击每一个菜单，就退出滑动菜单页面
        navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    
    
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    
    
            //退出滑动菜单页面
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
    
    
        switch (item.getItemId()) {
    
    
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
        }
        return  true;
    }

}

Also note:The main interface layout must be before all the sliding interface layouts, The width and height should be set to match_parent, and the layout_gravity tag cannot be included.