使用DrawerLayout實現側拉菜單

jopen 10年前發布 | 92K 次閱讀 Android開發移動開發 DrawerLayout

側拉菜單在android應用中非常常見，它的實現方式太多了，今天我們就說說使用Google提供的DrawerLayout來實現側拉菜單效果，先來看張效果圖：

DrawerLayout的實現其實非常簡單，只要按照既有的規范來寫即可，先來看看布局文件：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <RelativeLayout
        android:id="@+id/fragment_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <RelativeLayout
            android:id="@+id/title_bar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#63B8FF" >

            <ImageView
                android:id="@+id/leftmenu"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:padding="12dp"
                android:src="@drawable/menu" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="48dp"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="Title Bar" />

            <ImageView
                android:id="@+id/rightmenu"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_alignParentRight="true"
                android:padding="12dp"
                android:src="@drawable/p_center" />
        </RelativeLayout>

        <LinearLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/title_bar"
            android:orientation="vertical" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/left"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="@android:color/white" >

        <ListView
            android:id="@+id/left_listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </ListView>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/right"
        android:layout_width="260dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="#BCEE68" >

        <ImageView
            android:id="@+id/p_pic"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_centerInParent="true"
            android:src="@drawable/p_pic" />

        <TextView
            android:id="@+id/right_textview"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_below="@id/p_pic"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="12dp"
            android:text="個人中心"
            android:textColor="@android:color/black"
            android:textSize="14sp" />
    </RelativeLayout>

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

首先，根布局就是DrawerLayout，在根布局之后又主要分為三大塊，第一塊就是我們主界面的內容，第二塊是左邊拉出來的布局，第三塊是右邊拉出來的布局（不需要右邊側拉就不用寫，這樣的話整個布局就只分為兩大塊），那么系統怎么知道我們這個布局是主布局還是側拉菜單的布局？請注意左邊側拉菜單布局android:layout_gravity="left"這個屬性和右邊菜單布局的android:layout_gravity="right"這個屬性，哈哈，這下應該明白了吧，系統通過layout_gravity屬性的值來判斷這個布局是左邊菜單的布局還是右邊菜單的布局，如果沒有這個屬性，那不用說，肯定是主界面的布局。

好了，布局文件寫好之后，我們的側拉效果其實就已經可以實現了，但是你發現左邊拉出來什么東西都沒有，那是因為還沒有數據，所以我們要在MainActivity中初始化左邊布局的ListView，給ListView賦值這個想必大家都會，我就直接貼代碼了：

listView = (ListView) findViewById(R.id.left_listview);
initData();
adapter = new ContentAdapter(this, list);
        listView.setAdapter(adapter);

初始化數據的方法：

 private void initData() {
        list = new ArrayList<ContentModel>();

        list.add(new ContentModel(R.drawable.doctoradvice2, "新聞", 1));
        list.add(new ContentModel(R.drawable.infusion_selected, "訂閱", 2));
        list.add(new ContentModel(R.drawable.mypatient_selected, "圖片", 3));
        list.add(new ContentModel(R.drawable.mywork_selected, "視頻", 4));
        list.add(new ContentModel(R.drawable.nursingcareplan2, "跟帖", 5));
        list.add(new ContentModel(R.drawable.personal_selected, "投票", 6));
    }

ContentModel類：

public class ContentModel {

    private int imageView;
    private String text;
    private int id;


    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public ContentModel() {
    }

    public ContentModel(int imageView, String text, int id) {
        this.imageView = imageView;
        this.text = text;
        this.id = id;
    }

    public int getImageView() {
        return imageView;
    }

    public void setImageView(int imageView) {
        this.imageView = imageView;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

}

數據適配器：

public class ContentAdapter extends BaseAdapter {

    private Context context;
    private List<ContentModel> list;

    public ContentAdapter(Context context, List<ContentModel> list) {
        super();
        this.context = context;
        this.list = list;
    }

    @Override
    public int getCount() {
        if (list != null) {
            return list.size();
        }
        return 0;
    }

    @Override
    public Object getItem(int position) {
        if (list != null) {
            return list.get(position);
        }
        return null;
    }

    @Override
    public long getItemId(int position) {
        return list.get(position).getId();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHold hold;
        if (convertView == null) {
            hold = new ViewHold();
            convertView = LayoutInflater.from(context).inflate(
                    R.layout.content_item, null);
            convertView.setTag(hold);
        } else {
            hold = (ViewHold) convertView.getTag();
        }

        hold.imageView = (ImageView) convertView
                .findViewById(R.id.item_imageview);
        hold.textView = (TextView) convertView.findViewById(R.id.item_textview);

        hold.imageView.setImageResource(list.get(position).getImageView());
        hold.textView.setText(list.get(position).getText());
        return convertView;
    }

    class ViewHold {
        public ImageView imageView;
        public TextView textView;
    }

}

每個Item的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" 
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:gravity="center">

    <ImageView 
        android:id="@+id/item_imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"/>

    <TextView 
        android:id="@+id/item_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="aa"
        android:textSize="20dp"/>

</LinearLayout>

好了，給左邊的側拉菜單中的ListView賦值之后，在把它拉出來，這下就全都有數據了，但是我除了想通過滑動讓側拉菜單出來之外，我還希望在App的標題欄上有一個按鈕，點擊之后左邊的側拉菜單也會出來，這要怎么實現？看代碼：

先將原有的標題欄隱藏：

getActionBar().hide();

然后：

leftMenu = (ImageView) findViewById(R.id.leftmenu);
leftMenu.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                drawerLayout.openDrawer(Gravity.LEFT);
            }
        });

其實很簡單，直接調用DrawerLayout的openDrawer方法，參數傳Gravity.LEFT表示讓左邊的側拉菜單出來，參數如果傳Gravity.RIGHT，則表示讓右邊的側拉菜單出來。好了，當左邊的側拉菜單出來之后，我希望點擊菜單的每一個item，主界面都會有所反應，即當我點擊“新聞”，主界面顯示新聞內容，當我點擊”訂閱“，主界面顯示訂閱的內容，這個也很好實現，首先，點擊事件不用說，就是ListView的setOnItemClickListener，點擊之后，我們的主界面會顯示相應的Fragment，即，如果點擊了新聞，則注解賣弄顯示新聞的Fragment，如果點擊了訂閱，則主界面顯示訂閱的Fragment，看代碼：

     listView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                FragmentTransaction bt = fm.beginTransaction();
                switch ((int) id) {
                case 1:
                    bt.replace(R.id.content, new NewsFragment());
                    break;
                case 2:
                    bt.replace(R.id.content, new SubscriptionFragment());
                    break;

                default:
                    break;
                }
                bt.commit();
                drawerLayout.closeDrawer(Gravity.LEFT);
            }
        });

每次點擊之后，就用相應的Fragment替換主界面的LinearLayout，當然，替換完成之后要記得關閉左邊的側拉菜單，傳入的參數為Gravity.LEFT表示關閉左邊的側拉菜單，如果傳入的菜單為Gravity.RIGHT表示關閉右邊的側拉菜單。這里兩個Fragment都很簡單，我就不貼源碼了，大家一會直接下載Demo看。

右邊的側拉菜單和左邊一樣，我就不贅述了，大家有什么問題歡迎留言討論。

本文參考：

1.Android 抽屜效果的導航菜單實現

2.Android 使用Drawerlayout仿網易新聞客戶端抽屜模式

Demo下載https://github.com/lenve/DrawerLayout

來自：http://blog.csdn.net/u012702547/article/details/49562747

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1446429625717.html

Android開發移動開發 DrawerLayout