最近心血來潮想用Android官方提供的DrawerLayout結(jié)合ToolBar實現(xiàn)抽屜式效果（側(cè)滑）疟位，翻看一些博客都比較雜亂（可能有些好的文章我沒有搜到）畸裳，寫篇文章整理記錄一下啄骇。

為更好的貼代碼（展示的更直觀）很多東西都寫一塊去了昼窗，命名也是簡單粗暴（我這暴脾氣）西乖，封裝之類的之后可以自己東東手指頭。啦啦啦啦啦啦啦啦啦啦啦啦啦键俱！

簡單流程

• 在Manifest.xml文件中設(shè)置Activity樣式。
• 寫布局世分，布局中包含了ToolBar與DrawerLayout编振。
• 好了，其實沒有多少步驟罚攀，具體往下深入看看党觅。

二雌澄、Manifest.xml中Activity的樣式

為什么要搞樣式：

Android3.0(API level 11)之后，所有使用默認主題的activity都自帶一個ActionBar杯瞻，樣式要做的事情就是把它隱藏镐牺，然后在布局中使用我們自己想要的ToolBar。（既然你打算是使用ToolBar了魁莉，在這里相信也不會問什么是ToolBar睬涧、ActionBar！^_^）

1旗唁、新建一個Activity命名為DrawerLayoutToolBarAct畦浓，并在Manifest.xml下進行配置，其中android:theme是我即將要自定義的樣式检疫，如下：

<activityandroid:name=".drawerlayouttoolbar.DrawerLayoutToolBarAct"
android:theme="@style/toolTheme"/>

2. parent="Theme.AppCompat.Light.NoActionBar"看意思就知道繼承一個沒有ActionBar的父類（不嚴謹?shù)恼f法讶请，簡單粗暴嘛）。

3. 樣式@style/toolTheme定義在res\values\styles.xml文件里面屎媳，下圖中android:colorPrimaryDark是設(shè)置頂部狀態(tài)欄顏色的夺溢；

4. ↓↓↓↓重點 圈起來會考↓↓↓↓
   注意：android:colorPrimary它是設(shè)置ActionBar顏色的，在這里我們使用的是ToolBar用這個并沒有什么ruan(還是luan)用(咳咳 文明用語)烛谊。所以這個可以不要风响，那應(yīng)該怎樣做才能改變ToolBar的顏色呢？答案是在寫ToolBar布局的時候直接設(shè)置android:background屬性就行了丹禀。

<style name="toolTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:colorPrimary">#2e8abb</item>
        <item name="android:colorPrimaryDark">#fff000</item>
</style>

image1.png

三状勤、布局大法好

↓↓↓↓插個嘴↓↓↓↓

ToolBar是Android 5.0推出的一個新的導(dǎo)航控件用于取代之前的ActionBar，考慮到仍有一部分用戶的手機版本號低于5.0双泪，所以持搜，ToolBar也放進了support v7包內(nèi)，使得低版本的系統(tǒng)也能使用上ToolBar攒读。所以Demo中所用的DrawerLayout與ToolBar都是v7包下面的朵诫。

1. 前提先引入所需要的包，在AndroidStudio的Gradle中直接引入：

compile 'com.android.support:appcompat-v7:24.1.0'

2. 創(chuàng)建布局文件activty_drawertool.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/dl_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--由于activity的Theme中的colorPrimary設(shè)置ActionBar的顏色薄扁，并不能設(shè)置ToolBar的顏色
        所以這里手動設(shè)置background-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#2e8abb"
            android:minHeight="60dp">

            <TextView
                android:id="@+id/tv_temp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="自定義"/>
        </android.support.v7.widget.Toolbar>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="主界面"/>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="@android:color/holo_green_dark">

        <ListView
            android:id="@+id/lv_data"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:cacheColorHint="@android:color/transparent"/>
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

好了 簡單的創(chuàng)建了一個布局剪返，根布局就是今天我們的主角DrawerLayout（也可以不用在跟布局這里，我只是簡單粗暴）邓梅。

↓↓↓↓重點又來了 往下看↓↓↓↓

1. DrawerLayout最好為界面的根布局脱盲，官方文檔大概的意思，否則可能會出現(xiàn)觸摸事件被屏蔽的問題日缨；
2. 主內(nèi)容區(qū)的布局代碼要放在側(cè)滑菜單布局（你想展示在側(cè)滑的部分）的前面, 因為 XML 順序意味著按層疊順序排序钱反，并且抽屜式導(dǎo)航欄必須位于內(nèi)容頂部(我這里沒有放在頂部，想放在頂部可將根布局設(shè)置為LinearLayout，并將上面的示例代碼中的ToolBar布局與DrawerLayout布局分離即可Ｃ娓纭哎壳！由于我沒有把ToolBar放在DrawerLayout頂部所以側(cè)滑的時候會把ToolBar給遮住)；
3. 側(cè)滑菜單部分的布局（示例中用的是ListView）必須設(shè)置layout_gravity屬性尚卫，他表示側(cè)滑菜單是在左邊還是右邊归榕，而且如果不設(shè)置在打開關(guān)閉抽屜的時候會報錯，設(shè)置了android:layout_gravity="start/left"的視圖才會被認為是側(cè)滑菜單吱涉。

