《Android》『DrawerLayout』- 左側開合選單佈局模式

2016.08.16 / Android 工作筆記, 常用介面佈局 & 資源檔

《Android Developers 參考文獻》

《簡單介紹》

Navigation Drawer 是一種左側開合的導覽選單，其中並結合了 ToolBar 與 FloatingActionButton 等元件，一開始 Google 並沒有提供一個統一的元件，大部分的應用程式必須自行改寫 Menu 或是上網尋找高人的開源碼，而後來這種設計方式越來越普遍，Google 終於才定義了關於此功能的名稱 Navigation Drawer，目的是讓眾多不同的 Android 設計界面，能盡量有一個一致且統一的使用者流程體驗。

在這裡我們要來介紹的是在實作左側開合的導覽選單時所需用到的 DrawerLayout 介面佈局。

《基本用法》

要實作左側開合選單，我們必須使用到 DrawerLayout 這個佈局，這個佈局裡只可以包含兩個 Layout，第一個 Layout 代表主要的介面，第二個 Layout 則代表了左側開合選單的介面，範例程式碼如下 –

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>

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

<android.support.v4.widget.DrawerLayout

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

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<FrameLayout

android:id="@+id/content_frame"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<ListView

android:id="@+id/left_drawer"

android:layout_width="240dp"

android:layout_height="match_parent"

android:layout_gravity="start"

android:choiceMode="singleChoice"

android:divider="@android:color/transparent"

android:dividerHeight="0dp"

android:background="#111"/>

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

activity_main.xml

在 activity_main.xml 中，我們首先加入了一個 DrawerLayout 元件，並在其中加入兩個 Layout ，id 分別為 content_frame 與 left_drawer，依照順序，DrawerLayout 會把第一個 Layout 視為主要介面，第二個 Layout 視為左側開合介面。若是我們想要加入更複雜的介面，則將這兩個介面各用一個 Container Layout 包含即可。

下一篇我們將直接透過 Android Studio 中的 NavigationDrawer 新增專案，來說明如何實作包含 ToolBar、FloatingActionButton 以及 DrawerLayout 佈局的導覽功能。

賽肥膩膩の娛樂生活誌

《Android》『DrawerLayout』- 左側開合選單佈局模式

賽肥膩膩

上 / 下一篇文章

上一篇文章《食記》『章魚燒道頓堀コナモンミューヅアム』- 大阪市中央區難波道頓堀

下一篇文章《Android》『TabLayout、ViewPager』- 利用 TabLayout 搭配 ViewPager 實作 Fragment 之頁籤切換

您可能也喜歡 You may also like

臉書留言

一般留言

發佈留言取消回覆