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="[email protected]"
        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

的代碼不變。