快捷導(dǎo)航

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

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

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

前言

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

實(shí)現(xiàn)

我們先來(lái)看一下效果圖：

這里我們實(shí)現(xiàn)的雙向側(cè)滑菜單，在界面上部加入了兩個(gè)按鈕，點(diǎn)擊就會(huì)打開(kāi)菜單或者關(guān)閉菜單，當(dāng)然也可以自己去滑動(dòng)。

布局文件的代碼：

<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="左開(kāi)關(guān)"
 />
 <Button 
 android:layout_alignParentRight="true"
 android:id="@+id/btn_toggle_right"
 android:layout_width="wrap_content"
 android:layout_height="50dp"
 android:text="右開(kāi)關(guān)"
 />
 </RelativeLayout>
 <android.support.v4.widget.DrawerLayout
 android:id="@+id/drawerlayout"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <!-- 主布局，位于DrawerLayout的第一次子控件，位置不可以放錯(cuò) -->
 <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>
 <!-- 左側(cè)菜單 -->
 <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="左側(cè)菜單"
 />
 </RelativeLayout>
 <!-- 右側(cè)菜單 -->
 <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="右側(cè)菜單"
 />
 </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);
 }
 }

}

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

然后在MainActivity里面，我們得到DrawerLayout 對(duì)象，和兩個(gè)菜單對(duì)象，對(duì)按鈕添加點(diǎn)擊方法。拿左菜單來(lái)說(shuō)，當(dāng)點(diǎn)擊按鈕的時(shí)候，如果左菜單是關(guān)閉的，那么我們就打開(kāi)菜單，如果菜單是打開(kāi)的，那么我們就關(guān)閉它。這就需要知道DrawerLayout的幾個(gè)常用方法了。

isDrawerOpen(View v)

該方法用來(lái)判斷菜單是否處于打開(kāi)狀態(tài)，傳入的是一個(gè)View，表示菜單的View，也就是左菜單或者是右菜單。因?yàn)椴藛蔚臄?shù)量有一個(gè)或者以上，所以需要傳入不同的View來(lái)判斷是哪一個(gè)菜單。

closeDrawer(View v)

該方法用來(lái)關(guān)閉菜單，傳入的也是菜單的View

openDrawer(View v)

該方法用來(lái)打開(kāi)菜單，同關(guān)閉菜單的操作相似。

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

源碼下載點(diǎn)這里。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: