ToolBar+DrawerLayout使用

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

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

簡單流程

  • 在Manifest.xml文件中設置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"/>

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

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

  3. ↓↓↓↓重點 圈起來會考↓↓↓↓
    注意：android:colorPrimary它是設置ActionBar顏色的，在這里我們使用的是ToolBar用這個并沒有什么ruan(還是luan)用(咳咳 文明用語)。所以這個可以不要，那應該怎樣做才能改變ToolBar的顏色呢？答案是在寫ToolBar布局的時候直接設置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推出的一個新的導航控件用于取代之前的ActionBar，考慮到仍有一部分用戶的手機版本號低于5.0，所以，ToolBar也放進了support v7包內，使得低版本的系統(tǒng)也能使用上ToolBar。所以Demo中所用的DrawerLayout與ToolBar都是v7包下面的。

  1. 前提先引入所需要的包，在AndroidStudio的Gradle中直接引入：
compile 'com.android.support:appcompat-v7:24.1.0'
  1. 創(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設置ActionBar的顏色，并不能設置ToolBar的顏色
        所以這里手動設置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. 主內容區(qū)的布局代碼要放在側滑菜單布局（你想展示在側滑的部分）的前面, 因為 XML 順序意味著按層疊順序排序，并且抽屜式導航欄必須位于內容頂部(我這里沒有放在頂部，想放在頂部可將根布局設置為LinearLayout，并將上面的示例代碼中的ToolBar布局與DrawerLayout布局分離即可！！由于我沒有把ToolBar放在DrawerLayout頂部所以側滑的時候會把ToolBar給遮住)；
  3. 側滑菜單部分的布局（示例中用的是ListView）必須設置layout_gravity屬性，他表示側滑菜單是在左邊還是右邊，而且如果不設置在打開關閉抽屜的時候會報錯，設置了android:layout_gravity="start/left"的視圖才會被認為是側滑菜單。

四、無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) {//完全關閉時觸發(fā)
                super.onDrawerClosed(drawerView);
                Toast.makeText(DrawerLayoutToolBarAct.this,"onDrawerClosed",Toast.LENGTH_SHORT).show();
            }

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

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

        drawerlayout.setDrawerListener(drawerToggle);

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

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

        setSupportActionBar(toolbar);

        //toolbar設置的圖標控制drawerlayout的側滑
        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);
                }
            }
        });

        //側滑區(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();
            }
        });
    }
}

以上代碼片段里面一大堆注釋，應該很直觀了，就是亂亂的，用的時候整理一下就OK了。

效果圖

側滑打開.png

側滑關閉.png

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,725評論 25贊 709
  • ￥開啟￥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程，因...
    小菜c閱讀 7,294評論 0贊 17
  • afinalAfinal是一個android的ioc，orm框架 https://github.com/yangf...
    passiontim閱讀 15,835評論 2贊 45
  • 有人說，十年太長，什么都有可能變。一輩子太短，一件事也有可能做不完。就像我愛你，我想愛你十年，但我有害怕因為什么事...
    凱凱g閱讀 393評論 0贊 0
  • 在這個快速變化的時代，每個人都提倡讀書，但是實際能做到堅持閱讀的人少之又少。一問起來，大家提供的理由都差不多，無非...
    鳶青閱讀 476評論 2贊 2

友情鏈接更多精彩內容