Navigation Drawer 側邊選單教學 (PartIII)

前提回顧:

Navigation Drawer 側邊選單教學 (PartII)

上一篇教學主要是說明java程式撰寫讓Navigation選單動起來，下圖是在許多官方Google相關應用程式都

會看到的Navigation版面，看起來是不是很美觀呢 ! 滑動選單部分分成上方的Header以及下方menu item，

此篇教學接著上一篇內容教您如何美化版面

●下載icon

1.到Google design下載Icon下面有兩個推薦網站

https://material.io/icons

http://www.flaticon.com/

2.可以關鍵字下載圖示(account、setting、exit)點選PNGS打包下載

3.下載完成後解壓縮裡面可以看到有很多資料夾那是因為Android的icon圖示要搭配每個人手機的螢幕來分配大小，所以把資料夾裡的圖依序丟入project，如下圖所示

4.把下載下來對應的圖示放入Android專案資料夾中後並在navigation_menu.xml檔中加入icon的圖片來源id位置

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/nav_account"
        android:title="My account"
        android:icon="@mipmap/ic_person_black_24dp"/>
    <item android:id="@+id/nav_settings"
        android:title="Settings"
        android:icon="@mipmap/ic_settings_black_24dp"/>
    <item android:id="@+id/nav_logout"
        android:title="Log Out"
        android:icon="@mipmap/ic_exit_to_app_black_24dp"/>
</menu>

●建立標頭區塊Header

1.建立新的Layout檔navigation_header.xml 並且Root element:RelativeLayout

2.在navigation_header.xml中

Layout_hight高度140dp Padding:20dp和更改背景顏色 @color/colorPrimaryDark狀態列顏色

以及加入TextView大小20sp白色Padding20dp

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="140dp"
    android:background="@color/colorPrimaryDark"
    android:padding="20dp">

    <TextView
        android:text="Header Navigation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="12dp"
        android:id="@+id/textView2"
        android:padding="10dp"
        android:textColor="#ffffff"
        android:textSize="20sp" />
</RelativeLayout>

3.接著在activity_main.xml加入引入headerLayout

app:headerLayout="@layout/navigation_header"

執行結果

到這邊先做一個段落，各位可能會發現側邊選單竟然被上方的ActionBar所侷限住了，我們經常所看到的選單長度是涵蓋整個螢幕的高，下一篇就會教各為如何自定義Toolbar來解決這個問題