1. 程式人生 > >FC 12.3.1 滑動選單DrawerLayout

FC 12.3.1 滑動選單DrawerLayout

滑動選單是 Material Design 中最常見的效果之一。

所謂的滑動選單就是將選單選項隱藏起來,通過滑動來將選單顯示出來。既節省了螢幕空間,又實現了非常好的動畫效果。藉助DrawerLayout控制元件來實現滑動選單。

我們接著上一個toolbar介面,修改activity_main佈局:

  • 最外層控制元件使用DrawerLayout(由support-v4庫提供),DrawerLayout中放置了兩個直接子控制元件。
  • 第一個控制元件是FramLayout,作為主螢幕中顯示的內容;
  • 第二個子控制元件使用了一個TextView,用於作為滑動選單中顯示的內容(在這裡使用什麼都可以,並不一定非得使用Textview)。第二個子控制元件的layout_gravity
    屬性必須設定,因為我們要告訴DrawerLayout滑動選單是在螢幕的左邊還是右邊(left表示滑動選單在左邊,right表示滑動選單在右邊。指定為start表示會根據系統語言進行判斷,若系統語言是從左往右的,比如漢語、英語,滑動選單就在左邊,如果系統語言是從右往左的,比如阿拉伯語,那麼滑動選單就會在右邊)
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_Layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </FrameLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="this is menu"
        android:textSize="30sp"
        android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>

執行程式,如圖所示:

在toolbar左邊加入一個導航按鈕,點選按鈕也會將滑動該選單的內容展示出來(防止使用者不知道螢幕的左側也可以拖動)。

  • 首先準備一張圖ic_menu.png,放在drawable-xxhdpi目錄下(如果放在drawble目錄下可能會導致實現的效果圖示太大!!!)
  • 呼叫getSupportActionBar得到ActionBar例項,雖然這個ActionBar我們是由toollbar來完成的。然後呼叫setHomeAsUpIndicator方法來設定導航按鈕圖示(實際上toolbar最左側的這個按鈕叫做HomeAsUp按鈕,預設圖示是一個返回的箭頭,用於返回上一個活動)
  • 在onOptionsItemSelected新增單擊事件(HomeAsUp按鈕的id永遠都是android.R.id.home),呼叫mDrawerLayout的openDrawer方法將滑動選單展示出來。為了保證這裡的行為和xml裡定義的一致,這裡我們傳入GravityCompat.START

執行,效果如圖