界面无小事(六):来做个好看得侧拉菜单!
界面无小事(一): RecyclerView+CardView了解一下
界面无小事(二): 让RecyclerView展示更多不同视图
界面无小事(三):用RecyclerView + Toolbar做个文件选择器
界面无小事(四):来写个滚动选择器吧!
界面无小事(五):自定义TextView
界面无小事(六):来做个好看得侧拉菜单!
github传送门
目录
- 效果图
- 前言
- DrawerLayout
- Toolbar
- fragment
- NavigationView
- CircleImageView
- 最后
效果图
不多废话, 来看效果图, 喜欢再看源码:
前言
这次来说说侧拉菜单. 虽然现在手机越来越大, 但也不至于说直接把侧拉菜单全部展示出来, 因为很多时候, 它没有展示的必要. 这次会涉及的内容是DrawerLayout, Toolbar, NavigationView, 都是与material design相关的.
DrawerLayout
看下主视图布局代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/dl_main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.so.knowledge.ui.activity.DrawerLayout.DrawerActivity"><RelativeLayoutandroid:id="@+id/ll_content"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid:id="@+id/tb_main"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/colorPrimary"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /><TextViewandroid:id="@+id/tv_content"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="@string/username"android:textColor="@android:color/holo_blue_dark"android:textSize="@dimen/thirty_sp" /></RelativeLayout><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"android:background="@android:color/white"><android.support.v7.widget.RecyclerViewandroid:id="@+id/rv_fun_list"android:layout_width="match_parent"android:layout_height="wrap_content"android:scrollbars="vertical" /></RelativeLayout><android.support.design.widget.NavigationViewandroid:id="@+id/nav_user_info"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="end"app:headerLayout="@layout/nav_header"app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
复制代码
这里在DrawerLayout中塞进了三个布局, android:layout_gravity="end"代表右侧拉布局, android:layout_gravity="start"代表左侧拉布局, 没写代表主界面布局. 具体细节后面再说, 记得导包:
compile 'com.android.support:design:25.3.1'
复制代码
Toolbar
Toolbar我是很喜欢用的, 可以放置很多按钮, 通过设置隐藏等, 看起来也依然简洁.我在第三篇就写过Toolbar的使用. 然后在效果图中, 点击Toolbar的左侧按钮, 会展开左侧的菜单. 菜单内容就是我在第一篇中写的, 具体代码就是
mDlMain.openDrawer(GravityCompat.START);
. 点击右侧按钮, 会展开右侧菜单, 代码是mDlMain.openDrawer(GravityCompat.END);
, 右侧菜单我们后面再说.
@Override
public boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()) {case android.R.id.home:mDlMain.openDrawer(GravityCompat.START);break;case R.id.username:mDlMain.openDrawer(GravityCompat.END);break;}return true;
}
复制代码
fragment
仔细观察的同学会发现点击左侧菜单的第一个和第二个按钮会切换主界面字符串的颜色, 其实不单单是切换颜色, 我重新放置了fragment. 当然了, 切换fragment不是什么难事.
myRVAdapter.setOnItemClickListener(new MyRVAdapter.OnItemClickListener() {@Overridepublic void onItemClick(View view, int position) {Toast.makeText(getApplicationContext(),"click: " + position, Toast.LENGTH_SHORT).show();FragmentTransaction ft = fm.beginTransaction();switch (position) {case 0:ft.replace(R.id.ll_content, new Fragment1());break;case 1:ft.replace(R.id.ll_content, new Fragment2());break;default:break;}ft.commit();mDlMain.closeDrawer(GravityCompat.START);}@Overridepublic void onItemLongClick(View view, int position) {Toast.makeText(getApplicationContext(),"long click: " + position, Toast.LENGTH_SHORT).show();}
});
复制代码
我最想说的一点就是, 即使切换了fragment, 但是Toolbar依旧是存在的, 这点要注意.
NavigationView
官方文档 这是用来实现右侧菜单的. 主要要实现两个部分, 就是布局文件中写的header和menu部分. header部分是布局代码, 而menu部分是menu代码. 关于CircleImageView部分, 后面有说. 这里要说的是菜单部分, 将两个按钮设置成单选条目组, 就和单选按钮组是一样的了.
<android.support.design.widget.NavigationViewandroid:id="@+id/nav_user_info"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="end"app:headerLayout="@layout/nav_header"app:menu="@menu/nav_menu" />
复制代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="@dimen/hundred_eighty_dp"android:background="@color/colorPrimary"android:padding="@dimen/sixteen_dp"><de.hdodenhof.circleimageview.CircleImageViewxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/civ_avatar"android:layout_width="@dimen/sixty_four_dp"android:layout_height="@dimen/sixty_four_dp"android:layout_centerInParent="true"android:src="@drawable/avatar"app:civ_border_color="@android:color/white"app:civ_border_width="@dimen/two_dp" /><TextViewandroid:id="@+id/tv_email"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:text="@string/email"android:textColor="@android:color/white" /><TextViewandroid:id="@+id/tv_username"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@id/tv_email"android:text="@string/username"android:textColor="@android:color/white" />
</RelativeLayout>
复制代码
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><itemandroid:id="@+id/nav_share"android:icon="@mipmap/ic_launcher"android:title="@string/share" /><itemandroid:id="@+id/nav_loc"android:icon="@mipmap/ic_launcher"android:title="@string/loc" /></group>
</menu>
复制代码
CircleImageView
这是个异常实用的开源项目, 使用起来也很简单, 目的就是把普通图片变成圆形图片, 还可以加个白框或者黑框. 从效果图来看, 还是很不错的.
最后
这次的很简单, 就是融合了之前的内容, 并把google提供的侧拉面板和菜单面板的使用学会, 感谢google, 自己实现就可麻烦了. 喜欢记得点赞, 有意见或者建议评论区见, 暗中关注我也是可以的~
界面无小事(六):来做个好看得侧拉菜单!相关推荐
- 界面无小事(八):RecyclerView增删item
界面无小事(一): RecyclerView+CardView了解一下 界面无小事(二): 让RecyclerView展示更多不同视图 界面无小事(三):用RecyclerView + Toolbar ...
- 运维无小事,小事不运维
序言 运维分为两种,一种是运维服务,一种是系统运维,而里面又可以继续细分,但是总体上来说,一种是对外的,直接 面对客户的,一种是对内的,可能是客户无感知的,例如中断1秒.我们总是喜欢做自己擅长的事,对 ...
- cass怎么添加指北针图例_怎么才能在excel中把表格做的好看?
在日常工作中,数据分析往往不可或缺. 那么如何将图表做的好看? excel操作 分享一些可操作的牛逼图表做法: 1.excel对比图表 第一步:点击插入--图表--插入柱形图或条形图 第二步:选中柱形 ...
- Ubuntu16.04 下的网易云出现网络异常、无法播放,界面无响应问题的统一解决
能够在Linux系统下体验到原生界面的网易云音乐是件不错的事情,但是它总是经常性的出现网络异常,界面无响应的问题 为了听歌的体验,进行深入探究: 首先通过终端启用网易云音乐:sudo netease- ...
- 架构无小事:QQ碰微信 贴吧遇微博
为什么80%的码农都做不了架构师?>>> 架构无小事:QQ碰微信 贴吧遇微博 三十年河东,三十年河西,谁能预知下一个十年?当QQ碰到微信,IM工具开始从PC时代转战移动互联网: ...
- 安全无小事,责任大于天。
俗话说得好"安全无小事",确实安全作为我们生活中的一部分是不可或缺的. 出行安全 我们在过马路的时候一定要走斑马线,不可以走其他无标识的小路,更不要横穿马路.我们要对自己负责,也要 ...
- 【中亦安图】运维无小事之一次导致数据丢失的小变更(10)
第一章 技术人生系列 ·我和数据中心的故事(第十期)·运维无小事之一次导致数据丢失的小变更 中亦安图 | 2016-04-08 22:05 前言 不知不觉,技术人生系列·我和数据中心的故事来到了第十期 ...
- 餐饮公关无小事,从防微杜渐到危机处理都需要重视
文丨公关之家 作者:李姗 引言:民以食为天,吃得好不好.安不安全更是关乎大众切身利益的大事. 餐饮公关无小事,从防微杜渐到危机处理都需要重视 最近几天,麦当劳肯德基汉堡缩水这一话题登上了微博热搜,引起 ...
- sentinel监控界面无显示
在做Sentinel的时候,Sentinel能够监控到服务,但是不管怎么访问接口,都实时监控都为空白,查看日志,报错信息如下: java.util.concurrent.ExecutionExcept ...
最新文章
- 浅谈单片机程序设计中的“分层思想”
- KVM中virtio、vhost 和vhost-user比较(十一)
- 《《python基础》》
- word 段显示在页面最下方_Word你说的白是什么白
- 栈溢出笔记1.9 认识SEH
- 用css3和jquery实现的渐变的动态进度条
- Oracle Golden Gate 系列十六 -- 配置 GG 安全 说明 与 示例
- Android 系统(92)---诊断原生代码崩溃问题
- java实现关键词云_Java synchronized 关键字的实现原理
- [Elasticsearch] 多字段搜索 (二) - 最佳字段查询及其调优
- linux之iconv命令
- PostScript 打印描述语言 介绍
- java 图片渐变消失_透明背景图像与渐变
- 启动jar 日志输出
- C#中二维数组的二维长度
- 自组网灵活补盲|北峰油气田勘测解决方案
- 连推“一案一策”成都人工智能产业“换道超车
- 硅谷安全大腕弓峰敏和卜峥加盟滴滴
- 鼠标更换指针图案和更改typora的主题
- 蝉知 index.php,蝉知CMS建站系统如何设置伪静态
热门文章
- Java8新特性学习_001_(Lambda表达式,函数式接口,方法引用,Stream类,Optional类)
- subst 的使用 创建虚拟盘符
- 2012年3月份工作总结 ~ 之 ~ PDF 作业对应 (虽然这个作业没有什么意思,但是非常值得总结)
- 【Hive】Caused by: MetaException(message:Hive metastore database is not initialized. Please use schema
- 【Oracle】手工建库时启动到nomount状态时错误ORA-09925,ORA-01017
- 【Linux】SecureCRT中按退格键出现^H
- SSM配置后可以访问静态html文件但无法访问其他后台接口的解决方案
- eclipse git 解决冲突 解决 mergetool 不能使用问题
- 也谈Oracle异常: ORA-06502: PL/SQL: 数字或值错误 : 字符串缓冲区太小
- 造成跨域的原因和解决方法