Android使用DrawerLayout實現(xiàn)雙向側滑菜單

更新時間：2017年11月30日 11:24:05 作者：潘建成

這篇文章主要為大家詳細介紹了Android使用DrawerLayout實現(xiàn)雙向側滑菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

在android開發(fā)中，很多的app都有使用側滑菜單，有的是自定義控件來實現(xiàn)側滑菜單，但是android給我們提供了DrawerLayout類來實現(xiàn)側滑菜單，側滑效果很好，今天我就說說怎么去使用它來實現(xiàn)側滑菜單。

實現(xiàn)

我們先來看一下效果圖：

這里我們實現(xiàn)的雙向側滑菜單，在界面上部加入了兩個按鈕，點擊就會打開菜單或者關閉菜單，當然也可以自己去滑動。

布局文件的代碼：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 <RelativeLayout 
 android:layout_width="fill_parent"
 android:layout_height="45dp"
 android:background="#00ff00"
 >
 <Button 
 android:id="@+id/btn_toggle_left"
 android:layout_width="wrap_content"
 android:layout_height="50dp"
 android:text="左開關"
 />
 <Button 
 android:layout_alignParentRight="true"
 android:id="@+id/btn_toggle_right"
 android:layout_width="wrap_content"
 android:layout_height="50dp"
 android:text="右開關"
 />
 </RelativeLayout>
 <android.support.v4.widget.DrawerLayout
 android:id="@+id/drawerlayout"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <!-- 主布局，位于DrawerLayout的第一次子控件，位置不可以放錯 -->
 <FrameLayout 
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <ImageView 
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="@drawable/mainbackground"
 />
 </FrameLayout>
 <!-- 左側菜單 -->
 <RelativeLayout
 android:id="@+id/layout_menu_left"
 android:layout_gravity="start" 
 android:layout_width="150dp"
 android:layout_height="fill_parent"
 android:background="#000"
 >
 <TextView
 android:textColor="#ffffff"
 android:gravity="center"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="左側菜單"
 />
 </RelativeLayout>
 <!-- 右側菜單 -->
 <RelativeLayout
 android:id="@+id/layout_menu_right"
 android:layout_gravity="end" 
 android:layout_width="150dp"
 android:layout_height="fill_parent"
 android:background="#000"
 >
 <TextView
 android:textColor="#ffffff"
 android:gravity="center"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="右側菜單"
 />
 </RelativeLayout>

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

MainActivity的代碼：

public class MainActivity extends Activity implements OnClickListener{

 private DrawerLayout mDrawerLayout;
 private View v_menu_left,v_menu_right;
 private Button btn_left,btn_right;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 initView();
 initListener();
 }

 private void initListener() {
 btn_left.setOnClickListener(this);
 btn_right.setOnClickListener(this);
 }

 private void initView() {
 mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
 v_menu_left = findViewById(R.id.layout_menu_left);
 v_menu_right = findViewById(R.id.layout_menu_right);
 btn_left = (Button) findViewById(R.id.btn_toggle_left);
 btn_right = (Button) findViewById(R.id.btn_toggle_right);
 }

 @Override
 public void onClick(View v) {
 if(v.getId()==R.id.btn_toggle_left){
 toggleLeft();
 }else if(v.getId()==R.id.btn_toggle_right){
 toggleRight();
 }
 }

 private void toggleRight() {
 if(mDrawerLayout.isDrawerOpen(v_menu_right)){
 mDrawerLayout.closeDrawer(v_menu_right);
 }else{
 mDrawerLayout.openDrawer(v_menu_right);
 }

 }

 private void toggleLeft() {
 if(mDrawerLayout.isDrawerOpen(v_menu_left)){
 mDrawerLayout.closeDrawer(v_menu_left);
 }else{
 mDrawerLayout.openDrawer(v_menu_left);
 }
 }

}

在布局文件中，第一個子控件是主布局，就是顯示在界面中央的位置，然后第二個和第三個控件作為左菜單和右菜單在兩側隱藏，然后滑動的時候慢慢顯示出來。在第二和第三個控件的屬性設置里，需要注意的是android:layout_gravity屬性，這個屬性決定了菜單的位置是左還是右。當設置成“start”的時候，菜單位于左側，當設置成“end”的時候，菜單位于右側，所以菜單的位置和控件的順序沒有關系，只和屬性值有關。

然后在MainActivity里面，我們得到DrawerLayout 對象，和兩個菜單對象，對按鈕添加點擊方法。拿左菜單來說，當點擊按鈕的時候，如果左菜單是關閉的，那么我們就打開菜單，如果菜單是打開的，那么我們就關閉它。這就需要知道DrawerLayout的幾個常用方法了。

isDrawerOpen(View v)

該方法用來判斷菜單是否處于打開狀態(tài)，傳入的是一個View，表示菜單的View，也就是左菜單或者是右菜單。因為菜單的數(shù)量有一個或者以上，所以需要傳入不同的View來判斷是哪一個菜單。

closeDrawer(View v)

該方法用來關閉菜單，傳入的也是菜單的View

openDrawer(View v)

該方法用來打開菜單，同關閉菜單的操作相似。

用這三個方法基本就可以實現(xiàn)上面的效果了，好了，簡單的雙向側滑菜單就完成了，不需要使用自定義的控件，自定義的控件可能有更加豐富的動畫效果，這就需要大家自己去是實現(xiàn)了。

源碼下載點這里。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: