上一章节谈到了DrawerLayout的简单使用,本章节就探讨下DrawerLayout与ToolBar之间能擦出什么样的火花,翻看文档不难免发现ToolBar是v7包下的一个组件,和ActionBar有着同样的效果,但是要比ActionBar好用,兼容性更强,定制效果更好(这里不做过多讲解)等等!
----------------------------------------分割线---------------------------------------------------------------------------
如图所示:
----------------------------------------分割线----------------------------------------------------------------------------
首先在布局中内容布局里加入ToolBar布局:
<!--内容部分的布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="我是内容部分" />
</LinearLayout>
然后将actionbar替换成toolbar:
setSupportActionBar(toolbar);
接着调用ActionBarDrawerToggle将drawerlayout和toolbar绑定在一起,并调出隐藏的按钮图标:
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar,
R.string.drawer_open, R.string.drawer_close);
在这里会有一个小坑,就是R.string.drawer_open,不知道该怎么设置,翻阅源码才明白,仅仅是个字符串,为了作为标记而存在,在strings文件里加入如下代码如下:
<resources>
<string name="drawer_open">open</string>
<string name="drawer_close">close</string>
</resources>
添加动画效果:
drawerLayout.setDrawerListener(drawerToggle);
最后同步一下:
drawerToggle.syncState();
大功告成!
----------------------------------------分割线----------------------------------------------------------------------------
在这里自己给自己提出个疑问,抽屉能不能别把toolBar盖住?实现下面的效果?
实现方式就是把最外层用LinearLayout,设置成Vertical,次层两个布局一个是ToolBar布局,另一个是DrawerLayout,然后在Drawerlayout里面再设置内容和侧滑栏的布局,下面给出详细代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:context="com.fly.dl01.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容部分的布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="我是内容部分" />
</LinearLayout>
<!--侧滑栏左边的布局-->
<LinearLayout
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#0f0"
android:orientation="vertical"
android:paddingTop="50dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff0"
android:text="item3" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout></LinearLayout>
ok,两种显示效果都已经贴出来了,萝卜青菜各有所爱!
----------------------------------------彩蛋----------------------------------------------------------------------------
其实我们也可以监听drawerLayout的状态,废话少说贴出代码:
//设置监听
drawerLayout.setDrawerListener(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) {
//状态发生改变
}
});
下一节讲针对此监听对DrawerLayout进一步了解。