使用語言

• Kotlin

使用元件

• ImageView
• TextView
• DrawerLayout
• NavigationView
• CoordinatorLayout
• AppBarLayout
• Toolbar
• menu

Metohd

導入並使用 Navigation Drawer Activity

1. 新建專案時選擇 "Navigation Drawer Activity"

   

2. 新建完之後會發現已自動建立好數個 Layout 及 menu 的 xml 檔

   

3. 第一個 activity_main 為 MainActivity 的 Layout

   

   裡面的外層為一個 DrawerLayout

   • DrawerLayout

     作為父層容器可以讓畫面的左右兩邊拉出像抽屜般的互動式的視圖，

   DrawerLayout 中包含以下兩樣：

   • 設定了主頁面內容的 app_bar_main 這個 Layout

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

     • include：用來加入其他 Layout xml 檔

   • 用來從左邊拉出的抽屜式視圖
     包含側邊欄上方區域的 Layout 檔 nav_header_main
     以及側邊欄的 menu xml 檔 activity_main_drawer

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

     • NavigationView：側邊欄選單
       參考影片簡易介紹：官方介紹影片

4. 設定了主頁內容的 app_bar_main Layout

   

   裡面的外層為一個 CoordinatorLayout

   • CoordinatorLayout

     CoordinatorLayout 為一種強大的 FrameLayout，
     其子 View 會隨著其他子 View 的移動而跟著移動。
     可參考：官方介紹影片、參考資料

   CoordinatorLayout 中包含以下三樣：

   • Toolbar

     <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>
     

     • android:theme=""：用來設定 ToolBar 的樣式

     • app:popupTheme=""：用來設定 ToolBar 上點擊彈出的目錄的樣式

   • 主頁面中間主要畫面的 Layout xml 檔 content_main

     <include layout="@layout/content_main"/>
     

   • 下方的懸浮按鈕

     <android.support.design.widget.FloatingActionButton
         android:id="@+id/fab"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="bottom|end"
         android:layout_margin="@dimen/fab_margin"
         app:srcCompat="@android:drawable/ic_dialog_email"/>
     

5. 主頁面中間主要畫面的 content_main.xml

   

6. 側邊欄上方區域的 nav_header_main.xml
   

7. res/menu/ 資料夾下的側邊欄目錄 activity_main_drawer.xml

   

   <group android:checkableBehavior="single">
       <item
           android:id="@+id/nav_camera"
           android:icon="@drawable/ic_menu_camera"
           android:title="@string/import"/>
       ...
   
   </group>
   
   <item android:title="@string/communicate">
       <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="@string/share"/>
            ...
       </menu>
   </item>
   

   • <menu>：選單容器，一個 menu 容器中可含多個 <item> 或 <gruop>

   • <item>：代表 menu 中的單一項目，<item> 中可以含有 <menu> 作為子選單

   • <gruop>：可包含多個元素的不可見容器，可以將項目分類並共享屬性

     • android:checkableBehavior=""：<gruop> 共享的屬性，表示 <gruop> 中項目的勾選行為

       • single：表示 <gruop> 中只能勾選一個項目（圓形按鈕）

       • all：可勾選所有項目（核取方塊）

       • none：沒有可勾選的項目

   更多關於 menu 可以參考 官方文件

8. res/menu/ 資料夾下設置自定義 上按鈕的 main.xml

   

9. 以上 xml 檔的內容可依自己的需求再做修改

supportActionBar

上方的標題欄 ActionBar

• setSupportActionBar

  AppCompatActivity 中的方法，可使用自定義的 Toolbar 作為標題欄。

  setSupportActionBar (toolbar: Toolbar)

  • toolbar：指定自定義的 Toolbar

  setSupportActionBar(toolbar)
  

• setDisplayHomeAsUpEnabled

  ActionBar 中的方法，可以在標題欄的最左邊設置一個返回按鈕。

  setDisplayHomeAsUpEnabled (showHomeAsUp: Boolean)

  • showHomeAsUp：如果要設置則 true，反之則 false。

  supportActionBar?.setDisplayHomeAsUpEnabled(true)
  

• setHomeAsUpIndicator

  ActionBar 中的方法，用來自定義標題欄左邊按鈕的樣式

  setHomeAsUpIndicator (resId: Int)

  • resId：想要使用的 icon 的 Resource id。

  supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_menu)
  

• onOptionsItemSelected

  Activity 中的方法，用來設定標題欄上的項目被選取時要觸發的事件。

  onOptionsItemSelected (item: MenuItem): Boolean

  • item：被選擇的項目。

  • 若要讓被點選的項目攔截點擊事件（也就是後續沒有其他人需要接收此點擊事件）則回傳 true，反之則 false。

  override fun onOptionsItemSelected(item: MenuItem): Boolean {
      // Handle action bar item clicks here. The action bar will
      // automatically handle clicks on the Home/Up button, so long
      // as you specify a parent activity in AndroidManifest.xml.
      when (item.itemId) {
          // android.R.id.home 為預設標題欄最左邊項目的 id
          android.R.id.home -> {
              // 打開抽屜式側邊選單
              drawer_layout.openDrawer(GravityCompat.START)
              return true
          }
          else -> return super.onOptionsItemSelected(item)
      }
  }
  

onNavigationItemSelected

用來監聽 NavigationView 中項目的點擊事件

可以看到自動建立好的 MainActivity 有實作 NavigationView.OnNavigationItemSelectedListener 這個 Interface，而 onNavigationItemSelected 就是這個 Interface 中的方法。

onNavigationItemSelected (item: MenuItem): Boolean

• item：點擊的項目

• 若要產生選擇項目的效果則回傳 true，反之回傳 false。

 override fun onNavigationItemSelected(item: MenuItem): Boolean {
     // Handle navigation view item clicks here.
     when (item.itemId) {
         R.id.backHome -> {
             manager.beginTransaction().replace(R.id.main, Fragment_main()).commit()
         }
         ...
     }
     // 關閉拉出的抽屜式側邊選單
     drawer_layout.closeDrawer(GravityCompat.START)
     return true
}

實作成果

查看詳細 Code > GitHub

tags: Android Kotlin Navigation Drawer Activity``supportActionBar onNavigationItemSelected