Android侧滑菜单DrawerLayout，NavigationView

值得注意的是，直接引入这个布局文件就可以初步实现这个侧滑的效果，比如：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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"
    android:id="@+id/drawerLayout"
    android:background="@color/white">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    </FrameLayout>

    <TextView
        android:text="Left menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity = "start"
        android:background="@color/white"
        android:textColor="@color/black"
        android:textSize="30sp"
        >
    </TextView>
</android.support.v4.widget.DrawerLayout>

使用DrawerLayout作为根布局，在其中分为两块，一个是主屏FrameLayout，一个是使用android:layout_gravity = "start"指定的侧滑屏幕。

效果即：将左侧边缘右拖到最右边即可显示出来。

至少存在两个明显缺点：

1. 每次必须从左侧开始拖动才有效果；
2. 用户可能不会知道有这个功能；

我们可以在Activity的代码中为他添加一个导航栏提示按钮：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 1. Toolbar
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        // 2. 显示导航按钮
        actionBar.setDisplayHomeAsUpEnabled(true); 
        actionBar.setHomeAsUpIndicator(R.drawable.ic_baseline_menu_24); // 设置导航按钮图标
        drawerLayout = findViewById(R.id.drawerLayout);
    }

    @Override
    // 3. 加载toobar.xml
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.toobar, menu);
        return true;
    }

    @Override
    // 设置点击导航栏android.R.id.home就打开侧滑
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        if(item.getItemId() == android.R.id.home){
            drawerLayout.openDrawer(GravityCompat.START);
        }
        return true;
    }
}

即点击上图的导航栏中的home按钮即可展开侧滑。

接着，我们可以使用NavigationVIew进行丰富。使用该控件来替换前面使用的TextView控件即可。

<com.google.android.material.navigation.NavigationView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:menu="@menu/nav_menu"
    app:headerLayout="@layout/nav_header"
    android:theme="@style/Theme.AppCompat.Light"
    />

然后，添加nav_menu.xml文件：

<?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/navCall"
            android:icon="@drawable/ic_baseline_bluetooth_24"
            android:title="Call"
            />
        <item
            android:id="@+id/navFriends"
            android:icon="@drawable/ic_baseline_bluetooth_24"
            android:title="Friends"
            />
        <item
            android:id="@+id/navLocation"
            android:icon="@drawable/ic_baseline_bluetooth_24"
            android:title="Location"
            />
        <item
            android:id="@+id/navMail"
            android:icon="@drawable/ic_baseline_bluetooth_24"
            android:title="Mail"
            />
    </group>
</menu>

以及对应的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:background="@color/purple_200"
    android:padding="10dp"
    >
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/ic_baseline_bluetooth_24"
        android:layout_centerInParent="true"
        />

    <TextView
        android:id="@+id/mailText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="10dp"
        android:layout_marginBottom="5dp"
        android:text="xxx@mail.com"
        android:textColor="@color/white"
        android:textSize="16sp">
    </TextView>

    <TextView
        android:id="@+id/userText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/mailText"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="10dp"
        android:layout_marginBottom="30dp"
        android:text="Green"
        android:textColor="@color/white"
        android:textSize="16sp">
    </TextView>
</RelativeLayout>

此时效果：

当然，这里我们将gradle中的依赖都替换为了AndroidX版本的，其中依赖如下：

implementation 'com.google.android.material:material:1.2.0-alpha06'
implementation 'de.hdodenhof:circleimageview:2.1.0'

Activity的代码不变。