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支持。

 

[plain] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. dependencies {  
  2.     compile 'com.android.support:appcompat-v7:23.1.1'  
  3. }  

 

 

2. 创建ToolBar标题栏布局layout_tool_bar.xml

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/toolbar"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="wrap_content"  
  6.     android:background="?attr/colorPrimary"  
  7.     android:minHeight="?attr/actionBarSize">  
  8.   
  9. </android.support.v7.widget.Toolbar>  


3. 创建DrawerLayout侧滑页面layout_custom_drawer.xml

 

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/drawerLayout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.     <!--主布局-->  
  7.     <RelativeLayout  
  8.         android:layout_width="match_parent"  
  9.         android:background="#00c7c0"  
  10.         android:layout_height="match_parent">  
  11.         <TextView  
  12.             android:layout_width="wrap_content"  
  13.             android:layout_height="wrap_content"  
  14.             android:text="主页面"  
  15.             android:textSize="40sp"  
  16.             android:layout_centerInParent="true"  
  17.             />  
  18.     </RelativeLayout>  
  19.     <!--侧滑菜单-->  
  20.     <LinearLayout  
  21.         android:id="@+id/drawerContent"  
  22.         android:layout_width="200dp"  
  23.         android:layout_height="match_parent"  
  24.         android:background="#F5F5F5"  
  25.         android:orientation="vertical"  
  26.         android:layout_gravity="start">  
  27.   
  28.         <TextView  
  29.             android:id="@+id/text1"  
  30.             android:layout_width="match_parent"  
  31.             android:layout_height="50dp"  
  32.             android:text="我的收藏"  
  33.             android:gravity="center"  
  34.             android:textSize="16sp"  
  35.             />  
  36.   
  37.         <TextView  
  38.             android:id="@+id/text2"  
  39.             android:layout_width="match_parent"  
  40.             android:layout_marginTop="20dp"  
  41.             android:layout_height="50dp"  
  42.             android:text="我的关注"  
  43.             android:gravity="center"  
  44.             android:textSize="16sp"  
  45.             />  
  46.   
  47.     </LinearLayout>  
  48.   
  49. </android.support.v4.widget.DrawerLayout>  


4. 在主页面中，引用上面的ToolBar布局及DrawerLayout布局activity_main.xml

 

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     tools:context=".MainActivity">  
  7.     <!--Toolbar-->  
  8.     <include layout="@layout/layout_tool_bar" />  
  9.     <!--DrawerLayout-->  
  10.     <include layout="@layout/layout_custom_drawer" />  
  11. </LinearLayout>  

 

 

5. 编写Activity代码，控制ToolBar及DrawerLayout相应的逻辑

 

[java] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. public class MainActivity extends AppCompatActivity implements View.OnClickListener {  
  2.   
  3.     private Toolbar toolbar;  
  4.   
  5.     private DrawerLayout drawerLayout;  
  6.   
  7.     private LinearLayout drawerContent;  
  8.   
  9.     @Override  
  10.     protected void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.activity_main);  
  13.   
  14.         toolbar = (Toolbar) findViewById(R.id.toolbar);  
  15.         drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);  
  16.         drawerContent = (LinearLayout) findViewById(R.id.drawerContent);  
  17.         // 设置Toolbar  
  18.         toolbar.setTitle("掌阅宝");  
  19.         toolbar.setTitleTextColor(Color.parseColor("#ffffff"));  
  20.   
  21.         // 设置toolbar支持actionbar  
  22.         setSupportActionBar(toolbar);  
  23.   
  24.         // 使用ActionBarDrawerToggle，配合DrawerLayout和ActionBar,以实现推荐的抽屉功能。  
  25.         ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close);  
  26.         mDrawerToggle.syncState();  
  27.         drawerLayout.setDrawerListener(mDrawerToggle);  
  28.   
  29.   
  30.         TextView text1 = (TextView) findViewById(R.id.text1);  
  31.         TextView text2 = (TextView) findViewById(R.id.text2);  
  32.   
  33.         text1.setOnClickListener(this);  
  34.         text2.setOnClickListener(this);  
  35.     }  
  36.   
  37.     @Override  
  38.     public void onClick(View v) {  
  39.         // 关闭DrawerLayout  
  40.         drawerLayout.closeDrawer(drawerContent);  
  41.         switch (v.getId()) {  
  42.   
  43.             case R.id.text1:  
  44.   
  45.                 Toast.makeText(MainActivity.this, "我的收藏", Toast.LENGTH_SHORT).show();  
  46.                 break;  
  47.             case R.id.text2:  
  48.                 Toast.makeText(MainActivity.this, "我的关注", Toast.LENGTH_SHORT).show();  
  49.                 break;  
  50.         }  
  51.     }  
  52. }  

 

 

代码中注释已经够简单明了，关于ActionBarDrawerToggle是什么，可参考《ActionBarDrawerToggle的简要介绍》。

 

6. 配置系统的theme

 

[html] view plain copy
 
 print?在CODE上查看代码片派生到我的代码片
  1. <resources>  
  2.   
  3.     <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">  
  4.   
  5.         <!-- Customize your theme here. -->  
  6.         <item name="colorPrimary">@color/colorPrimary</item>  
  7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  8.         <item name="colorAccent">@color/colorAccent</item>  
  9.   
  10.         <!--返回键样式-->  
  11.         <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>  
  12.   
  13.         <item name="windowActionBar">false</item>  
  14.         <item name="android:windowNoTitle">true</item>  
  15.         <!-- 使用 API Level 22编译的話，要拿掉前綴字 -->  
  16.         <item name="windowNoTitle">true</item>  
  17.     </style>  
  18.   
  19.     <!-- Base application theme. -->  
  20.     <style name="AppTheme" parent="AppTheme.Base"></style>  
  21.   
  22.     <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">  
  23.         <item name="color">@android:color/white</item>  
  24.     </style>  
  25.   
  26. </resources>  


通过以上六步，你就可以使用Toolbar+DrawerLayout来快速实现类似“知乎APP”侧滑导航效果了。

 

 

源码下载地址：https://github.com/zuiwuyuan/DrawerLayout_ToolBar

posted @ 2017-04-25 10:52  天涯海角路  阅读(272)  评论(0)    收藏  举报