DrawerActivity

這次我們嘗試使用 Android Studio 所提供的 Navigation Draewer Activity 來實做 Navigation View 。

當你建立了這個 Activity 你會發現它不僅包含了 Navigation View 還有 Action Bar 與 Floating Action Button

我們今天專注在 Drawer Layout + Navigation View 的應用上。

Layout 佈局結構

在理解主要程式碼前讓我們先來看一下 Android Studio 為我們做的 Layout 布局

activity_main.xml

<?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:openDrawer="start">

    <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer"/>

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

這裡我們可以看到 NavigationView 屬性裡面還需要多讀取到 headerLayout 跟 menu 。
裡面的項目也由 Android Studio 幫我們建立好了，如果需要修改的部份可以自行前往修改至自己要的功能。
這裡就不多談囉。

app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
        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=".MainActivity">

    <android.support.design.widget.AppBarLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>
    
    <include layout="@layout/content_main"/>

</android.support.design.widget.CoordinatorLayout>

這裡我們可以看到 我們的 Content_main (資料顯示的區域) 在最後才被 include 進來。

可以被重複運用的 xml 我們也可以像這樣使用 include 的語法，讓程式的可讀性變高。

今天就先這樣囉，我們明天見~~

參考文件

DrawerLayout
DrawerLayout和NavigationView使用詳解