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'
}

2. 建立ToolBar標題欄佈局layout_tool_bar.xml

<?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>

5. 編寫Activity代碼，控制 ToolBar及 DrawerLayout相應的邏輯

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;
        }
    }
}

代碼中註釋已經夠簡單明瞭，關於ActionBarDrawerToggle是什麼，可參考《 ActionBarDrawerToggle的簡要介紹》。

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啦！歡迎互相學習！
若有疑問，歡迎留言探討。