四刹泄、無bug不代碼

以下就是新建的DrawerLayoutToolBarAct，繼承于AppCompatActivity怎爵，不繼承Activity說一下：直接繼承Activity特石，它的很多功能都不能向低版本兼容（只是其中一個原因，還是那句話 ↓簡單粗暴↓ 重點圈起來要考）鳖链。

/**
 * Created by Leogh on 2017/8/23.
 */

public class DrawerLayoutToolBarAct extends AppCompatActivity {

    private Toolbar toolbar;
    private DrawerLayout drawerlayout;
    private ListView lv_data;
    private String[] lvs = {"List Item 01", "List Item 02", "List Item 03", "List Item 04"};
    private ArrayAdapter arrayAdapter;
    private ActionBarDrawerToggle drawerToggle;

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

    private void initView() {
        drawerlayout = (DrawerLayout) findViewById(R.id.dl_left);
        lv_data = (ListView) findViewById(R.id.lv_data);
        toolbar = (Toolbar) findViewById(R.id.toolbar);

        //標題+顏色
        toolbar.setTitle("Title");
        toolbar.setTitleTextColor(Color.YELLOW);
        //子標題+顏色
        toolbar.setSubtitle("subTitle");
        toolbar.setSubtitleTextColor(Color.GREEN);

        drawerToggle = new ActionBarDrawerToggle(this, drawerlayout, toolbar, R.string.app_name, R.string.app_name) {
            @Override
            public void onDrawerOpened(View drawerView) {//完全打開時觸發(fā)
                super.onDrawerOpened(drawerView);
                Toast.makeText(DrawerLayoutToolBarAct.this,"onDrawerOpened",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onDrawerClosed(View drawerView) {//完全關(guān)閉時觸發(fā)
                super.onDrawerClosed(drawerView);
                Toast.makeText(DrawerLayoutToolBarAct.this,"onDrawerClosed",Toast.LENGTH_SHORT).show();
            }

        /** 
         * 當抽屜被滑動的時候調(diào)用此方法 
         * slideOffset表示 滑動的幅度（0-1） 
         */  
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {
                super.onDrawerSlide(drawerView, slideOffset);
            }

        /** 
         * 當抽屜滑動狀態(tài)改變的時候被調(diào)用 
         * 狀態(tài)值是STATE_IDLE（閑置--0）, STATE_DRAGGING（拖拽的--1）, STATE_SETTLING（固定--2）中之一姆蘸。 
         *具體狀態(tài)可以慢慢調(diào)試
         */  
            @Override
            public void onDrawerStateChanged(int newState) {
                super.onDrawerStateChanged(newState);
            }
        };
        //通過下面這句實現(xiàn)toolbar和Drawer的聯(lián)動：如果沒有這行代碼，箭頭是不會隨著側(cè)滑菜單的開關(guān)而變換的（或者沒有箭頭）芙委，
        // 可以嘗試一下乞旦，不影響正常側(cè)滑
        drawerToggle.syncState();

        drawerlayout.setDrawerListener(drawerToggle);

        //去掉側(cè)滑的默認圖標（動畫箭頭圖標），也可以選擇不去题山，
        //不去的話把這一行注釋掉或者改成true，然后把toolbar.setNavigationIcon注釋掉就行了
        drawerToggle.setDrawerIndicatorEnabled(false);

        //可在toolbar上設(shè)置圖標來作為側(cè)滑的默認圖標
        toolbar.setNavigationIcon(R.mipmap.ic_launcher);

        setSupportActionBar(toolbar);

        //toolbar設(shè)置的圖標控制drawerlayout的側(cè)滑
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (drawerlayout.isDrawerOpen(GravityCompat.START)){
                    drawerlayout.closeDrawer(GravityCompat.START);
                } else {
                    drawerlayout.openDrawer(GravityCompat.START);
                }
            }
        });

        //側(cè)滑區(qū)域的列表
        arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvs);
        lv_data.setAdapter(arrayAdapter);

        toolbar.findViewById(R.id.tv_temp).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(DrawerLayoutToolBarAct.this, "自定義", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

以上代碼片段里面一大堆注釋故痊，應(yīng)該很直觀了顶瞳，就是亂亂的，用的時候整理一下就OK了愕秫。

效果圖

側(cè)滑打開.png

側(cè)滑關(guān)閉.png