Kotlin 開發第 18 天 SideMenu ( DrawerActivity )

側邊欄是一個非常常用的一種功能,這次在 Android 嘗試通過做一個。

  • 提供一個側邊欄
  • 可以展開 /  收起 側邊欄
  • 側邊欄中點選 item 可以切換主畫面的內容

Components

  • Toolbar
  • DrawerActivity
  • Fragment

SideMenu

通過一個 DrawerActivity 做為容器,NavigationView 做為側邊欄,
當使用者點選不同的 item 時,通知 DrawerActivity 去切換當中的 fragment.

首先需要在 app/build.gradle 引入依賴包

Layout

建立側邊欄的內容

建立 /menu/drawer_view.xml 文件

通過 Group 可以實現類似 iOS 的 Section 的功能,可以為 Header 設定文字,並且會得到一條分割線。

Header

我們建立 /res/layout/nav_header.xml 文件來為 NavigationView 提供一個 Header

通過在 activity_detail.xml 文件中的 <android.support.design.widget.NavigationView /> 加入屬性就可以引用了

建立 Toolbar

為了能夠可以讓側邊欄可以在 ActionBar 上滑動,我們需要建立 Toolbar

/res/layout/toolbar.xml

需要特別注意的是這個屬性,這個值會影響 statusBar 是否會獨立佔有一定的空間。


DrawerActivity

我們建立了一個名為 DetailActiviy,並提供了幾個屬性,並初始化他們。

設定漢堡按鈕

設定 DrawerActivity 初始化的 Fragment

建立一個 listener 用來監控使用者點擊側邊欄的狀況

發現使用者點擊時,我們將會做幾個動作

  • 切換 DrawerActivity 中的 Fragement
  • 修改 Title
  • 設定 NavigationView 當前 checked 的 item 樣式
  • 關閉 Drawer

和 iOS 不一樣的地方,在 drawer_view.xml 中,我們已經給每一個 item 設定一個 id,
所以我們也會通過這些 id 來判斷被 click 的 item 是哪個。

透明的 StatusBar

通過在 /res/values-v19/styles.xml 中的設定,可以讓 StatusBar 變透明


Layout Editor

和 iOS 相比 Android 更方便的地方

在 Android 開發中,使用 Layout Editor 就像是 iOS 的 Storyboard 一樣,但有個更方便的地方。

如果我們建立了兩個 layout 文件(相當於 iOS 的兩個 xib 文件),這時候在其中一個 layout 中引入另外一個 layout ,

Android 的 Editor 是可以直接看到畫面呈現的效果的,而 iOS 需要在模擬器中才看得到。

初始化方法

在 iOS 中,我們通過下面的方法來將 XIB 中設定好的介面給初始化出來

而在 Android 中,可以通過下面的方法(runtime 中初始化)

也可以直接在 Layout Editor 的 xml 文件中加入


筆記

  • TODO: 在側邊欄加入可展開多層的功能
  • TODO: 更多 customise 的 layout

參考

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *