Toolbar+DrawerLayout+material-me
引言
本文记录用Toolbar,DrawerLayout,material-menu实现菜单侧滑效果。
本文将以我的上两篇博文为基础,算是对DrawerLayout和Toolbar学习的一个融合,本文中将会使用之前的代码,如果不会使用DrawerLayout和Toolbar,请移步:
DrawerLayout的简单使用
Toolbar
使用DrawerLayout + Toolbar
以上一篇DrawerLayout的简单使用为基础,添加Toolbar(参照Toolbar的简单使用),如果仅仅是合并后运行程序,只能通过手势打开导航抽屉,标题栏上只有标题。这里实现能够通过标题栏打开导航抽屉,修改MainActivity.java
如下:
...
// 在Toolbar做最左边加上导航按钮
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// 为导航按钮设置图片
getSupportActionBar().setHomeAsUpIndicator(R.mipmap.ic_launcher);
// 设置导航按钮可用
getSupportActionBar().setHomeButtonEnabled(true);
...
添加这两行代码后运行程序,能简单实现DrawerLayout和Toolbar,但是看看界面,发现相当的丑陋,于是需要做些优化。
修改布局activity_main.xml
从上图可以看到,当打开侧栏菜单时,会覆盖Toolbar
,因此需要调整下布局来解决这个问题,将activity_main.xml
修改为如下所示:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<!--Toolbar-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!--DrawerLayout-->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>>
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
通过将Toolbar
控件变成DrawerLayout
的兄弟,就解决了这一个问题。接下来要引入动画特效,就是当打开和关闭侧栏时左上角变换形状,而不是一个简单的图标,因此要引入material-menu
。
引入material-menu
material-menu
是一个开源的组件,这个组件是使用了Android5.0推出的Material Design
设计语言做出来的,另外该组件中使用了JackWharton
的NineOldAndroids
动画效果。可以点击下列链接访问它们的主页,material-menu、NineOldAndroids。
由于material-menu
使用了NineOldAndroids
,因此在引入之前我们应该先将NineOldAndroids
的jar
包下下来并导入项目里,到其主页就能下载到。
为material-menu添加依赖
dependencies {
compile 'com.balysv.materialmenu:material-menu:2.0.0'
}
监听导航抽屉的打开和关闭事件
上一步的程序运行时,细心的话会发现,点击标题栏的图标可以打开导航抽屉,但是打开时在点击却关闭不了,现在就来解决这个问题。监听导航抽屉的打开和关闭事件,需要调用DrawerLayout
的setDrawerListener()
,并且传入一个DrawerLayout.DrawerListener
监听器,这个借口提供了导航抽屉的回调函数如onDrawerOpened()
,onDrawerClosed()
。这里参考DrawerLayout的官方例子,使用ActionBarDrawerToggle
,由于它实现了DrawerLayout.DrawerListener
,因此可以覆盖它的回调函数。修改MainActivity.java
文件如下:
private ActionBarDrawerToggle mDrawerToggle;
...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
...
}
这就实现了通过Toolbar的导航按钮来控制导航抽屉的打开和关闭了。接下来实现导航抽屉的特效,这就要用到material-munu
。
引入material-menu
至于material-menu
的具体使用请参考material-menu
的主页,将其引入项目,如下所示:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close){
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
isDrawerOpened = false;
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
isDrawerOpened = true;
}
public void onDrawerStateChanged(int newState) {
if(newState == DrawerLayout.STATE_IDLE){
if (isDrawerOpened){
mMaterialMenuDrawable.setIconState(MaterialMenuDrawable.IconState.ARROW);
}else{
mMaterialMenuDrawable.setIconState(MaterialMenuDrawable.IconState.BURGER);
}
}
}
public void onDrawerSlide(View drawerView, float slideOffset) {
mMaterialMenuDrawable.setTransformationOffset(
MaterialMenuDrawable.AnimationState.BURGER_ARROW,
isDrawerOpened ? 2 - slideOffset : slideOffset);
}
};
...
}
到此结束。