侧拉菜单在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看。
右边的侧拉菜单和左边一样,我就不赘述了,大家有什么问题欢迎留言讨论。
本文参考:
2.Android 使用Drawerlayout仿网易新闻客户端抽屉模式
Demo下载https://github.com/lenve/DrawerLayout