1. 程式人生 > 其它 >Android入門教程 | DrawerLayout 側滑欄

Android入門教程 | DrawerLayout 側滑欄

DrawerLayout 是實現了側滑選單效果的控制元件。

DawerLayout 分為側邊選單和主內容區兩部分

  • 主內容區要放在側邊選單前面,還有就是主內容區最好以 DrawerLayout 最好為介面的根佈局,否則可能會出現觸控事件被遮蔽的問題。

  • 側滑選單部分的佈局必須設定 layout_gravity 屬性,表示側滑選單是在左邊還是右邊,設定了 layout_gravity="start/left" 的檢視才會被認為是側滑選單。

使用的注意事項

  • 主內容檢視一定要是 DrawerLayout 的第一個子檢視
  • 主內容檢視寬度和高度需要 match_parent
  • 必須顯示指定側滑檢視的 android:layout_gravity 屬性 android:layout_gravity = "start" 時,從左向右滑出選單 android:layout_gravity = "end"時,從右向左滑出選單 不推薦使用left和right!!!
  • 側滑檢視的寬度以dp為單位,不建議超過320dp(為了總能看到一些主內容檢視)
    設定側滑事件:mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListene

DrawerLayout 示例:

要使用 DrawerLayout,可以在 layout xml 檔案中將 DrawerLayout 設定為根檢視。

從左邊滑出的抽屜檢視(側滑欄)

一個簡單的從左邊滑出側滑欄的例子。

側滑欄滑出後,後面的檢視會有個陰影。

layout 檔案

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:openDrawer="start">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是主頁" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是側滑欄" />
    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

效果:

需要注意的是,DrawerLayout 要設定tools:openDrawer="start";而且側滑欄layout要設定android:layout_gravity="start"

如果改成tools:openDrawer="end",側滑欄 layout 要設定android:layout_gravity="end"。側滑欄可以從右邊滑出。

現在側邊欄放的是RelativeLayout。 也可以放一個RecyclerView。

抽屜出來時推動頁面

監聽側滑欄的滑動事件,使用ActionBarDrawerToggle。側滑欄滑出時,在onDrawerSlide方法中計算出滑動的距離。 然後主檢視設定水平相對偏移距離setTranslationX

即可。

可在activity的onCreate方法執行配置操作

DrawerLayout root = findViewById(R.id.root);
    final View contentView = findViewById(R.id.content_field);

    ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, root, android.R.string.yes, android.R.string.cancel) {

        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            super.onDrawerSlide(drawerView, slideOffset);
            float slideX = drawerView.getWidth() * slideOffset;
            contentView.setTranslationX(slideX);
        }
    };
    root.addDrawerListener(actionBarDrawerToggle);
改變滑出時的陰影

使用 DrawerLayout 的setScrimColor方法,改變陰影顏色。預設的陰影顏色是DEFAULT_SCRIM_COLOR = 0x99000000

DrawerLayout root = findViewById(R.id.root);
root.setScrimColor(Color.TRANSPARENT);
鎖定 DrawerLayout
root.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); // 解鎖
root.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED); // 不檢測從左到右的滑動動作

Android零基礎入門教程視訊參考