Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
在以前，做策划导航的时候，最常用的组件便是SlidingMenu了，当初第一次用它的时候觉得那个惊艳啊，体验可以说是非常棒。 后来，Android自己推出了一个可以实现策划导航的组件DrawerLayout，也相当的不错，更加简洁，好使。当前，很多的APP都会采用侧滑导航的设计，不仅体验上很好，而且这种为APP节省了很多“空间”的交互，给人的感觉更加舒服。
Android已经越来越追求用户体验，在APP功能越来越成熟稳定的情境下，把用户体验做到极致，是开发者应有的追求！
除了DrawerLayout的设计外，Android还推出了Toolbar，用于取代传统的ActionBar，这是一种符合Material Design设计规范的组件，越来越被更多的开发者接受，并应于自己的项目中，如最新的“知乎”客户端，就采用该种设计，体验的感觉非常好。
关于DrawerLayout和Toolbar分别是如何使用，原理又是什么，我不在此处过多介绍，不会的或者有兴趣的人可以参考几篇不错的博文：
1. ANDROID – TOOLBAR STEP BY STEP
2. android官方侧滑菜单DrawerLayout详解
我要介绍的，是如何使用Toolbar和DrawerLayout快速侧滑导航，先看下接下来要实现的效果：
1. 首先，新建项目，并在buile.gradle中添加appcompat-v7支持。
dependencies {
compile 'com.android.support:appcompat-v7:23.1.1'
}
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>3. 创建DrawerLayout侧滑页面layout_custom_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--主布局-->
<RelativeLayout
android:layout_width="match_parent"
android:background="#00c7c0"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主页面"
android:textSize="40sp"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<!--侧滑菜单-->
<LinearLayout
android:id="@+id/drawerContent"
android:layout_width="200dp"
android:layout_height="match_parent"
android:background="#F5F5F5"
android:orientation="vertical"
android:layout_gravity="start">
<TextView
android:id="@+id/text1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="我的收藏"
android:gravity="center"
android:textSize="16sp"
/>
<TextView
android:id="@+id/text2"
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:layout_height="50dp"
android:text="我的关注"
android:gravity="center"
android:textSize="16sp"
/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>4. 在主页面中，引用上面的ToolBar布局及DrawerLayout布局activity_main.xml
<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=".MainActivity">
<!--Toolbar-->
<include layout="@layout/layout_tool_bar" />
<!--DrawerLayout-->
<include layout="@layout/layout_custom_drawer" />
</LinearLayout>
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Toolbar toolbar;
private DrawerLayout drawerLayout;
private LinearLayout drawerContent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
drawerContent = (LinearLayout) findViewById(R.id.drawerContent);
// 设置Toolbar
toolbar.setTitle("掌阅宝");
toolbar.setTitleTextColor(Color.parseColor("#ffffff"));
// 设置toolbar支持actionbar
setSupportActionBar(toolbar);
// 使用ActionBarDrawerToggle，配合DrawerLayout和ActionBar,以实现推荐的抽屉功能。
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close);
mDrawerToggle.syncState();
drawerLayout.setDrawerListener(mDrawerToggle);
TextView text1 = (TextView) findViewById(R.id.text1);
TextView text2 = (TextView) findViewById(R.id.text2);
text1.setOnClickListener(this);
text2.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// 关闭DrawerLayout
drawerLayout.closeDrawer(drawerContent);
switch (v.getId()) {
case R.id.text1:
Toast.makeText(MainActivity.this, "我的收藏", Toast.LENGTH_SHORT).show();
break;
case R.id.text2:
Toast.makeText(MainActivity.this, "我的关注", Toast.LENGTH_SHORT).show();
break;
}
}
}
6. 配置系统的theme
<resources>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<!--返回键样式-->
<item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<!-- 使用 API Level 22编译的話，要拿掉前綴字 -->
<item name="windowNoTitle">true</item>
</style>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
<item name="color">@android:color/white</item>
</style>
</resources>通过以上六步，你就可以使用Toolbar+DrawerLayout来快速实现类似“知乎APP”侧滑导航效果了。
源码下载地址：https://github.com/zuiwuyuan/DrawerLayout_ToolBar
如此这般，就OK啦！欢迎互相学习！
如有疑问，欢迎留言探讨。
如此这般，就OK啦！欢迎互相学习！
如有疑问，欢迎留言探讨。
如有疑问，欢迎留言探讨。
