Material Design Android官方控件之介紹
Material Design控件之DrawerLayout
- extends ViewGroup
- drawerLayout 是一個跟LinearLayout等控件一樣佈局控件，只是drawerLayout帶有滑動的功能。只要按照drawerLayout的規定佈局方式寫完佈局，就能有側滑的效果。
導入support-v4庫,一般創建項目就已經依賴v4庫
'com.android.support:support-v4:26.1.0'簡單使用
1.xml
<android.support.v4.widget.DrawerLayout
android:id="@+id/DrawerLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar">
<!--第一個，顯示的佈局-->
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:id="@+id/flb_nothing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="12dp"
/>
</android.support.design.widget.CoordinatorLayout>
<!--第二個，不顯示的抽屜佈局-->
<LinearLayout
android:id="@+id/ll_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start|left"
android:background="#cdcdcd"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DrawerLayout抽屜效果"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文本"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按鈕"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
- 類似於Framelayout ,但規定有兩個子佈局,類型任意
- 第一個，顯示的佈局,這裏是一個CoordinatorLayout
- 第二個 , 不顯示的抽屜佈局,這裏是一個LinearLayout
- 抽屜佈局必須設置layout_gravity屬性 ,layout_gravity=”start”
- start或者left:左側滑入抽屜, end或者right:右側滑入抽屜
- 抽屜佈局的寬度不建議超過320dp
- 從最側邊滑動纔有效
2.addDrawerListener
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
}
@Override
public void onDrawerOpened(View drawerView) {
}
@Override
public void onDrawerClosed(View drawerView) {
}
@Override
public void onDrawerStateChanged(int newState) {
}
});- DrawerListener監聽DrawerLayout抽屜滑動狀態
- SimpleDrawerListener是DrawerListener的子類,不用重寫四個方法
3.openDrawer
openDrawer(View drawerView)
openDrawer(View drawerView, boolean animate)
openDrawer(@EdgeGravity int gravity)
openDrawer(@EdgeGravity int gravity, boolean animate)
mDrawerLayout.openDrawer(GravityCompat.START);- gravity取值 Gravity.LEFT;GravityCompat.START:左側滑入
- gravity取值Gravity.Right;GravityCompat.END:右側滑入
- Gravity.LEFT=3
- Gravity.Right=5
- GravityCompat.START=RELATIVE_LAYOUT_DIRECTION | Gravity.LEFT
- GravityCompat.END = RELATIVE_LAYOUT_DIRECTION | Gravity.RIGHT
- GravityCompat.RELATIVE_LAYOUT_DIRECTION = 0x00800000
4. openDrawer
closeDrawer(View drawerView)
closeDrawer(View drawerView, boolean animate)
closeDrawer(@EdgeGravity int gravity)
closeDrawer(@EdgeGravity int gravity, boolean animate) 5.與toolbar交互
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.DrawerLayout);
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
mToolbar,
R.string.drawer_open, /* "open drawer" description for accessibility */
R.string.drawer_close /* "close drawer" description for accessibility */
) {
public void onDrawerClosed(View view) {
getSupportActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
public void onDrawerOpened(View drawerView) {
getSupportActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
mDrawerLayout.addDrawerListener(mDrawerToggle);
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// 需要將ActionDrawerToggle與DrawerLayout的狀態同步
// 將ActionBarDrawerToggle中的drawer圖標，設置爲ActionBar中的Home-Button的Icon
mDrawerToggle.syncState();
}- ActionBarDrawerToggle實現了DrawerListener，所以他能做DrawerListener可以做的任何事情，同時他還能將drawerLayout的展開和隱藏與actionbar的app 圖標關聯起來，當展開與隱藏的時候圖標有一定的平移效果，點擊圖標的時候還能展開或者隱藏菜單。
- onPostCreate() mDrawerToggle.syncState();將ActionDrawerToggle與DrawerLayout的狀態同步
- new ActionBarDrawerToggle()之後mToolbar不能設置setNavigationOnClickListener,不然會失效
- 因爲在ActionBarDrawerToggle構造方法裏對toolbar做了一件事
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mDrawerIndicatorEnabled) {
toggle();
} else if (mToolbarNavigationClickListener != null) {
mToolbarNavigationClickListener.onClick(v);
}
}
});6.自定義toolbar Home鍵觸發drawer
- 當然,你可以不使用ActionBarDrawerToggle,圖標變化效果就得自己做了.
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (drawerLayout.isDrawerOpen(Gravity.RIGHT)) {
drawerLayout.closeDrawer(Gravity.RIGHT);
} else {
drawerLayout.openDrawer(Gravity.RIGHT);
}
}
});
源碼地址：