1. 程式人生 > >DrawerLayout+NavigationView的使用和一些坑

DrawerLayout+NavigationView的使用和一些坑

NavigationView 是google給出替換sliding的,非常易於實現側邊欄的控制元件;

首先NavigationView包含在design包中,先在studio的project structure中新增dependences  搜尋design就可以了選擇Android suport包;

DrawerLayout 是v4中的所以一般不用額外新增;

下面是程式碼編寫過程:

DrawerLayout適合做根佈局,他包含兩部分,注意這兩部分內容是按照程式碼的先後順序自動區分的,所以一定要注意順序:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        //第一部分會被識別為正常的主頁面區域
    </LinearLayout>

//下面的程式碼是第二部分,這部分新增的檢視會被認為是側邊欄
    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/xx"
        app:menu="@menu/xx"
        android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>

注意android:layout_gravity="start"這個屬性一定要有,我的程式碼不知道為什麼在自動提示中展示的屬性裡沒有然後我沒有加結果側邊欄佔據了整個頁面把主頁面區域都覆蓋住了而且設定寬高無效,還好我直接寫上這個屬性也沒有報錯而且起作用了。。。。

NavigationView 把自身的檢視分為了兩部分,一部分是側邊欄喚出後的頂部區域,這部分割槽域通常會展示使用者的頭像 和使用者名稱一類的資訊,這部分的檢視通過app:headerLayout="@layout/xx"引入

另外一部分是下部的功能選擇項如一般會有的設定、修改密碼、關於我們這些他是以menu的形式展示的可以通過自定義res/menu下的檔案來定義每個功能項的圖片、名字和ID(還可以分組等)然後通過app:menu="@menu/xx"  新增

添加了上面兩部分那再手機上點選觸發按鈕喚出側邊欄後就會看到一個上部是頭像使用者資訊下部是功能選項列表的一個頁面;

 

好了下面是在activity中:

通過findviewbyid繫結DrawerLayout 和 NavitgationView 

DrawerLayout.closeDrawer(Gravity);//關閉

DrawerLayout.openDrawer(Gravity);//開啟

DrawerLayout.isOpen();//檢測當前是否開啟

NavigationView.setNavigationItemSelectedListener()//處理NavigationView中的各項的點選事件,它的引數會返回被點選的控制元件通過getId()可以進行識別;

View view = navigationView.getHeaderView(0)可以獲得上部的檢視,通過view.findById()可以繫結上部的控制元件進行操作;

navigationView.setItemIconTintList(null);可以使得下部各項的圖示顯示原本的顏色;

https://developer.android.google.cn/training/implementing-navigation/nav-drawer  google的說明文件