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); // 不檢測從左到右的滑動動作