使用Android DrawLayout實現側邊欄功能
“千呼萬喚始出來,猶抱琵琶半遮面”,白居易的《琵琶行》中,兩句話將琵琶女的難言之痛與羞澀情態描寫的逼真生動,一個抱著琵琶的女子呼之欲出,她的羞澀之美令人久久難以忘懷。
生活中有含蓄之美,程式設計也不能將所有的功能一下子全部展示給使用者,當然這也無法實現。這個時候新增側邊欄就成為了一個很好的選擇。
DrawerLayout是V4 Library包中實現了側滑選單效果的控制元件,可以說drawerLayout是因為第三方控制元件如MenuDrawer等的出現之後,google借鑑而出現的產物。drawerLayout分為側邊選單和主內容區兩部分,側邊選單可以根據手勢展開與隱藏(drawerLayout自身特性),主內容區的內容可以隨著選單的點選而變化。
佈局檔案:
<?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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout_home" android:layout_width="match_parent" android:layout_height="match_parent"> <主頁面顯示內容 android:id="@+id/refreshLayout" android:layout_width="match_parent" android:layout_height="match_parent" > </主頁面顯示內容> <LinearLayout android:id="@+id/right_draw" android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="end" android:orientation="vertical"> <TextView android:layout_width="240dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginTop="10dp" android:text="側邊欄" android:textColor="@color/black" android:textSize="20sp" /> </LinearLayout> </android.support.v4.widget.DrawerLayout>
首先需要將根目錄設定為DrawerLayout,其佈局可以包括兩個部分,這兩個部分既可以是一個控制元件也可以是一個佈局,其中第一個部分是預設顯示的主體內容,第二部分為側邊欄內容,當然它的大小和位置都可以通過屬性來進行修改。值得注意的是需要新增layout_gravity屬性來對這部分進行隱藏。設定android:layout_gravity="start"時側邊欄從左側進入,android:layout_gravity="end"時從右側進入,若沒有設定則會對頁面主體部分的內容造成覆蓋。
初始化程式碼:
public class HomeFragment extends LazyFragment implements View.OnClickListener { private DrawerLayout drawerLayout; private LinearLayout right; @Override protected void onCreateViewLazy(Bundle savedInstanceState) { super.onCreateViewLazy(savedInstanceState); setContentView(R.layout.fragment_home); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout_home); right = (LinearLayout) findViewById(R.id.right_draw); }
控制側邊欄狀態的程式碼:
drawerLayout.closeDrawer(right); //開啟側邊欄
drawerLayout.openDrawer(right); //關閉側邊欄
新增監聽器監聽側邊欄的狀態:
drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
//滑動時
}
@Override
public void onDrawerOpened(View drawerView) {
//開啟時
}
@Override
public void onDrawerClosed(View drawerView) {
//關閉時
}
@Override
public void onDrawerStateChanged(int newState) {
//改變時
}
});
到這裡側邊欄基本上就做好了,還是仔細實驗你會發現,當我們在側邊欄上進行操作時,頁面主體部分的監聽事件還是會被觸發。那麼這個問題怎麼解決呢?目前我採用的解決辦法是為LinearLayout right設定OnClickListener,裡面的onClick()方法什麼都不寫。
另外,當一個主頁面有兩個側邊欄時會用到鎖定功能,設定方法如下:
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED,Gravity.END); //鎖定右面的側滑選單,不能通過手勢關閉或者開啟,只能通過程式碼開啟!即呼叫openDrawer方法!
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED,Gravity.END); //解除鎖定狀態,即可以通過手勢關閉側滑選單
好了,今天就分享到這裡吧!最近在忙著寫開題報告,整個人都不好了(┬_┬)