Givemepass's Android 惡補筆記

如何使用NavigationView

| Comments

如果要使用NavigationView, 可以使用預設的Header功能, 以及item功能。

如上圖, 黃色部分就是NavigationView的Header部分, 這部分可以自行定義。
下方部分則是drawer menu部分, 可以利用xml定義項目內容以及icon。

<android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="240dp"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true"
        android:layout_height="match_parent"
        android:background="#ffffff"
        app:menu="@menu/drawer"
        app:headerLayout="@layout/header_layout"
        />

在main_activity.xml內加入兩個部分, 一個是menu, 另外一個是header的xml。
記得在DrawerLayout部分補上

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    ...

接著宣告drawer.xml

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

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

header.xml部分只宣告一個linearlayout並且指定高度。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#fff454"
    android:layout_width="match_parent"
    android:layout_height="200dp">

</LinearLayout>

這樣就完成定義NavigationView的所有項目。

程式碼

Comments

comments powered by Disqus