FC 12.3.1 滑動選單DrawerLayout
阿新 • • 發佈:2018-11-24
滑動選單是 Material Design 中最常見的效果之一。
所謂的滑動選單就是將選單選項隱藏起來,通過滑動來將選單顯示出來。既節省了螢幕空間,又實現了非常好的動畫效果。藉助DrawerLayout控制元件來實現滑動選單。
我們接著上一個toolbar介面,修改activity_main佈局:
- 最外層控制元件使用DrawerLayout(由support-v4庫提供),DrawerLayout中放置了兩個直接子控制元件。
- 第一個控制元件是FramLayout,作為主螢幕中顯示的內容;
- 第二個子控制元件使用了一個TextView,用於作為滑動選單中顯示的內容(在這裡使用什麼都可以,並不一定非得使用Textview)。第二個子控制元件的layout_gravity
<?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
執行,效果如圖