Toolbar+DrawerLayout+NavigationView使用心得

HiltonTolli 8年前發布 | 9K 次閱讀安卓開發 Android開發移動開發

在上一篇文章中，萌新的我寫了自己toolbar的使用心得，其實就是怎么改變toolbar上菜單的的位置而已。在上一篇的基礎上，萌新又試試怎么使用drawerLayout，然后在drawerLayout的基礎上，發現了Naviationview并且嘗試如何正確使用它。

先聲明一下咯，因為我是萌新什么的，僅供如何使用介紹的組件，內存泄露等問題是不會考慮的。因為我也不懂。。（慚愧）

簡介：

Toolbar是什么？其實就是Actionbar，Actionbar其實就是菜單欄

原文：

https://developer.android.google.cn/reference/android/support/v7/widget/Toolbar.html

DrawerLayout是什么？大家想必用過網易云，在界面可以從屏幕左邊滑到右邊，一般會出現自己用戶的頭像啦，設置啦，什么夜間模式什么的。如圖：

原文：

https://developer.android.google.cn/reference/android/support/v4/widget/DrawerLayout.html

NavigationView是什么？其實就是drawerlayout拉出來后的那些菜單。

注意：DrawerLayou和NavigationView是不一樣的，其實就像LinerLayout等布局里面裝一個TextView這樣的view。DrawerLayout里面裝著NavigationView，然后可以設置navigationview的屬性。就像TextView可以設置屬性一樣。

原文：

https://developer.android.google.cn/reference/android/support/design/widget/NavigationView.html

這里著重寫drawerLayout和NavigationView的用法咯。

其實官方早就寫了一個中文的教程，想直接看文檔的點這里。

https://developer.android.google.cn/training/implementing-navigation/nav-drawer.html

drawerLayout：官方文檔解釋最好把drawerLayout作為根布局，就是說不要在drawerLayout再包一層layout。因為這樣可能會阻擋到drawerLayout的事件發生。

重要：在使用drawerLayout布局的時候還要遵守以下規則。

① drawerLayout最好作為根布局咯，上面你說了。

② 主次不能顛倒。也就是說，往drawerLayout加view或者布局是有順序的，應該先加主內容，再加drawer內容。

③：在設置drawerlayout里view的屬性時，一定要給drawer內容設置gravity。設置start，從左邊拉出，設置end從右邊拉出。別問我為什么不是left，right，其實官方文檔有寫。不解釋咯。

主內容是什么？其實就是你的主頁面，就是還沒拉出drawer的時候的頁面，或者也可以說你要顯示的頁面。

drawer內容是什么：其實就是一個列表，或者是navigationView。

Toolbar+DrawerLayout+NavigationView使用心得

*注意：在不使用navigationView的情況下，你可以弄個recyclerView或者listview，來展示這些菜單。個人感覺用navigationView方便，還不用定義適配器，直接在屬性引用你定義好的menu的文件就好。

<?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/mydrawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--主內容-->
    <include layout="@layout/toolbar_layout"/>

    <!--drawer內容-->
    <!--當然你可以用listview,recyclerView-->
    <android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity = "start"
    app:headerLayout="@layout/headlayout"
    app:itemBackground="?attr/colorPrimary"
    app:menu="@menu/menu">
    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

說明：如果你發現你不能使用navigationView，或者碼上去的時候android studio沒有自動補全，記得導入design依賴庫。

屬性特別說明：app:menu就是引用你定義好的菜單文件。

app：headerlayout就是菜單頭部的布局，可以自己定義，這里我弄了個圖片

菜單menu文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <group android:id="@+id/group1">
    <item android:id="@+id/nav_name"
        android:icon="@drawable/ic_bar_person"
        app:showAsAction="ifRoom"
        android:title="person" />
    <item android:id="@+id/nav_music"
        android:icon="@drawable/ic_bar_music"
        android:title="music"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/nav_search"
        android:icon="@drawable/ic_bar_search"
        android:title="search"
        app:showAsAction="ifRoom"/>
