使用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" ><RelativeLayoutandroid:id="@+id/fragment_layout"android:layout_width="match_parent"android:layout_height="match_parent" ><RelativeLayoutandroid:id="@+id/title_bar"android:layout_width="match_parent"android:layout_height="48dp"android:background="#63B8FF" ><ImageViewandroid:id="@+id/leftmenu"android:layout_width="48dp"android:layout_height="48dp"android:padding="12dp"android:src="@drawable/menu" /><TextViewandroid:layout_width="wrap_content"android:layout_height="48dp"android:layout_centerInParent="true"android:gravity="center"android:text="Title Bar" /><ImageViewandroid:id="@+id/rightmenu"android:layout_width="48dp"android:layout_height="48dp"android:layout_alignParentRight="true"android:padding="12dp"android:src="@drawable/p_center" /></RelativeLayout><LinearLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/title_bar"android:orientation="vertical" /></RelativeLayout><RelativeLayoutandroid:id="@+id/left"android:layout_width="200dp"android:layout_height="match_parent"android:layout_gravity="left"android:background="@android:color/white" ><ListViewandroid:id="@+id/left_listview"android:layout_width="match_parent"android:layout_height="match_parent" ></ListView></RelativeLayout><RelativeLayoutandroid:id="@+id/right"android:layout_width="260dp"android:layout_height="match_parent"android:layout_gravity="right"android:background="#BCEE68" ><ImageViewandroid:id="@+id/p_pic"android:layout_width="72dp"android:layout_height="72dp"android:layout_centerInParent="true"android:src="@drawable/p_pic" /><TextViewandroid: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;}@Overridepublic int getCount() {if (list != null) {return list.size();}return 0;}@Overridepublic Object getItem(int position) {if (list != null) {return list.get(position);}return null;}@Overridepublic long getItemId(int position) {return list.get(position).getId();}@Overridepublic 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() {@Overridepublic void onClick(View v) {drawerLayout.openDrawer(Gravity.LEFT);}});
其实很简单,直接调用DrawerLayout的openDrawer方法,参数传Gravity.LEFT表示让左边的侧拉菜单出来,参数如果传Gravity.RIGHT,则表示让右边的侧拉菜单出来。好了,当左边的侧拉菜单出来之后,我希望点击菜单的每一个item,主界面都会有所反应,即当我点击“新闻”,主界面显示新闻内容,当我点击”订阅“,主界面显示订阅的内容,这个也很好实现,首先,点击事件不用说,就是ListView的setOnItemClickListener,点击之后,我们的主界面会显示相应的Fragment,即,如果点击了新闻,则注解卖弄显示新闻的Fragment,如果点击了订阅,则主界面显示订阅的Fragment,看代码:
listView.setOnItemClickListener(new OnItemClickListener() {@Overridepublic 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
使用DrawerLayout实现侧拉菜单相关推荐
- 使用DrawerLayout实现QQ5.0侧拉菜单效果
在上一篇文章中,我们介绍了怎么使用DrawerLayout来实现一个简单的侧拉菜单(使用DrawerLayout实现侧拉菜单),也就是我们常说的抽屉效果,GitHub上类似效果的实现方式非常多,实现出 ...
- 界面无小事(六):来做个好看得侧拉菜单!
界面无小事(一): RecyclerView+CardView了解一下 界面无小事(二): 让RecyclerView展示更多不同视图 界面无小事(三):用RecyclerView + Toolbar ...
- Android SlidingMenu 开源项目 侧拉菜单的使用(详细配置)
SlidingMenu作为最常用到的几个开源项目之一,最初,这个是在IOS上有的,之后被应用到了android上,在google自己原生态的侧拉菜单NavigationDrawer没出现之前,这个效果 ...
- android 抽屉组件,Android组件之DrawerLayout实现抽屉菜单
DrawerLayout组件同样是V4包中的组件,也是直接继承于ViewGroup类,所以这个类也是一个容器类. 抽屉菜单的摆放和布局通过android:layout_gravity属性来控制,可选值 ...
- toolbar + DrawerLayout 实现抽屉菜单
编写公共toolbar+DrawerLayout 布局文件: <?xml version="1.0" encoding="utf-8"?> < ...
- DrawerLayout实现侧滑菜单效果
众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用 ...
- HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
- TML+CSS+JS大作业:腾讯课堂首页 1页 侧拉菜单
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 家公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与 ...
- android绘制心电图
android绘制心电图 最近在做一个医疗的app项目,需要通过蓝牙获取心电仪的数据然后绘制心电图,此demo可以直接用! https://download.csdn.net/download/ora ...
最新文章
- Java学习总结:26
- mysql 查看当前事务id,MySQL 如何查询当前最新事务ID
- 这些资源网站为什么能获得5万知乎大佬推荐,而我错失了什么吗?
- “含光”剑出,谁与争锋?阿里重磅发布首颗AI芯片含光800
- MSSQL 从备份文件还原数据库脚本
- [SDOI2015]星际战争
- 从零开始带你一步一步使用YOLOv3测试自己的数据
- 程序员求助:被领导强行要求写Bug该怎么办?网友的回答让我笑翻
- java情人节_情人节写给女朋友Java Swing代码程序
- javascript中的call()和apply()方法 - 原创实例
- SQL Server 中的例程分析
- Nokia PC 套件版本及在不同Windows 上的安装问题
- CAD2016入门教程
- C6678信号处理板学习资料:基于6U VPX TMS320C6678+XC7K325T 的信号处理板
- Canon背后的故事
- canopen 报文格式_CANopen协议报文处理
- 上手Pandas,带你玩转数据(6)-- 摆脱对pandas可视化丑图的刻板印象吧
- 群狼调研开展旅游市场第三方满意度调查
- DAppStore率先集成ChatGPT助力App安全开发
- 图片怎么压缩小于1m?
热门文章
- Android--四大组件 (万字详细解读!!!)
- Autodesk AutoCAD 2024(CAD 2024)安装破解图文教程
- Linux系统基础4
- 初次安装mysql8 设置密码为root
- 计算机听觉要实现的核心功能,用于视觉任务的 CNN 为何能在听觉任务上取得成功?...
- lol服务器维护多久,LOL服务器炸了?说好的12点,硬生生维护了一天?建议补偿二十层...
- leaflet添加鹰眼图,并切换鹰眼图(三)
- arcgis js for JavaScript 4.X 3D小车移动轨迹动画
- 写在SWOT分析之后
- 关于函数的局部变量与全局变量