使用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看。
右边的侧拉菜单和左边一样,我就不赘述了,大家有什么问题欢迎留言讨论。
本文参考:
2.Android 使用Drawerlayout仿网易新闻客户端抽屉模式
Demo下载https://github.com/lenve/DrawerLayout
使用DrawerLayout实现侧拉菜单的更多相关文章
- 使用DrawerLayout实现QQ5.0侧拉菜单效果
在上一篇文章中,我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单(使用DrawerLayout实现侧拉菜单),也就是我们常说的抽屉效果,GitHub上类似效果的实现方式非常多,实现出 ...
- DragLayout: QQ5.0侧拉菜单的新特效
一.项目概要 1.1 项目效果如图: 1.2 需要使用到的技术 ViewDragHelper: 要实现和QQ5.0侧滑的特效,需要借助谷歌在2013年I/O大会上发布的ViewDragHelper ...
- android 5.X Toolbar+DrawerLayout实现抽屉菜单
前言 android5.X新增的一个控件Toolbar,这个控件比ActionBar更加自由,可控,因为曾经的ActionBar的灵活性比較差,所以google逐渐使用Toolbar替代Action ...
- 仿qq的侧拉菜单效果
自定义控件 import android.animation.ArgbEvaluator; import android.animation.FloatEvaluator; import androi ...
- Android5.0之NavigationView的使用
导航菜单的制作方式多种多样,网上也有各种炫酷效果的具体实现方式,那么今天我主要是想来说说Google在Android5.0之后推出的NavigationView的具体使用方式. NavigationV ...
- [UI]抽屉菜单DrawerLayout分析(一)
本文转载于:http://www.cnblogs.com/avenwu/archive/2014/04/16/3669367.html 侧拉菜单作为常见的导航交互控件,最开始在没有没有android官 ...
- AndroidUI 侧滑菜单 DrawerLayout的使用
直接上代码: activity_main.xml: <android.support.v4.widget.DrawerLayout xmlns:android="http://sche ...
- android 应用架构随笔五(ActionBar与侧滑菜单DrawerLayout)
ActionBar(V7)的添加非常简单,只需要在AndroidManifest.xml中指定Application或Activity的theme是Theme.Holo或其子类就可以了,在Androi ...
- android L 新控件侧滑菜单DrawerLayout 使用教程
介绍 drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后,google借鉴而出现的产 ...
随机推荐
- linux shell sleep/wait(转载)
linux shell sleep/wait(转载) 2007-04-27 18:12 bash的基本配置是由配置文件组成的./etc/profile称之为shell的全局配置文件.另外一个文件在个人 ...
- C#日期格式精确到毫秒以及上下午
有时候我们要对时间进行转换,达到不同的显示效果 默认格式为:2009-6-24 14:33:34 如果要换成成200906,06-2009,2009-6-24或更多的该怎么办呢 我们要用到:DateT ...
- git checkout
git checkout <branch_name> <file> 检出具体分支上的 具体文件 git checkout --merge <branch_ ...
- Emeditor所有快捷键操作
新建文本 Ctrl+N 创建一个新的文本文件. 打开 Ctrl+O 打开一个已存在的文件. 保存 Ctrl+S 保存当前文件. 重新 ...
- URAL1635. Mnemonics and Palindromes(DP)
链接 先初始化一下所有的回文串 再O(n*n)DP 输出路径dfs 刚开始存所有回文 ME了 后来发现用不着 改了改了OK了 数据还挺强 #include <iostream> #incl ...
- java里的静态变量是放在了堆内存还是栈内存?
堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基本类型和对象引用,只存放对 ...
- PHP 'ext/gd/gd.c'信息泄漏漏洞
漏洞版本: PHP 5.5.x 漏洞描述: CVE ID:CVE-2014-2020 PHP是一种HTML内嵌式的语言. PHP 'ext/gd/gd.c'没有检查数据类型,允许远程攻击者使用字符串或 ...
- 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物
探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包 ...
- spring--资源--4
4.1.1 概述 在日常程序开发中,处理外部资源是很繁琐的事情,我们可能需要处理URL资源.File资源资源.ClassPath相关资源.服务器相关资源(JBoss AS 5.x上的VFS资源)等等 ...
- imdisk命令行使用及配置
imdisk是一个开源的虚拟磁盘软件,集虚拟光驱,文件虚拟光驱,映射物理磁盘,映射物理内存等功能 如果使用devio--Device I/O Service,可以映射网络磁盘等. 通用于windows ...