DrawerLayout来实现侧拉菜单效果

来源：互联网发布：微信刷流量软件编辑：程序博客网时间：2024/04/27 19:43

DrawerLayout来实现侧拉菜单效果，先来看张效果图：

DrawerLayout的实现其实非常简单，只要按照既有的规范来写即可，先来看看布局文件：

[java] view plaincopyprint?
<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赋值这个想必大家都会，我就直接贴代码了：

[java] view plaincopyprint?
listView = (ListView) findViewById(R.id.left_listview);  
initData();  
adapter = new ContentAdapter(this, list);  
        listView.setAdapter(adapter);  

初始化数据的方法：

[java] view plaincopyprint?
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类：

[java] view plaincopyprint?
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;  
    }  
  
}  

数据适配器：

[java] view plaincopyprint?
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的布局文件：

[java] view plaincopyprint?
<?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的标题栏上有一个按钮，点击之后左边的侧拉菜单也会出来，这要怎么实现？看代码：

先将原有的标题栏隐藏：

[java] view plaincopyprint?
getActionBar().hide();  

然后：

[java] view plaincopyprint?
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，看代码：

[java] view plaincopyprint?
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

0 0