Navigation Drawer 側邊選單教學 (PartI)

前言:Navigation Drawer，通常是從左邊邊緣拉出來的一個導覽選單，是一個很常用到的 UI 元件。雖然Android Studio內建可以直接套做好的範本再做修改。但我們希望能搞懂運作關係此篇文章教您如何自定義設計一個自己的Toolbar+Navigation Drawer

首先進入教學前先來看成果 我們要實作的是側邊選單的功能，這個功能您可能會在Gmail、YouTube、Google Play......等Google開發的應用程式中看到此選單功能。

●加入design資源再Sync同步

1.我們從Toolbar開始，先在build.gradle的dependencies大括號裡面加入

   後面的24.2.1版本對應您的appcompat-v7才能正確的被執行哦!

compile 'com.android.support:design:24.2.1'

●在activity_main.xml中

1.更改activity_main.xml的介面排版選擇第一個DrawerLayout 並且刪除那些padding

2.再來加入NavigationView選取第一個

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:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.example.andy6804tw.navigationapp.MainActivity">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">



        <TextView

            android:text="MainLayout"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:id="@+id/textView"

            android:layout_weight="1"

            android:textAlignment="center"

            android:textSize="24sp" />

    </LinearLayout>

    <android.support.design.widget.NavigationView

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        app:menu="@menu/navigation_menu"

        android:layout_gravity="start">  //隱藏使用者可以像用滑動顯示工具列

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



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

●建立menu

1.在res建立menu資料夾並new一個新的navigation_menu.xml

2.建立item項目

<?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"/>

    <item android:id="@+id/nav_settings"

        android:title="Settings"/>

    <item android:id="@+id/nav_logout"

        android:title="Log Out"/>

</menu>

目前圖示

到目前為止已經完成部分版面配置(程式還不能跑)下一篇會教您如何動作側邊選單的程式撰寫