Android Material Design之NavigationView(五)

1. 先上图
   

2. 使用说明
   NavigationView与DrawerLayout 成对出现,经常被用作侧滑菜单,因此当我们使用 NavigationView时布局文件的根节点一定是DrawerLayout

3. 属性

4. 源代码

• activity布局代码

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


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/layout_head"
        app:menu="@menu/nav_menu" />


    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/design_default_color_primary_variant"
            app:logo="@mipmap/ic_launcher"
            app:menu="@menu/menu"
            app:navigationIcon="@drawable/ic_baseline_arrow_back_24"
            app:subtitle="我是一个子标题"
            app:subtitleCentered="false"
            app:subtitleTextColor="@color/white"
            app:title="我是一个标题"
            app:titleCentered="true"
            app:titleTextColor="@color/white" />


    androidx.coordinatorlayout.widget.CoordinatorLayout>
androidx.drawerlayout.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

• layout_head.xml

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/design_default_color_primary_variant"
        app:layout_constraintDimensionRatio="h,16:9"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" />
androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• nav_menu.xm

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/g1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/item1"
            android:title="A_1" />
        <item
            android:id="@+id/item2"
            android:title="A_2" />
        <item
            android:id="@+id/item3"
            android:title="A_3" />
        <item
            android:id="@+id/item4"
            android:title="A_4" />
    group>

    <group android:id="@+id/g2">
        <item
            android:id="@+id/item5"
            android:title="B_1" />
        <item
            android:id="@+id/item6"
            android:title="B_2" />
        <item
            android:id="@+id/item7"
            android:title="B_3" />
        <item
            android:id="@+id/item8"
            android:title="B_4" />
    group>
menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

• Activity源代码

package com.yyf.demo;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;

import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;

import com.google.android.material.navigation.NavigationView;
import com.yyf.demo.databinding.ActivityMain3Binding;

public class MainActivity extends AppCompatActivity {
    private ActivityMain3Binding binding;
    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        binding = ActivityMain3Binding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
        setSupportActionBar(binding.toolbar);

        binding.toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG, "onClick: 点击了返回图标");
            }
        });

        binding.navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                Log.d(TAG, "onNavigationItemSelected: " + item.getTitle());
                //点击左侧滑动菜单item后,关闭侧滑菜单
                binding.drawerLayout.closeDrawers();
                return false;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        Log.d(TAG, "onOptionsItemSelected: " + item.getItemId());
        switch (item.getItemId()) {
            case R.id.scan:
                Log.d(TAG, "onOptionsItemSelected: " + item.getTitle());
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

6. 使用注意
   • 在使用DrawerLayout当作根节点时NavigationView 一定要作为紧跟的子View,否则将无法使用侧滑效果
   • 在menu.xml文件中如果想让item出现间隔线条,只需要添加Group标签 并对Group标签声明id
   • NavigationView.setNavigationItemSelectedListener不生效 解决办法: 要将NavigationView 放在DrawerLayout最后一个紧跟的子View