使用Toolbar + DrawerLayout快速實現高大上菜單側滑

若是你有在關注一些遵循最新的Material Design設計規範的應用的話（若是沒有，假設你有！），也許會發現有不少使用了看起來很舒服、很高大上的側滑菜單動畫效果，示例以下（via 參考2）：

今天就來使用官方支持庫來快速實現這類效果，須要使用到Toolbar和DrawerLayout，詳細步驟以下：（若是你還不知道這兩個Widget，先本身Google吧~）

 

1.首先須要添加appcompat-v7支持

若是是在Android Studio 1.0 RC4上建立的項目，默認已經添加了appcompat-v7支持了，若是不是最新版AS則須要在build.gradle中添加以下代碼：

1. dependencies {
2.     ...//其餘代碼
3.     compile 'com.android.support:appcompat-v7:21.0.2'
4. }

添加完成後須要同步一下gradle

2.添加Toolbar

因爲Toolbar是繼承自View，因此能夠像其餘標準控件同樣直接主佈局文件添加Toolbar，可是爲了提升Toolbar的重用效率，能夠在layout建立一個custom_toolbar.xml代碼以下：

1. <?xml version="1.0" encoding="utf-8"?>
2.     <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
3.         xmlns:app="http://schemas.android.com/apk/res-auto"
4.         android:id="@+id/tl_custom"
5.         android:layout_width="match_parent"
6.         android:layout_height="wrap_content"
7.         android:background="?attr/colorPrimary"
8.         android:minHeight="?attr/actionBarSize"
9.         android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
10.         app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
11. </android.support.v7.widget.Toolbar>

說明：

• android.support.v7.widget.Toolbar - 固然若是隻在Lollipop中能夠直接使用Toolbar而不須要加上v7支持

• xmlns:app - 自定義xml命名控件，在AS中能夠直接指定res-auto而不須要使用完整包名

• android:background 和 android:minHeight 都可以在styles.xml中聲明

2.添加DrawerLayout

和Toolbar相似，爲了提升代碼重用效率，能夠在layout中建立一個custom_drawerlayout.xml代碼以下:

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/dl_left"
4.         android:layout_width="match_parent"
5.         android:layout_height="match_parent">
6.     <!--主佈局-->
7.     <LinearLayout
8.         android:layout_width="match_parent"
9.         android:layout_height="match_parent">
10.         <ImageView
11.             android:id="@+id/iv_main"
12.             android:layout_width="100dp"
13.             android:layout_height="100dp" />
14.     </LinearLayout>
15.     <!--側滑菜單-->
16.     <LinearLayout
17.         android:layout_width="match_parent"
18.         android:layout_height="match_parent"
19.         android:background="#fff"
20.         android:layout_gravity="start">
21.         <ListView
22.             android:id="@+id/lv_left_menu"
23.             android:layout_width="match_parent"
24.             android:layout_height="match_parent"
25.             android:divider="@null"
26.             android:text="DrawerLayout" />
27.     </LinearLayout>
28. </android.support.v4.widget.DrawerLayout>

Drawerlayout標籤中有兩個子節點，一個是左邊菜單，一個是主佈局，另外須要在左邊菜單起始位置設置爲android:layout_gravity="start"

3.實現activity_main.xml

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/custom_toolbar" />
9.         <!--DrawerLayout-->
10.         <include layout="@layout/custom_drawerlayout" />
11. </LinearLayout>

直接使用include標籤，簡潔明瞭

4.完善Java代碼

1. public class MainActivity extends ActionBarActivity {
2.     //聲明相關變量
3.     private Toolbar toolbar;
4.     private DrawerLayout mDrawerLayout;
5.     private ActionBarDrawerToggle mDrawerToggle;
6.     private ListView lvLeftMenu;
7.     private String[] lvs = {"List Item 01", "List Item 02", "List Item 03", "List Item 04"};
8.     private ArrayAdapter arrayAdapter;
9.     private ImageView ivRunningMan;
10.     private AnimationDrawable mAnimationDrawable;
11.     @Override
12.     protected void onCreate(Bundle savedInstanceState) {
13.         super.onCreate(savedInstanceState);
14.         setContentView(R.layout.activity_main);
15.         findViews(); //獲取控件
16.         //京東RunningMan動畫效果，和本次Toolbar無關
17.         mAnimationDrawable = (AnimationDrawable) ivRunningMan.getBackground();
18.         mAnimationDrawable.start();
19.         toolbar.setTitle("Toolbar");//設置Toolbar標題
20.         toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //設置標題顏色
21.         setSupportActionBar(toolbar);
22.         getSupportActionBar().setHomeButtonEnabled(true); //設置返回鍵可用
23.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);
24.         //建立返回鍵，並實現打開關/閉監聽
25.         mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {
26.             @Override
27.             public void onDrawerOpened(View drawerView) {
28.                 super.onDrawerOpened(drawerView);
29.                 mAnimationDrawable.stop();
30.             }
31.             @Override
32.             public void onDrawerClosed(View drawerView) {
33.                 super.onDrawerClosed(drawerView);
34.                 mAnimationDrawable.start();
35.             }
36.         };
37.         mDrawerToggle.syncState();
38.         mDrawerLayout.setDrawerListener(mDrawerToggle);
39.         //設置菜單列表
40.         arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvs);
41.         lvLeftMenu.setAdapter(arrayAdapter);
42.     }
43.     private void findViews() {
44.         ivRunningMan = (ImageView) findViewById(R.id.iv_main);
45.         toolbar = (Toolbar) findViewById(R.id.tl_custom);
46.         mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
47.         lvLeftMenu = (ListView) findViewById(R.id.lv_left_menu);
48.     }
49. }

5.固然比較重要還有styles.xml和colors.xml，具體以下

1. <resources>
2.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
3.         <!--狀態欄顏色-->
4.         <item name="colorPrimaryDark">@color/Indigo_colorPrimaryDark</item>
5.         <!--Toolbar顏色-->
6.         <item name="colorPrimary">@color/Indigo_colorPrimary</item>
7.         <!--返回鍵樣式-->
8.         <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
9.         </style>
10.         <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
11.         <item name="color">@android:color/white</item>
12.     </style>
13. </resources>
14. <?xml version="1.0" encoding="utf-8"?>
15. <resources>
16.     <color name="Indigo_colorPrimaryDark">#303f9f</color>
17.     <color name="Indigo_colorPrimary">#3f51b5</color>
18.     <color name="Indigo_nav_color">#4675FF</color>
19. </resources>

到此就實現了高大上菜單側滑，最終效果以下（注：在Yosemite上貌似直接Record手機屏幕貌似不起做用，並且動畫因爲幀率緣由沒法實時，就先這樣看吧~）

參考列表

• Toolbar Reference

• LDrawer

• android-material-drawer-template

• 《How to set Toolbar text and back arrow color》

• 《How to implement DrawerArrowToggle from Android appcompat v7 21 library》