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.Toolbar
android: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,我们运行程序,得到如下结果:
可以看出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引用同样的颜色了,我们先看看现在的效果是怎样的:
可以看到,颜色已经改变,同时我们注意到,顶部状态栏的颜色也变成了深蓝色,这是因为添加了"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);
}
}
结果如下:
如果你想修改标题和子标题的字体大小、颜色等,可以调用 setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance 这些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() {
@Override
public 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;
}
});
结果如下:
可以看到,菜单选项图标正常显示,以及点击事件都正常触发,但是还有一点瑕疵的地方,那就是右上角的三个圆点,是黑色的,与图标格格不入,有没有什么办法改变它呢?答案是有的,可以通过添加样式改变,如下所示:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:textColorSecondary">#ffffff</item>
</style>
</resources>
"android:textColorSecondary"属性对应的就是右上角三个圆点的颜色了。改变之后将会变成你要的颜色。
四、其他样式修改
修改Toolbar popup menu样式
我们先点击右上角的三个点,会弹出一个popup menu,如下所示:
可以看到右上角的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的背景颜色了,如下面所示:
修改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>
效果如下图:
那么到目前为止,对于toolbar的相关使用意见讲述完毕,可以看出toolbar的灵活性很高,能自定义很多样式,我们平常开发也会遇到各种不同的样式,因此toolbar用于取代actionbar是非常合适的。以后如果还有遇到别的样式,我也会分享出来,谢谢。
作者:陈育
链接:http://www.jianshu.com/p/ae0013a4f71a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Android ToolBar 使用完全解析的更多相关文章
- (转载) Android RecyclerView 使用完全解析 体验艺术般的控件
Android RecyclerView 使用完全解析 体验艺术般的控件 标签: Recyclerviewpager瀑布流 2015-04-16 09:07 721474人阅读 评论(458) 收藏 ...
- 【Android】实现XML解析的几种技术
本文介绍在Android平台中实现对XML的三种解析方式. XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为Android开发中一项重要的技能. 在 ...
- Android中使用Gson解析JSON数据的两种方法
Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...
- Android属性动画完全解析(下)
转载:http://blog.csdn.net/guolin_blog/article/details/44171115 大家好,欢迎继续回到Android属性动画完全解析.在上一篇文章当中我们学习了 ...
- Android属性动画完全解析(上),初识属性动画的基本用法
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系 ...
- Android系列---JSON数据解析
您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...
- Android网络之数据解析----使用Google Gson解析Json数据
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- Android网络之数据解析----SAX方式解析XML数据
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...
- Android属性动画完全解析(中)
转载:http://blog.csdn.net/guolin_blog/article/details/43536355 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是 ...
随机推荐
- Linq学习(一)
与LINQ有关的语言特性 1.隐式类型 var 2.匿名类型 如:var obj = new {Guid.Empty, myTitle = "匿名类型", myOtherParam ...
- jQuery基础知识点(上)
jQuery是一个优秀的.轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),而jQuery2.0及后续版本将不再支 ...
- MyBatis 基本演示
主配置文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration P ...
- 利用MapReduce计算平均数
利用mapreduce求出股票价格的开盘和收盘平均数 下图为采集到的股票信息,共计1416支股票的信息 因为在linux系统下默认采用utf-8的编码格式,而在win下txt默认采用ANSI编码格式. ...
- [poj] 1269 [zoj] 1280 Interesting Lines || 求两直线交点
POJ原题 ZOJ原题 多组数据.每次给出四个点,前两个点确定一条直线,后两个点确定一条直线,若平行则输出"NONE",重合输出"LINE",相交输出" ...
- hdu 2993 斜率dp
思路:直接通过斜率优化进行求解. #include<iostream> #include<cstdio> #include<algorithm> #include& ...
- BZOJ2763 [JLOI2011]飞行路线 【分层图 + 最短路】
题目 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的价格 ...
- vue刨坑(二)
vue实例 vue实例 每一个应用都是通过vue这个构造函数创建根实例(root instance),启动 new vue(选项对象) 需要传入选项对象,对象包含挂载元素,数据,模板,方法等. el: ...
- 汕头市队赛 SRM10 T1 贪心只能过样例
贪心只能过样例 SRM 10 描述 给出n个数a[i](1<=a[i]<=n),问最多能把这些数分成几组,使得每个数a[i]所在的组至少有a[i]个数 输入格式 第一行一个整数n,接下来n ...
- iOS-android-windowsphone等移动终端平台开发流程图
到了公司后,半个月时间就是在熟悉下面这张图里的流程, 项目流程图: 下面是我对这张图的一些理解: