iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
Software Development

英國研究顯示,連續30天用Kotlin開發Android將有益於身心健康系列 第 28

Android Kotlin 實作 Day 18: SideMenu(Navigation Drawer Activity)

使用語言

  • 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"/>
      
  4. 設定了主頁內容的 app_bar_main Layout

    裡面的外層為一個 CoordinatorLayout

    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

上一篇
Android Kotlin 實作 Day 17:PullToRequest(SwipeRefreshLayout+CardView)
下一篇
Android Kotlin 實作 Day 19:LittleBirdSound(上)(MediaPlayer)
系列文
英國研究顯示,連續30天用Kotlin開發Android將有益於身心健康30

尚未有邦友留言

立即登入留言