Android框架之路——NavigationView的使用(結(jié)合ToolBar)

參考博客:

NavigationView簡介:

Android Design Support Library 給開發(fā)者帶來了一些重要的 Material Design 組件,并且向下兼容到 Android 2.1呀舔, Navigation View 就是其中之一弥虐,可用于方便地創(chuàng)建導(dǎo)航抽屜扩灯。

NavigationView在很多App上都已經(jīng)可以看到其效果圖,國內(nèi)的比如知乎(側(cè)拉菜單滑出來的那一部分屬于NavigationView)霜瘪,還有Google自己的那些app珠插,也基本全都采用了NavigationView。

實(shí)現(xiàn)效果

<p>

</p>

使用流程

  1. NavigationView要放在一個DrawerLayout中颖对,現(xiàn)在給出我的activity_main.xml捻撑,LinearLayout就是一打開app顯示出的布局,這里我是接著Android框架之路——RecyclerView的demo繼續(xù)使用的缤底,所以里面放了一個RecyclerView顾患,同時也要加上ToolBar。其中android:layout_gravity="left"是讓NavigationView收進(jìn)左側(cè);

     <?xml version="1.0" encoding="utf-8"?>
     <android.support.v4.widget.DrawerLayout
         android:id="@+id/drawerLayout"
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         tools:context="com.ping.recyclerview.MainActivity">
     
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">
     
             <android.support.v7.widget.Toolbar
                 android:id="@+id/toolbar"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:background="@color/colorPrimary"
                 app:navigationIcon="@drawable/navigation"
                 app:title="Navigation"
                 app:titleTextColor="#fff">
     
             </android.support.v7.widget.Toolbar>
     
             <android.support.v7.widget.RecyclerView
                 android:id="@+id/recyclerView"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"/>
     
         </LinearLayout>
     
         <android.support.design.widget.NavigationView
             android:id="@+id/navigationView"
             android:layout_width="wrap_content"
             android:layout_height="match_parent"
             android:layout_gravity="left"
             android:fitsSystemWindows="true"
             app:headerLayout="@layout/navigation_header"
             app:menu="@menu/na_menu">
     
         </android.support.design.widget.NavigationView>
     </android.support.v4.widget.DrawerLayout>
    
  2. 在NavigationView中个唧,app:headerLayout="@layout/navigation_header"江解、app:menu="@menu/na_menu"的navigation_header.xml和na_menu.xml如下,na_menu.xml中g(shù)roup與group之間會有橫線。這里給大家分享一個網(wǎng)站https://materialdesignicons.com/徙歼,里面的圖標(biāo)可以右鍵選擇View Vector Drawable方式膘流,然后再資源文件夾下新建drawable用就好了,非常好用鲁沥;

    navigation_header.xml

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                   xmlns:app="http://schemas.android.com/apk/res-auto"
                   android:orientation="vertical"
                   android:layout_width="match_parent"
                   android:background="@drawable/weixin"
                   android:layout_height="200dp">
     
         <ImageView
             android:layout_marginTop="20dp"
             android:layout_marginLeft="20dp"
             android:id="@+id/iv_header"
             android:layout_width="50dp"
             android:layout_height="50dp"
             app:srcCompat="@mipmap/ic_launcher"/>
     
         <TextView
             android:layout_marginTop="90dp"
             android:layout_marginLeft="20dp"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="Navigation使用"
             android:textColor="#000"
             android:textSize="25dp"/>
     
     </LinearLayout>
    

    na_menu.xml

     <?xml version="1.0" encoding="utf-8"?>
     <menu xmlns:android="http://schemas.android.com/apk/res/android">
         <group
             android:id="@+id/group1"
             android:checkableBehavior="single">
             <item
                 android:id="@+id/favorite"
                 android:icon="@drawable/favourite"
                 android:title="收藏"/>
             <item
                 android:id="@+id/wallet"
                 android:icon="@drawable/wallet"
                 android:title="錢包"/>
             <item
                 android:id="@+id/photo"
                 android:icon="@drawable/photo"
                 android:title="相冊"/>
             <item
                 android:id="@+id/file"
                 android:icon="@drawable/file"
                 android:title="文件"/>
         </group>
     
         <group
             android:id="@+id/group2"
             android:checkableBehavior="single">
             <item
                 android:id="@+id/about"
                 android:icon="@drawable/about"
                 android:title="關(guān)于"/>
             <item
                 android:id="@+id/share"
                 android:icon="@drawable/share"
                 android:title="分享"/>
             <item
                 android:id="@+id/setting"
                 android:icon="@drawable/setting"
                 android:title="設(shè)置"/>
         </group>
     
     </menu>
    
  3. 在MainActivity.java中呼股,需要去實(shí)現(xiàn)功能;

    • 點(diǎn)擊頭部事件画恰;

        mNavigationView = (NavigationView) findViewById(R.id.navigationView);
                mNavigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Log.i("mNavigationView", "head is clicked!");
                    }
                });
      
    • 設(shè)置條目點(diǎn)擊事件彭谁;

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                        switch (item.getItemId()){
                            case R.id.favorite:
                                Log.i("mNavigationView", "收藏 is clicked!");
                                break;
                            case R.id.wallet:
                                Log.i("mNavigationView", "錢包 is clicked!");
                                break;
                            case R.id.photo:
                                Log.i("mNavigationView", "相冊 is clicked!");
                                break;
                            case R.id.file:
                                Log.i("mNavigationView", "文件 is clicked!");
                                break;
                            case R.id.about:
                                Log.i("mNavigationView", "關(guān)于 is clicked!");
                                break;
                            case R.id.share:
                                Log.i("mNavigationView", "分享 is clicked!");
                                break;
                            case R.id.setting:
                                Log.i("mNavigationView", "設(shè)置 is clicked!");
                                break;
                        }
                        return true;
                    }
                });
      
    • 設(shè)置toolbar的navigationIcon點(diǎn)擊打開側(cè)邊欄事件;

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
      
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mDrawerLayout.openDrawer(mNavigationView);
            }
        });
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末允扇,一起剝皮案震驚了整個濱河市缠局,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌考润,老刑警劉巖狭园,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異糊治,居然都是意外死亡唱矛,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進(jìn)店門井辜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绎谦,“玉大人,你說我怎么就攤上這事粥脚∏猿Γ” “怎么了?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵刷允,是天一觀的道長冤留。 經(jīng)常有香客問我碧囊,道長,這世上最難降的妖魔是什么纤怒? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任呕臂,我火速辦了婚禮,結(jié)果婚禮上肪跋,老公的妹妹穿的比我還像新娘。我一直安慰自己土砂,他們只是感情好州既,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著萝映,像睡著了一般吴叶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上序臂,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天蚌卤,我揣著相機(jī)與錄音,去河邊找鬼奥秆。 笑死逊彭,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的构订。 我是一名探鬼主播侮叮,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼悼瘾!你這毒婦竟也來了囊榜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤亥宿,失蹤者是張志新(化名)和其女友劉穎卸勺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體烫扼,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡曙求,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了映企。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片圆到。...
    茶點(diǎn)故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖卑吭,靈堂內(nèi)的尸體忽然破棺而出芽淡,到底是詐尸還是另有隱情,我是刑警寧澤豆赏,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布挣菲,位于F島的核電站富稻,受9級特大地震影響慕淡,放射性物質(zhì)發(fā)生泄漏谁尸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一扒寄、第九天 我趴在偏房一處隱蔽的房頂上張望或杠。 院中可真熱鬧哪怔,春花似錦、人聲如沸向抢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽挟鸠。三九已至叉信,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間艘希,已是汗流浹背硼身。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留覆享,地道東北人佳遂。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像撒顿,于是被迫代替她去往敵國和親讶迁。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評論 2 344

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,528評論 25 707
  • afinalAfinal是一個android的ioc核蘸,orm框架 https://github.com/yangf...
    passiontim閱讀 15,401評論 2 45
  • ¥開啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程巍糯,因...
    小菜c閱讀 6,358評論 0 17
  • 自從兒子放假,我就盤算哪天回娘家看看客扎,今終于得空祟峦。細(xì)算起來已有一月沒回娘家了。 一大早我們就出發(fā)...
    王斐媽媽閱讀 175評論 0 2
  • 這次有幾個朋友來晚了徙鱼,其中有位朋友給我們講述了在來的路上的兩起車禍的見聞宅楞!感嘆人生無常!我們6個人用了很短的時間做...
    劉益辰閱讀 180評論 0 0