Android控件-DrawerLayout+NavigationView

一. 前言

DrawerLayout 是在我们的隐藏区域，也就是我们看不见的屏幕以外，通过手指滑动，将 DrawerLayout 滑倒主屏幕区域。

二. demo

1. 在主布局文件中添加ToolBar

<androidx.appcompat.widget.Toolbar
    android:id="@+id/tool_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#aa77bb"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/Theme.AppCompat.Light"
    app:navigationIcon="@drawable/home"
    />

//替换默认的ActionBar
Toolbar toolbar = findViewById(R.id.tool_bar);
toolbar.setTitle("DrawerLayout");
setSupportActionBar(toolbar);

2. 添加DrawerLayout

DrawerLayout和ScrollView一样，内部只能嵌套一个布局。

<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="55dp"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        >

    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

1
2
3

//设置DrawLayout阴影透明
DrawerLayout drawerLayout = findViewById(R.id.drawer);
drawerLayout.setScrimColor(Color.TRANSPARENT);

//设置ToolBar和DrawerLayout关联
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this,
        drawerLayout,
        toolbar,
        R.string.app_name,
        R.string.app_name
);
toggle.syncState();
drawerLayout.addDrawerListener(toggle);

3. 添加NavigationView

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    >

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu"

        />

</RelativeLayout>

<!--NavigationView的头部-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#a2c699"
    android:orientation="vertical"
    android:padding="10dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher_background"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:text="小猫咪"
        android:textSize="22sp"
        android:textColor="#ffffff"
        />


</LinearLayout>

<!--NavigationView的菜单-->
<?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_favor"
            android:icon="@drawable/favor"
            android:title="我的收藏" />
        <item
            android:id="@+id/nav_balance"
            android:icon="@drawable/balance"
            android:title="我的钱包" />
        <item
            android:id="@+id/nav_contract"
            android:icon="@drawable/contact"
            android:title="朋友圈" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/friend"
            android:title="联系人" />
        <item
            android:id="@+id/nav_message"
            android:icon="@drawable/message"
            android:title="我的消息" />
        <item
            android:id="@+id/nav_settings"
            android:icon="@drawable/setting"
            android:title="我的设置" />
    </group>
</menu>

//NavigationView的菜单点击事件
NavigationView navigationView = findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        switch (menuItem.getItemId()){
            case R.id.nav_favor:
                Toast.makeText(MainActivity.this, "我的收藏", Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_balance:
                Toast.makeText(MainActivity.this, "我的钱包", Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_contract:
                Toast.makeText(MainActivity.this, "我的朋友圈", Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_friends:
                Toast.makeText(MainActivity.this, "我的好友", Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_message:
                Toast.makeText(MainActivity.this, "我的消息", Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_settings:
                Toast.makeText(MainActivity.this, "我的设置", Toast.LENGTH_SHORT).show();
                break;
        }

        return true;
    }
});