前提回顧:
Navigation Drawer 側邊選單教學 (PartII)
上一篇教學主要是說明java程式撰寫讓Navigation選單動起來，下圖是在許多官方Google相關應用程式都
會看到的Navigation版面，看起來是不是很美觀呢 ! 滑動選單部分分成上方的Header以及下方menu item，
此篇教學接著上一篇內容教您如何美化版面
會看到的Navigation版面，看起來是不是很美觀呢 ! 滑動選單部分分成上方的Header以及下方menu item，
此篇教學接著上一篇內容教您如何美化版面
●下載icon
1.到Google design下載Icon下面有兩個推薦網站
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>
<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>
<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來解決這個問題
