Android 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);
}
}
});