ToolBar+DrawerLayout使用

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

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

簡(jiǎn)單流程

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

二、Manifest.xml中Activity的樣式

為什么要搞樣式：

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

1、新建一個(gè)Activity命名為DrawerLayoutToolBarAct，并在Manifest.xml下進(jìn)行配置，其中android:theme是我即將要自定義的樣式，如下：

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

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

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

  3. ↓↓↓↓重點(diǎn) 圈起來會(huì)考↓↓↓↓
    注意：android:colorPrimary它是設(shè)置ActionBar顏色的，在這里我們使用的是ToolBar用這個(gè)并沒有什么ruan(還是luan)用(咳咳 文明用語)。所以這個(gè)可以不要，那應(yīng)該怎樣做才能改變ToolBar的顏色呢？答案是在寫ToolBar布局的時(shí)候直接設(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

三、布局大法好

↓↓↓↓插個(gè)嘴↓↓↓↓

ToolBar是Android 5.0推出的一個(gè)新的導(dǎo)航控件用于取代之前的ActionBar，考慮到仍有一部分用戶的手機(jī)版本號(hào)低于5.0，所以，ToolBar也放進(jìn)了support v7包內(nèi)，使得低版本的系統(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設(shè)置ActionBar的顏色，并不能設(shè)置ToolBar的顏色
        所以這里手動(dòng)設(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>

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

↓↓↓↓重點(diǎn)又來了 往下看↓↓↓↓

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

四、無bug不代碼

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

/**
 * 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);

        //標(biāo)題+顏色
        toolbar.setTitle("Title");
        toolbar.setTitleTextColor(Color.YELLOW);
        //子標(biāo)題+顏色
        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) {//完全打開時(shí)觸發(fā)
                super.onDrawerOpened(drawerView);
                Toast.makeText(DrawerLayoutToolBarAct.this,"onDrawerOpened",Toast.LENGTH_SHORT).show();
            }

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

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

        /** 
         * 當(dāng)抽屜滑動(dòng)狀態(tài)改變的時(shí)候被調(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);
            }
        };
        //通過下面這句實(shí)現(xiàn)toolbar和Drawer的聯(lián)動(dòng)：如果沒有這行代碼，箭頭是不會(huì)隨著側(cè)滑菜單的開關(guān)而變換的（或者沒有箭頭），
        // 可以嘗試一下，不影響正常側(cè)滑
        drawerToggle.syncState();

        drawerlayout.setDrawerListener(drawerToggle);

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

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

        setSupportActionBar(toolbar);

        //toolbar設(shè)置的圖標(biāo)控制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)該很直觀了，就是亂亂的，用的時(shí)候整理一下就OK了。

效果圖

側(cè)滑打開.png

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

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

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容