MaterialDesign(二),DrawerLayout使用

什么是 DrawerLayout

DrawerLayout(抽屜式導(dǎo)航欄)是一個(gè)面板隙袁,它將應(yīng)用的主要導(dǎo)航選項(xiàng)顯示在屏幕左邊緣痰娱。大多數(shù)情況下,它處于隱藏狀態(tài)菩收,但是如果用戶從屏幕左邊緣滑動(dòng)手指猜揪,同時(shí)在應(yīng)用頂層觸摸操作欄中的應(yīng)用圖標(biāo),它將會(huì)顯示出來

簡(jiǎn)單來說這是一個(gè)實(shí)現(xiàn)了側(cè)滑菜單效果的控件坛梁,主要分為側(cè)邊菜單和主內(nèi)容兩部分,并可根據(jù)手勢(shì)操作進(jìn)行展開或隱藏腊凶。下面結(jié)合 Toolbar + DrawerLayout + NavigationView 來學(xué)習(xí)一下

簡(jiǎn)單使用

按照慣例划咐,我們先看一下效果圖:


DrawerLayout.gif

從效果圖來看,界面主要分為3部分:Toolbar钧萍、內(nèi)容區(qū)域褐缠、側(cè)邊欄(NavigationView)。下面我們就該效果看看具體實(shí)現(xiàn)风瘦,如果對(duì) Toolbar 不熟悉的队魏,可以看我的前一篇文章 MaterialDesign(一),ToolBar使用

  1. 引入 com.android.support:design
    由于我們這個(gè)例子使用到 NavigationView万搔,所以需要引入 com.android.support:design
compile 'com.android.support:design:26.1.0'
  1. xml 文件創(chuàng)建
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary">

            <!--此處可以添加自定義控件-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="custom"
                android:textColor="@android:color/white"
                android:textSize="16sp"/>
        </android.support.v7.widget.Toolbar>

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="內(nèi)容"/>
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/menu_nav"/>
</android.support.v4.widget.DrawerLayout>

從 xml 布局文件看胡桨,我們的根布局是 DrawerLayout,里面包含兩個(gè)部分瞬雹,從上到下第一部分必須是主布局昧谊,第二部分是側(cè)邊欄,這里的側(cè)邊欄我們使用了 NavigationView酗捌,也可以是任意視圖呢诬。第二部分必須添加 android:layout_gravity 屬性,這里使用了 android:layout_gravity="start" 表示是左側(cè)邊欄胖缤。NavigationView 的其他屬性尚镰,下面介紹 NavigationView 再進(jìn)行解釋,現(xiàn)在主要關(guān)注 DrawerLayout 的實(shí)現(xiàn)

  1. Activity 中獲取并設(shè)置相關(guān)屬性值哪廓,以及事件監(jiān)聽
@BindView(R.id.drawer_layout)
DrawerLayout mDrawerLayout;

mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // 點(diǎn)擊導(dǎo)航圖標(biāo)展開側(cè)邊欄
        mDrawerLayout.openDrawer(GravityCompat.START);
    }
});

// 如有需要可以設(shè)置DrawerLayout監(jiān)聽
mDrawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
    @Override
    public void onDrawerSlide(View drawerView, float slideOffset) {
        // 滑動(dòng)過程回調(diào)
    }

    @Override
    public void onDrawerOpened(View drawerView) {
        // 展開回調(diào)
    }

    @Override
    public void onDrawerClosed(View drawerView) {
        // 關(guān)閉回調(diào)
    }

    @Override
    public void onDrawerStateChanged(int newState) {
        // 狀態(tài)改變回調(diào)
    }
});

可以看出在 Activity 中無需設(shè)置什么狗唉,主要設(shè)置一下 Toolbar 的導(dǎo)航圖標(biāo)點(diǎn)擊時(shí)展開側(cè)邊欄,設(shè)置監(jiān)聽可根據(jù)具體業(yè)務(wù)設(shè)置

NavigationView 介紹

Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file.
NavigationView is typically placed inside a DrawerLayout.

大致的意思是 NavigationView 代表著應(yīng)用的標(biāo)準(zhǔn)導(dǎo)航欄撩独,菜單的內(nèi)容可以由菜單資源文件填充敞曹,通常放置在 DrawerLayout 中

上面我們?cè)?xml 中已經(jīng)使用到 NavigationView 這個(gè)控件了账月,下面了解一下使用到的這兩個(gè)屬性, app:headerLayout="@layout/nav_header" 屬性是給導(dǎo)航欄設(shè)置一個(gè)頭布局澳迫,可以引用 layout 文件局齿; app:menu="@menu/menu_nav" 屬性是為導(dǎo)航欄設(shè)置菜單項(xiàng),支持分組橄登,根據(jù)效果圖抓歼,看下具體的實(shí)現(xiàn)

nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="240dp"
              android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/android_bg"/>
