DrawerLayout+ToolBar官方API實現仿網易V4.4.4導航抽屜

網易V4.4.4 的導航抽屜長啥樣，我想在此無需多說，沒見過的自己去體驗吧。
當時吸引我的是左邊滑動，箭頭圖標變菜單圖標動畫，這個非常不錯。殊不知，Android5.0以上官方提供的API便可輕鬆實現。5.0以下，需要添加android-support-v7-appcompat包支持。這個在SDk V7目錄下。

直接先看看實現運行效果圖吧：（有網易效果了吧）

下面談談實現要點：

1. 先利用DrawerLayout創建導航抽屜，這個可以參考我上一篇博文：DrawerLayout 官方創建導航抽屜示例。

2. 在我上一篇博文利用DrawerLayout創建導航抽屜的基礎上，稍加修改便可實現。（不清楚的，可先上篇創建看看）

下面談談在利用DrawerLayout創建導航抽屜的基礎上，具體修改如下:

1. ActionBar改用ToolBar

1.1、在原來基礎上，修改activity_main.xml，增加Toolbar這個控件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- 增加Toolbar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/PopupMenuStyle" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- The main content view -->

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <!-- The navigation drawer -->

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#ffffff"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:scrollbars="none" />

        <TextView
            android:id="@+id/right_drawer"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="#ffffff"
            android:gravity="center"
            android:textColor="#444444"
            android:text="@string/right_drawer_info"
            android:textSize="30sp" >
        </TextView>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

1.2、添加主題風格

先在values/styles.xml添加：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>
    <!-- 主要是這個基礎風格 -->
    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <!-- Actionbar color -->
        <item name="colorPrimary">#0077d9</item>
        <!-- Status bar color -->
        <item name="colorPrimaryDark">#5577d9</item>
        <!-- Window color -->
        <item name="android:windowBackground">@color/dim_foreground_material_light</item>
    </style>

    <style name="PopupMenuStyle" parent="Theme.AppCompat.Light"></style>

</resources>

上面創建一個基礎風格，爲了方便，以後要添加專屬於values-v21的屬性的話，可以在繼承這個基礎風格上，添加。

再在values-v21/styles.xml添加：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppTheme" parent="AppTheme.Base">

        <!-- Navigation bar color -->
        <item name="android:navigationBarColor">@color/accent_material_light</item>
    </style>

</resources>

上面這個，主要是可以添加一些5.0可以顯示的效果。

1.3、在MainActivity.java，初始化Toolbar：

public class MainActivity extends ActionBarActivity {
    ……

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

2. v4.app.ActionBarDrawerToggle改用v7.app.ActionBarDrawerToggle

2.1、換用v7.app.ActionBarDrawerToggle，實例化ActionBarDrawerToggle，傳入Toolbar

public class MainActivity extends ActionBarActivity {
    ……

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ……
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,
                R.string.drawer_open, R.string.drawer_close) {
            public void onDrawerClosed(View drawerView) {
                if (drawerView == mDrawerList) {
                    isDirection_left = false;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = false;
                }
                getSupportActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {

                if (drawerView == mDrawerList) {
                    isDirection_left = true;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = true;
                }
                getSupportActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

        };

2.2、將原來的getActionBar()的地方全部換成getSupportActionBar()，比如：

public class MainActivity extends ActionBarActivity {
        ……
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);

        // ActionBarDrawerToggle ties together the the proper interactions
        // between the sliding drawer and the action bar app icon

完成到這裏，左邊的抽屜便可以實現類似網易V4.4.4的滑動效果了

下面主要是實現overflow menu，也就是右邊菜單的效果，及增加右邊抽屜。

3、ToolBar上面的overflow menu 實現圖標+文字

3.1、修改menu/main.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" >

    <!-- 這是Toolbar上的搜索Button -->
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_action_search"
        android:title="@string/action_search"
        app:showAsAction="ifRoom"/>

    <!-- 這是Toolbar上的個人信息Button -->
    <item
        android:id="@+id/action_person"
        android:icon="@drawable/ic_action_person"
        android:title="@string/action_persion"
        app:showAsAction="ifRoom"/>

      <!-- 這是Toolbar上的overflow  menu -->
    <item
        android:id="@+id/action_overflow"
        android:icon="@drawable/ic_action_overflow"
        android:title="@string/action_search"
        app:showAsAction="ifRoom">
        <menu>
            <item
                android:id="@+id/action_about"
                android:icon="@drawable/ic_action_about"
                android:showAsAction="always|withText"
                android:title="@string/action_about"/>
            <item
                android:id="@+id/action_settings"
                android:icon="@drawable/ic_action_settings"
                android:showAsAction="always|withText"
                android:title="@string/action_settings"/>
        </menu>
    </item>

</menu>

上面overflow menu部分，是爲了實現icon+文字的效果，如果只需要顯示文字，那直接去掉外面嵌套的自定義的action_overflow即可。

4、實現左右滑動抽屜

4.1、修改layout/activity_main.xml,增加作爲右邊抽屜顯示的View，下面是直接簡單用textview作爲顯示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    ……     
    <!-- 增加右邊抽屜顯示 -->
        <TextView
            android:id="@+id/right_drawer"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="#ffffff"
            android:gravity="center"
            android:textColor="#444444"
            android:text="@string/right_drawer_info"
            android:textSize="30sp" >
        </TextView>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

4.2、處理好Toolbar上點擊左邊按鍵，個人信息按鍵，用以控制顯示左右抽屜：

在監聽抽屜打開或者關閉回調部分，記錄好左邊還是右邊打開的標誌位：

// ActionBarDrawerToggle ties together the the proper interactions
        // between the sliding drawer and the action bar app icon
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,
                R.string.drawer_open, R.string.drawer_close) {
            public void onDrawerClosed(View drawerView) {
                if (drawerView == mDrawerList) {
                    isDirection_left = false;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = false;
                }
                getSupportActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {

                if (drawerView == mDrawerList) {
                    isDirection_left = true;
                } else if (drawerView == mPersonLayout) {
                    isDirection_right = true;
                }
                getSupportActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to
                                            // onPrepareOptionsMenu()
            }

        };

設置好Toolbar監聽，監聽左邊Button點擊事件，以便處理相關抽屜打開或關閉：

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // catch here title and home icon click
                if (isDirection_right) {
                    mDrawerLayout.closeDrawer(mPersonLayout);
                } else {
                    if (!isDirection_left) {
                        mDrawerLayout.openDrawer(mDrawerList);
                    } else {
                        mDrawerLayout.closeDrawer(mDrawerList);
                    }
                }

            }
        });

在onOptionsItemSelected回調函數中，處理屬於個人信息Button點擊事件，也就是控制右邊抽屜的Button點擊事件，以便處理相關抽屜打開或關閉：

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // The action bar home/up action should open or close the drawer.
        // ActionBarDrawerToggle will take care of this.

        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action buttons
        switch (item.getItemId()) {

        ……
        case R.id.action_person:
            if (isDirection_left) {
                mDrawerLayout.closeDrawer(mDrawerList);
            } else {
                if (!isDirection_right) {
                    mDrawerLayout.openDrawer(mPersonLayout);
                } else {
                    mDrawerLayout.closeDrawer(mPersonLayout);
                }
            }
            break;
        default:
            break;
        }
        return super.onOptionsItemSelected(item);
    }

這樣便可以實現左右抽屜自然滑動切換了。

上面只要是一些具體修改細節，詳細Demo工程共享如下：http://download.csdn.net/detail/bighulk/8629899