Android Design Support Library初探,NavigationView實(shí)踐

前言

在前幾天的IO大會上,Google帶來了Android M空另,同時(shí)還有Android支持庫的新一輪更新,其中更是增加一個(gè)全新的支持庫Android Design Support Library蹋砚,包含了數(shù)個(gè)重要的Material Design組件扼菠,用于將Material Design適配到Android 2.1(API 7)摄杂。

Android Design Support Library

可以通過官方博客文檔循榆,和Demo示例來快速了解匙姜。Design Support Library現(xiàn)在包含NavigationViewTextInputLayout冯痢,FloatingActionButtonSnackbar框杜,TabLayout浦楣,CoordinatorLayout
要使用Design Support Library咪辱,請先更新SDK中的Android Support Repository到最新版振劳,然后在工程中添加依賴

compile 'com.android.support:design:22.2.0'

下面讓我們先來試試Navigation View。

NavigationView

在Material Design中油狂,Navigation drawer導(dǎo)航抽屜历恐,被設(shè)計(jì)用于應(yīng)用導(dǎo)航,提供了一種通用的導(dǎo)航方式专筷,體現(xiàn)了設(shè)計(jì)的一致性弱贼。
而NavigationView的典型用途就是配合之前v4包的DrawerLayout,作為其中的Drawer部分磷蛹,即導(dǎo)航菜單的本體部分吮旅。NavigationView是一個(gè)導(dǎo)航菜單框架,使用menu資源填充數(shù)據(jù)味咳,使我們可以更簡單高效的實(shí)現(xiàn)導(dǎo)航菜單庇勃。它提供了不錯(cuò)的默認(rèn)樣式、選中項(xiàng)高亮槽驶、分組單選责嚷、分組子標(biāo)題、以及可選的Header掂铐。

來自官方博客
來自官方博客

怎么用

典型的布局文件如下罕拂,外層是DrawerLayout,它的第一個(gè)child將作為content堡纬,第二個(gè)child作為Drawer

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

   <!-- Content -->
    <FrameLayout
        android:id="@+id/content_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

   <!-- Drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

注意其中NavigationView的兩個(gè)自定義屬性
app:headerLayout接收一個(gè)layout聂受,作為導(dǎo)航菜單頂部的Header,可選項(xiàng)烤镐。
app:menu接收一個(gè)menu蛋济,作為導(dǎo)航菜單的菜單項(xiàng),幾乎是必選項(xiàng)炮叶,不然這個(gè)控件就失去意義了碗旅。但也可以在運(yùn)行時(shí)動態(tài)改變menu屬性渡处。

用于NavigationView的典型menu文件,應(yīng)該是一個(gè)可選中菜單項(xiàng)的集合祟辟。其中checked="true"的item將會高亮顯示医瘫,這可以確保用戶知道當(dāng)前選中的菜單項(xiàng)是哪個(gè)。item的選中狀態(tài)可以在代碼中設(shè)置旧困,稍后回調(diào)部分會講醇份。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_original"
            android:checked="true"
            android:icon="@drawable/ic_star_white_24dp"
            android:title="@string/navigation_original"/>

        <item
            android:id="@+id/navigation_library"
            android:icon="@drawable/ic_public_white_24dp"
            android:title="@string/navigation_library"/>
    </group>
</menu>

還可以使用menu的嵌套,來顯示分組子標(biāo)題吼具。關(guān)于menu資源的屬性詳解僚纷,可以參看官方文檔

<item
    android:id="@+id/navigation_subheader"
    android:title="@string/navigation_subheader">
    <menu>
        <item
            android:id="@+id/navigation_sub_item_1"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_1"/>
        <item
            android:id="@+id/navigation_sub_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_2"/>
    </menu>
</item>

最后,我們可以用setNavigationItemSelectedListener方法來設(shè)置當(dāng)導(dǎo)航項(xiàng)被點(diǎn)擊時(shí)的回調(diào)拗盒。OnNavigationItemSelectedListener會提供給我們被選中的MenuItem怖竭,這與Activity的onOptionsItemSelected非常類似。通過這個(gè)回調(diào)方法陡蝇,我們可以處理點(diǎn)擊事件痊臭,改變item的選中狀態(tài),更新頁面內(nèi)容登夫,關(guān)閉導(dǎo)航菜單广匙,以及任何我們需要的操作。我的示例代碼如下

mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {
        if (sNavigationMap.containsKey(menuItem.getItemId())) {
            menuItem.setChecked(true); // 改變item選中狀態(tài)
            setTitle(menuItem.getTitle()); // 改變頁面標(biāo)題悼嫉,標(biāo)明導(dǎo)航狀態(tài)
            currentNavigationId = menuItem.getItemId();
            mDrawerLayout.closeDrawers(); // 關(guān)閉導(dǎo)航菜單
            return true;
        } else {
            return false;
        }
    }
});

示例工程

最后提供我自己平時(shí)自用的示例工程艇潭,項(xiàng)目地址在此,其中主頁的導(dǎo)航菜單部分已經(jīng)使用NavigationView重寫戏蔑,工程中還包含選中后的頁面內(nèi)容更新部分蹋凝,可以作為參考(大概...)。項(xiàng)目中包含零零碎碎許多其他東西总棵,無視即可鳍寂。

示例工程

另外,上圖導(dǎo)航菜單中的圖標(biāo)全部來自Google的Material icons項(xiàng)目情龄,提供了非常多的圖片供我們選擇迄汛,好頂贊,我們的設(shè)計(jì)師表示壓力很大感覺快失業(yè)了骤视。下載圖標(biāo)時(shí)注意鞍爱,作為菜單項(xiàng)的icon為24dp,并選擇light即白色版专酗。
至于圖中icon的高亮效果睹逃,應(yīng)該是利用了Drawable Tinting。圖中的圖標(biāo)有高亮綠色與普通灰色兩種顏色,但是實(shí)際上對應(yīng)圖片只有一張白色版本沉填。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疗隶,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子翼闹,更是在濱河造成了極大的恐慌斑鼻,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猎荠,死亡現(xiàn)場離奇詭異坚弱,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)关摇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門史汗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拒垃,你說我怎么就攤上這事〈赏埽” “怎么了悼瓮?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長艰猬。 經(jīng)常有香客問我横堡,道長,這世上最難降的妖魔是什么冠桃? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任命贴,我火速辦了婚禮,結(jié)果婚禮上食听,老公的妹妹穿的比我還像新娘胸蛛。我一直安慰自己,他們只是感情好樱报,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布葬项。 她就那樣靜靜地躺著,像睡著了一般迹蛤。 火紅的嫁衣襯著肌膚如雪民珍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天盗飒,我揣著相機(jī)與錄音嚷量,去河邊找鬼。 笑死逆趣,一個(gè)胖子當(dāng)著我的面吹牛蝶溶,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播汗贫,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼身坐,長吁一口氣:“原來是場噩夢啊……” “哼秸脱!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起部蛇,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤摊唇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后涯鲁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巷查,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年抹腿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了岛请。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡警绩,死狀恐怖崇败,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情肩祥,我是刑警寧澤后室,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站混狠,受9級特大地震影響岸霹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜将饺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一贡避、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧予弧,春花似錦刮吧、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至坠七,卻和暖如春水醋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背彪置。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工拄踪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人拳魁。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓惶桐,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子姚糊,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

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