</group>
    <group android:id="@+id/group2">
        <item android:id="@+id/nav_name2"
            android:icon="@drawable/ic_bar_person"
            app:showAsAction="ifRoom"
            android:title="person" />
        <item android:id="@+id/nav_music2"
            android:icon="@drawable/ic_bar_music"
            android:title="music"
            app:showAsAction="ifRoom"/>
        <item android:id="@+id/nav_search2"
            android:icon="@drawable/ic_bar_search"
            android:title="search"
            app:showAsAction="ifRoom"/>
    </group>
    <group android:id="@+id/group3">
        <item android:id="@+id/nav_name3"
            android:icon="@drawable/ic_bar_person"
            app:showAsAction="ifRoom"
            android:title="person" />
        <item android:id="@+id/nav_music3"
            android:icon="@drawable/ic_bar_music"
            android:title="music"
            app:showAsAction="ifRoom"/>
        <item android:id="@+id/nav_search3"
            android:icon="@drawable/ic_bar_search"
            android:title="search"
            app:showAsAction="ifRoom"/>
    </group>
</menu>

說明：加了group的話，在drawerlayout里會以group為單位劃線。

headlayout布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/gtm"
        android:scaleType="centerCrop"/>
</LinearLayout>

說明：就是那張圖片沒啥。

主內容布局文件：就是那個

<include layout="@layout/toolbar_layout"/>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.Toolbar
        android:id="@+id/mytoolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity = "center">
            <ImageView
                android:id="@+id/toolbar_music"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_bar_music" />
            <ImageView
                android:id="@+id/toolbar_person"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_bar_person"
                android:layout_marginLeft="30dp"/>
        </LinearLayout>
        <ImageView
            android:id="@+id/toolbar_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_bar_search"
            android:layout_gravity = "right"/>
    </android.support.v7.widget.Toolbar>
    <FrameLayout
        android:id="@+id/primary_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>
</FrameLayout>

說明：不用看toolbar里面的屬性內容，這不重要，重要的標了備注的fragmentlayout和toolbar的關系，toolbar一定要放上面，不然的話toolbar的東西會點不了，沒響應。。

簡單來說就是這樣

DrawerLayout{

frametlayout{

toolbar

frameLayout(主內容)

}

NavigationView

}

PS：這不是代碼，這是一個包含關系，方便大家看咯。

主內容不一定要為framelayout，也可以是自己設計的布局，設為framelayou的原因是一般主內容要頻繁顯示，使用fragment以及fragmentmanager來進行頁面的更替。所以這樣設咯。

接下來，你只需要在MainActivity加幾行代碼，其中會用到ActionBarDrawerToggle，其實就是把drawerLayout和toolbar聯系起來，讓你點菜單可以拉出drawer。

 private void init() {
    = (NavigationView) findViewById(R.id.);
    = (Toolbar) findViewById(R.id.);
    setSupportActionBar();
    getSupportActionBar().setDisplayShowTitleEnabled();
    = (DrawerLayout) findViewById(R.id.);
     = ActionBarDrawerToggle
            (, , , R.string., R.string.){
        onDrawerOpened(View drawerView) {
            .onDrawerOpened(drawerView);
        }
    };
}

ps：初始化基本就這樣，下面那個重寫方法可有可無，這個 ActionBarDrawerToggle可以重寫drawerlayout中open和close監聽啦。就是當drawer被拉開和關上的時候會觸發的監聽。

基本就是這樣咯~

那啥，不會動態截圖。。

點擊左上角菜單圖標可，拉出。或者像平時一樣，直接用手機從左邊劃過去。

還有一點：有細心的人可能發現我的toolbar沒有設置菜單圖標，那么是哪來的呢？

其實當把drawerLayout和ActionBarDrawerToggle關聯的時候，會自動生成的，并且在拉動的時候menu圖標是有動畫效果的。如果想改可以使用 ActionBarDrawerToggle的相關方法。自己看谷歌文檔啦

來自：http://www.jcodecraeer.com/a/anzhuokaifa/2017/0317/7694.html

本文由用戶 HiltonTolli 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1489990127188.html

安卓開發 Android開發移動開發

Toolbar+DrawerLayout+NavigationView使用心得

相關經驗

相關資訊

相關文檔

目錄