</LinearLayout>
menu_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="設(shè)置">
        <menu>
            <group android:id="@+id/setting_g_1">
                <item
                    android:id="@+id/setting_item_1"
                    android:icon="@drawable/ic_settings_black_24dp"
                    android:title="設(shè)置1"/>
                <item
                    android:id="@+id/setting_item_2"
                    android:icon="@drawable/ic_settings_black_24dp"
                    android:title="設(shè)置2"/>
            </group>
        </menu>
    </item>

    <item android:title="設(shè)置(個(gè)性)">
        <menu>
            <group android:id="@+id/setting_g_2">
                <item
                    android:id="@+id/setting_item_3"
                    android:icon="@drawable/ic_settings_black_24dp"
                    android:title="設(shè)置3"/>
                <item
                    android:id="@+id/setting_item_4"
                    android:icon="@drawable/ic_settings_black_24dp"
                    android:title="設(shè)置4"/>
            </group>
        </menu>
    </item>
</menu>

這里簡(jiǎn)單的設(shè)置了一張圖片作為頭部,菜單項(xiàng)則使用了兩個(gè)分組拢锹,每個(gè)分組里面有兩個(gè)菜單項(xiàng)谣妻,可以說是非常簡(jiǎn)單。最后在 Activity 中設(shè)置各個(gè)菜單項(xiàng)的點(diǎn)擊事件即可卒稳,代碼如下

mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int id = item.getItemId();
        String tip = "";
        switch (id) {
            case R.id.setting_item_1:
                tip = "設(shè)置1";
                break;
            case R.id.setting_item_2:
                tip = "設(shè)置2";
                break;
            case R.id.setting_item_3:
                tip = "設(shè)置3";
                break;
            case R.id.setting_item_4:
                tip = "設(shè)置4";
                break;
        }
        Toast.makeText(ToolbarActivity.this, tip, Toast.LENGTH_SHORT).show();
        // 隱藏側(cè)邊欄
        mDrawerLayout.closeDrawer(GravityCompat.START);
        return false;
    }
});

結(jié)語

本文主要介紹了 DrawerLayout 和 NavigationView 的使用蹋半,DrawerLayout 在實(shí)際開發(fā)過程中用的也比較多。想了解更多充坑,可以參考官方 API减江。DrawerLayout APINavigationView API捻爷,請(qǐng)自備梯子辈灼。本文 demo 已上傳到 github

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市也榄,隨后出現(xiàn)的幾起案子巡莹,更是在濱河造成了極大的恐慌,老刑警劉巖甜紫,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件降宅,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡棵介,警方通過查閱死者的電腦和手機(jī)钉鸯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來邮辽,“玉大人唠雕,你說我怎么就攤上這事《质觯” “怎么了岩睁?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)揣云。 經(jīng)常有香客問我捕儒,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任刘莹,我火速辦了婚禮阎毅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘点弯。我一直安慰自己扇调,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布抢肛。 她就那樣靜靜地躺著狼钮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪捡絮。 梳的紋絲不亂的頭發(fā)上熬芜,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音福稳,去河邊找鬼涎拉。 笑死,一個(gè)胖子當(dāng)著我的面吹牛的圆,可吹牛的內(nèi)容都是我干的曼库。 我是一名探鬼主播,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼略板,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了慈缔?” 一聲冷哼從身側(cè)響起叮称,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎藐鹤,沒想到半個(gè)月后瓤檐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡娱节,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年挠蛉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肄满。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡谴古,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出稠歉,到底是詐尸還是另有隱情掰担,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布怒炸,位于F島的核電站带饱,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜勺疼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一教寂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧执庐,春花似錦酪耕、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至猿诸,卻和暖如春婚被,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背梳虽。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來泰國打工址芯, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人窜觉。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓谷炸,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親禀挫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子旬陡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • 什么是Toolbar Toolbar是應(yīng)用的內(nèi)容的標(biāo)準(zhǔn)工具欄砰左,可以說是Actionbar的升級(jí)版匿醒,兩者不是獨(dú)立關(guān)系...
    chaychan閱讀 1,543評(píng)論 1 5
  • 1. Toolbar 1.使用Toolbar,首先需要將系統(tǒng)的ActionBar隱藏缠导,打開res/values/s...
    figure_ai閱讀 1,051評(píng)論 1 3
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個(gè)線程廉羔,因...
    小菜c閱讀 6,373評(píng)論 0 17
  • 側(cè)滑菜單這種設(shè)計(jì),在很多 APP 上面都有看到僻造,例如大版本3.0之前的知乎憋他、網(wǎng)易新聞、滴滴打車等髓削。有些熱衷于 An...
    GinkWang閱讀 25,080評(píng)論 2 35
  • 登了半天才登進(jìn)來举瑰。 今天看了一個(gè)3集的英國記錄片——《三個(gè)女孩》,講的是發(fā)生在羅奇代爾街頭團(tuán)伙誘奸兒童案蔬螟。不知道該...
    什么時(shí)候吃餃子閱讀 282評(píng)論 0 0