[Android] 側邊欄 MaterialDrawer

很多APP都會有側邊欄的功能，但個人覺得這部分在實作時比較複雜，所以留個紀錄。

這邊使用Github上一個很有名的套件：mikepenz / MaterialDrawer

他能簡化MaterialDrawer的設計、製作流程。

此作者的版本更新很快，而且今年升級成8.0後功能大調整，所以8.0以前不適用本文。

1.在build.gradle:app中增加以下套件

//側邊欄
implementation "com.mikepenz:materialdrawer:8.1.8"
implementation "androidx.recyclerview:recyclerview:1.1.0"
implementation "androidx.annotation:annotation:1.1.0"
implementation "com.google.android.material:material:1.2.1"
// Add for NavController support
implementation "com.mikepenz:materialdrawer-nav:8.1.8"
// Add for Android-Iconics support
implementation "com.mikepenz:materialdrawer-iconics:8.1.8"

2.在Activity畫面中新增以androidx.drawerlayout.widget.DrawerLayout作為最底層布局的畫面，然後內層再包自己想要的布局與com.mikepenz.materialdrawer.widget.MaterialDrawerSliderView側邊欄的布局

<androidx.drawerlayout.widget.DrawerLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dl_home_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tb_home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.mikepenz.materialdrawer.widget.MaterialDrawerSliderView
        android:id="@+id/slider"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />

</androidx.drawerlayout.widget.DrawerLayout>

3.在styles.xml中修改app使用的style

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  <!-- Customize your theme here. -->
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  
  <!-- 增加這兩行 -->
  <item name="materialDrawerStyle">@style/Widget.MaterialDrawerStyle</item>
  <item name="materialDrawerHeaderStyle">@style/Widget.MaterialDrawerHeaderStyle</item>
  <!-- 增加這兩行 -->
</style>

4.再次確定manifests中設定的主題是不是我們修改過的

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

5.撰寫程式碼部分

public class HomeActivity extends AppCompatActivity {

    private Toolbar tb_home;
    private DrawerLayout dlRoot;

    private ActionBarDrawerToggle abdt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);

        tb_home = findViewById(R.id.tb_home);
        dlRoot = findViewById(R.id.dl_home_root);

        setSupportActionBar(tb_home);
        abdt = new ActionBarDrawerToggle(this, dlRoot, tb_home, com.mikepenz.materialdrawer.R.string.material_drawer_open, com.mikepenz.materialdrawer.R.string.material_drawer_close);
        dlRoot.addDrawerListener(abdt);

    }
}

到目前為止就能實現最基本的空白側邊欄了

 

–待續–