Simple implementation of Android drawer menu (DrawerLayout+NavigationView)

Keywords: Android DrawerLayout xml encoding

Recently, I met the use of the drawer menu in my study. Write down a note.

First create the layout file as follows:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dl"
    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"
    tools:context=".MainActivity">
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.appcompat.widget.Toolbar
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:id="@+id/tbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:background="?attr/colorPrimary"
        />
</FrameLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav"
        android:layout_width="200dp"
        android:layout_height="match_parent"
       android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/herader"
        />

</androidx.drawerlayout.widget.DrawerLayout>

DrawerLayout should be used on the outside, and then the first sub label below is the content of the main interface to be realistic. Here I add a Toolbar, which can also use other controls, and the layout can also be changed to see the specific needs;

Next, the second NavigationView is very important. The attributes to be set are: ID: Needless to say, everyone on earth knows this

Android: layout ` width: set the width, match the content, or set the value by yourself

Android: Layout & height: it is generally to fill in the parent form.

android:layout_gravity: this attribute is very important. start means to pull out from the left, and end means to right;

App: menu = "@ menu / nav menu" / / when we see the reference here, we know that we need to create the resource folder of menu by ourselves as follows:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group>
    <item
        android:id="@+id/one"
        android:title="one"
        android:icon="@drawable/abc_vector_test" />
    <item
        android:id="@+id/two"
        android:title="two"
        android:icon="@drawable/abc_vector_test" />
    <item
        android:id="@+id/four"
        android:title="four"
        android:icon="@drawable/abc_vector_test" />
</group>
    <item
        android:id="@+id/five"
        android:title="five"
        android:icon="@drawable/abc_vector_test" />
    <item
        android:id="@+id/six"
        android:title="six"
        android:icon="@drawable/abc_vector_test" />
</menu>

This file is equivalent to every single option below the drawer when you have a chance to map it;

According to the < group > label grouping, the name of the title attribute setting button and the icon setting option icon can define their own id: that's all

 

 

 

app:headerLayout="@layout/herader"

This is another reference. It's in the layout folder, which means that we need to create a layout. This layout is used as the content displayed on the title menu, which is generally the head image. The layout file is very simple, which can be used after writing according to our own needs;

===========================================The above is the layout part======================================

Next, you need to change the code file. Find the activity file corresponding to DrawerLayout

public class MainActivity extends AppCompatActivity {

    DrawerLayout dl;
    NavigationView nv;
 protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar=findViewById(R.id.tbar);
        setSupportActionBar(toolbar);
        nv=findViewById(R.id.nav);
        dl=findViewById(R.id.dl);
        nv.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                dl.closeDrawers();
                return false;
            }
        });

    }

This is the click event to set the drawer menu item. I didn't distinguish each menu item in this event. Generally, I use Switch to determine what button I clicked to set the event. Because it's a simple event, I don't need to write complicated. As long as I know how to use it, I call the method to close the drawer window in the click event.

 

 

So far, the simple call has been implemented, and many other events will be triggered during the drawing and closing of the drawer menu. We need to rewrite it ourselves, so we will not expand it here, and we can view the API;

Published 8 original articles, praised 0, visited 107
Private letter follow

Posted by antileon on Wed, 11 Mar 2020 00:09:25 -0700