Android ToolBar 使用完全解析

ToolBar简介

ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应用也用上了ToolBar,比如常用的知乎软件其顶部导航栏正是使用ToolBar。官方考虑到仍有一部分用户的手机版本号低于5.0,所以,ToolBar也放进了support v7包内,使得低版本的系统也能使用上ToolBar。本文将使用support v7支持包的ToolBar来进行讲解,包括其基本用法、样式定制等知识点。

ToolBar的基本使用

引入support v7支持包

在你项目的build.gradle内输入如下代码,即能引入支持包,该支持包内有能向下兼容的ToolBar:

dependencies {    compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.1.1' }

更改主题

为了能够正常使用ToolBar,我们需要隐藏原来的ActionBar,这个可以在主题中修改,在values/styles.xml中做出如下修改:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> </style>

继承了Theme.Appcompat.Light.NoActionBar主题,这里提一下,这个Theme.AppCompat是支持包内的主题,对应着5.0版本的Theme.Material主题。然后在manifest文件中引用这个主题。

在布局文件中创建这个控件,activity_main.xml文件中,代码如下所示:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="标题" android:textSize="20sp"/> </android.support.v7.widget.Toolbar> </FrameLayout>

在上面,创建了android.support.v7.widget.Toolbar,同时我们在内部放了一个TextView,这是与ActionBar最大的不同,因为ToolBar实际上是一个ViewGroup,支持在其内部放入子View。ok,我们运行程序,得到如下结果:


结果1.png


可以看出ToolBar正常显示,当然了,这只是最简单的用法,接下来我们逐步添加内容、样式,使它看起开更加美,功能更加完善。

ToolBar的完善

一、首先我们考虑,改变ToolBar的颜色

要想改变toolbar的颜色很简单,直接在布局文件中添加一个backgroud属性指定颜色就可以了,但是为了全局考虑,我们可以这样:在values/styles.xml文件中做出如下修改:

<resources><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">#2e8abb</item> <!--浅蓝色--> <item name="colorPrimaryDark">#3A5FCD</item> <!--深蓝色--> </style> </resources>

然后在布局文件中,添加如下属性:

android:background="?attr/colorPrimary"

这样,就能方便对每一个toolbar引用同样的颜色了,我们先看看现在的效果是怎样的:


结果2.png


可以看到,颜色已经改变,同时我们注意到,顶部状态栏的颜色也变成了深蓝色,这是因为添加了"colorPrimaryDark"的属性,使得顶部状态栏随之改变,利用这一特性,我们可以轻松实现“状态栏沉浸”的效果了。当然,这只适用于Android 5.0以上,如果在低版本则这个属性无效。这里再附上一张图(图片来自http://blog.csdn.net/bbld_/article/details/41439715):


样式说明


根据图中的说明,我们可以轻松地在styles.xml文件中定制我们的样式,如果想要改变toolbar的title、subtitle以及menu中文字的颜色,可以利用“textColorPrimary”属性等。

二、添加title、subtitle、logo、导航栏图标

在MainActivity文件先获取控件的实例,接着通过一系列的set方法即可设置,代码如下:

public class MainActivity extends AppCompatActivity { private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Title"); toolbar.setSubtitle("SubTitle"); toolbar.setLogo(R.mipmap.ic_launcher); //设置导航图标要在setSupportActionBar方法之后 setSupportActionBar(toolbar); toolbar.setNavigationIcon(R.mipmap.ic_drawer_home); } }

结果如下:


结果3.png


如果你想修改标题和子标题的字体大小、颜色等,可以调用 setTitleTextColorsetTitleTextAppearancesetSubtitleTextColorsetSubtitleTextAppearance 这些API。当然,这些设置都是支持在xml布局中直接添加的,但是用的不是android:命名空间,而是自定义命名空间,如下所示:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:toolbar="http://schemas.android.com/apk/res-auto" ...> <android.support.v7.widget.Toolbar ... toolbar:logo="@mipmap/ic_launcher" toolbar:title="Title" toolbar:subtitle="Sub Title" toolbar:titleTextColor="#ffffff"> </android.support.v7.widget.Toolbar> </FrameLayout>

三、添加菜单选项图标及点击事件

1.添加菜单选项图标

一般导航条,在其右侧都会有菜单选项,当然ToolBar也是支持自定义菜单的,首先我们在菜单文件中,修改如下:res/menu/menu_main.xml:

<menu 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" tools:context=".MainActivity"> <item android:id="@+id/action_search" android:title="Search" android:icon="@mipmap/ic_search" app:showAsAction="ifRoom"/> <item android:id="@+id/action_notifications" android:title="notifications" android:icon="@mipmap/ic_notifications" app:showAsAction="ifRoom"/> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" android:icon="@mipmap/ic_launcher" app:showAsAction="never"/> </menu>

这里用了这样一个熟悉:app:showAsAction="ifRoom"/"never",app是自定义的命名空间,因为我们的activity继承的是AppCompatActivity,是support v7包的,并不是原生sdk内部的,因此不能使用android:showAsAction,否则会报错。然后ifRoom表示有空间则显示,never表示从不显示,而是会通过overflowwindow显示。
接着我们在Activity中,要重写onCreateOptionsMenu()方法,把这个菜单加载进去:

@Overridepublic boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; }

2.添加点击事件

菜单有了,我们要为菜单添加点击事件,这样菜单才会有实际用途,添加点击事件也很方便,可以这样操作:

//设置导航图标、添加菜单点击事件要在setSupportActionBar方法之后setSupportActionBar(toolbar);toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.action_search: Toast.makeText(MainActivity.this, "Search !", Toast.LENGTH_SHORT).show(); break; case R.id.action_notifications: Toast.makeText(MainActivity.this, "Notificationa !", Toast.LENGTH_SHORT).show(); break; case R.id.action_settings: Toast.makeText(MainActivity.this, "Settings !", Toast.LENGTH_SHORT).show(); break; } return true; } });

结果如下:


结果5.png


可以看到,菜单选项图标正常显示,以及点击事件都正常触发,但是还有一点瑕疵的地方,那就是右上角的三个圆点,是黑色的,与图标格格不入,有没有什么办法改变它呢?答案是有的,可以通过添加样式改变,如下所示:

<resources><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> ... <item name="android:textColorSecondary">#ffffff</item> </style> </resources>

"android:textColorSecondary"属性对应的就是右上角三个圆点的颜色了。改变之后将会变成你要的颜色。

四、其他样式修改

修改Toolbar popup menu样式

我们先点击右上角的三个点,会弹出一个popup menu,如下所示:


结果6.png


可以看到右上角的popup menu是白底黑字,那么有没有什么办法改变它的背景颜色,使菜单显示为黑底白字呢呢?答案是有的,我们可以这样设置:
首先在styles.xml文件中,新建一个主题:

<!-- toolbar弹出菜单样式 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark"> <item name="android:colorBackground">#000000</item> </style>

可以看到这个主题的parent是直接继承自ThemeOverlay.AppCompat.Dark,是支持包的一个主题,并且我们在内部声明了“android:colorBackground”这个属性,我们只要更改这个属性就能变更菜单的背景颜色了。接下来我们在布局文件中引入这个主题,这也很简单,为toolbar添加额外的属性如下:

toolbar:popupTheme="@style/ToolbarPopupTheme"

这样,改几行代码即可修改popup menu的背景颜色了,如下面所示:


结果7.png

修改Toolbar popup menu 弹出位置

我们可以看到,popup menu的位置是过于偏上的,我们还可以修改它的位置,使它处于Toolbar之下,这样看起来可能更美观:
修改styles.xml文件如下:

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark"> <item name="android:colorBackground">#000000</item> <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一个item,用于控制menu--> </style> <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow"> <item name="overlapAnchor">false</item> <!--把该属性改为false即可使menu位置位于toolbar之下--> </style>

效果如下图:


结果8.png

那么到目前为止,对于toolbar的相关使用意见讲述完毕,可以看出toolbar的灵活性很高,能自定义很多样式,我们平常开发也会遇到各种不同的样式,因此toolbar用于取代actionbar是非常合适的。以后如果还有遇到别的样式,我也会分享出来,谢谢。



作者:陈育
链接:http://www.jianshu.com/p/ae0013a4f71a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/455700.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【零散积累】传输文件(sz/rz/scp命令)

来自wiki迁移页面路径&#xff1a;刘旺的主页 / 个人零散积累 / 01> 传输文件&#xff08;sz/rz/scp命令&#xff09; 工作中的传输文件会出现在linux之间&#xff0c;或者linux与windows之间。 一、怎么实现linux与windows之间的文件传输&#xff1f; 1.sz和rz是什么 s…

x264_macroblock_cache_load()

功能:完成将已编码数据参数和待编码数据装入到h->mb.cache中,下图是BUF中存储的数据在以MB为单位的时候的存储顺序 x264_macroblock_cache_load( h, i_mb_x, i_mb_y );//是把当前宏块的up宏块和left宏块的intra4x4_pred_mode&#xff0c;non_zero_count加载进来&#xff0c…

U(优)盘安装FreeBSD-9.0+GNOME_lite桌面

贴图在我的主页&#xff1a;http://hi.baidu.com/daodej/item/26313f4fc3db51ef1f19bcc6 修订于&#xff1a;2012/07/04 标题&#xff1a;U(优)盘安装FreeBSD-9.0GNOME_lite桌面&#xff0c;boot0启动XP(Windows)、FreeBSD、Ubuntu(Linux)三系统 【黑括号表示说明&#xff0c;中…

【零散积累】 vim常用操作

类型 操作 含义 删除 dd 删除游标所在的一整行(常用) ndd n为数字。删除光标所在的向下n行&#xff0c;例如20dd则是删除光标所在的向下20行 d1G 删除光标所在到第一行的所有数据 dG 删除光标所在到最后一行的所有数据 d$ 删除光标所在处&#xff0c;到该…

生活中常见物联网实例_物联网网关常见问题解答(一)

1.为什么物联网解决方案需要网关&#xff1f;物联网网关弥合了设备&#xff0c;传感器&#xff0c;设备&#xff0c;系统和云之间的通信鸿沟。通过系统地连接云&#xff0c;物联网网关提供了本地处理和存储&#xff0c;并具有基于传感器输入的数据自主控制现场设备的功能。物联…

predict_16x16[i_mode]( p_dst, i_stride )lowres

h->predict_16x16[i_mode]( p_dst, i_stride ); 计算对应预测模式时的预测采样值。输出放到dst指向的数组中。Pred0ct_16x16是7个元素指向的数组&#xff0c;数组的每个元素是一个指向函数的指针变量&#xff0c;在x264_predict_16x16_init函数初始这个指针数组。7个元素分…

【零散积累】shell脚本学习

来自wiki迁移页面路径&#xff1a;刘旺的主页 / 个人零散积累 / 03> shell脚本学习 case Shell case语句&#xff08;多分支条件判断&#xff09; $( ) Linux—shell中$(( ))、$( )、与${ }的区别 - chengd - 博客园 在bash中&#xff0c;$( )与 &#xff08;反引号&…

mysql 表锁-解锁

遇到问题“”用工具navicat打开一张表的时候&#xff0c;有的时候会发现这张表怎么打不开&#xff0c;关了navicat工具&#xff0c;再打开&#xff0c;也是同样的状态。查看表锁&#xff1a;show OPEN TABLES where In_use > 0;查看是否是表锁住了。-- 查看进程号 show proc…

alsa 测试 linux_Electron 构建步骤 (Linux)

遵循下面的引导&#xff0c;在 Linux 上构建 Electron .PrerequisitesPython 2.7.x. 一些发行版如 CentOS 仍然使用 Python 2.6.x &#xff0c;所以或许需要 check 你的 Python 版本&#xff0c;使用 python -V.Node.js v0.12.x. 有很多方法来安装 Node. 可以从 Node.js下载原文…

JavaScript中的数学对象Math

js数学对象Math //四舍五入 var res Math.round(5.921);//获取最大值 var res Math.max(10,23,523,43,65,46,32,32);//获取最小值 var res Math.min(12312,324,32,42,3,23,412,4332,21,3,-1);//获取绝对值 var res Math.abs(-100);//退一取整 var res Math.floor(1.9);//…

centos7-安装mysql5.6.36

本地安装了mysql5.7, 但和springboot整合jpa时会出现 hibernateException, 不知道为什么, 换个mysql5.6版本的mysql, 源码安装, cmake一直过不去, 后来改成rpm安装 1, 获取mysql5.6 ftp://ftp.mirrorservice.org/sites/ftp.mysql.com/Downloads/MySQL-5.6/ 下载: 解压: 其中…

mad的问题汇总

Q&#xff1a;我想将I帧的预测图像和原始图像的平均绝对误差给输出来&#xff0c;请问这个在JM86中需要在哪一点改动呢&#xff1f;谢谢 A&#xff1a; 差值保存在diffy中&#xff1a; diffy[j][i] imgY_org[img->opix_yj][img->opix_xi] - pred[j][i]; 分析MAD不知道程…

迷之骚缩写

搜集一些 GitHub 常见骚缩写&#xff0c;以备查询使用。 原文链接&#xff1a;LGTM? 那些迷之缩写 PR: Pull Request. 拉取请求&#xff0c;给其他项目提交代码LGTM: Looks Good To Me. 朕知道了 代码已经过 review&#xff0c;可以合并SGTM: Sounds Good To Me. 和上面那句意…

github设置中文_静态博客托管图片至 GitHub

从 MWeb 切换到静态博客 Jekyll 之后&#xff0c;我就面临一个问题&#xff0c;这在很久之前使用 Hexo 同样遇过的&#xff1a;图片托管在何处。MWeb 的解决方式很棒&#xff0c;直接插入图片&#xff0c;推送到 Github 后亦能正常引用并显示&#xff0c;无需图床或者借助第三方…

JavaScript中的正则

js正则 正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串, 正则表达式通常被用来检索、替换那些符合某个模式的文本 声明方式 普通字符 new RegExp();/hehe/转义字符 \w \W \d \D \s \S var reg /\w/;//单个的字母数字下划线 var reg /\W/;…

SQL注入【sqli靶场第23-28关】(七)

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 0、总体思路 先确认是否可以SQL注入&#xff0c;使用单…

Linq中string转int的方法

Linq中string转int的方法 在做批量删除时&#xff0c;需把一串id值所对应的数据删除&#xff0c;调试出现问题&#xff1a; Linq语句中如果使用ToString()进行类型转换,编译时不会报错,但执行时会出现如下错误&#xff1a; “LINQ to Entities 不识别方法"System.String T…

名称缩写第二波

1 公司内部 缩写 全称 中文 说明 PMproduct manager产品经理RDResearch and Development研发工程师FEFrontend Engineer前端工程师UEUser Experience用户体验设计师QAquality assurance质量保证&#xff0c;测试OP operator 运维工程师EEEngeering Excellence工程效率部ETEn…

php动态获取函数参数

PHP 在用户自定义函数中支持可变数量的参数列表。其实很简单&#xff0c;只需使用func_num_args() &#xff0c; func_get_arg() &#xff0c;和 func_get_args() 函数即可。可变参数并不需要特别的语法&#xff0c;参数列表仍按函数定义的方式传递给函数&#xff0c;并按通常…

漏桶算法与令牌桶算法

漏桶算法(Leaky Bucket)是网络世界中流量整形&#xff08;Traffic Shaping&#xff09;或速率限制&#xff08;Rate Limiting&#xff09;时经常使用的一种算法&#xff0c;它的主要目的是控制数据注入到网络的速率&#xff0c;平滑网络上的突发流量。漏桶算法提供了一种机制&a…