Android ToolBar 用法总结

2017-01-14 10:24:45来源:http://www.jianshu.com/p/53ba80ac0c5e作者:星际之痕人点击

第七城市
题外话

这两天也是为宝宝的离婚操碎了心,微博热度42亿多。一开始就觉得马蓉这人城府太深,但并没有怎么注意过她,后来毕竟已经结婚生子这么久了,心想估计是自己看错了,谁知道结婚这么久就没老实过,真心的心疼宝强啊,农村出来的走到这一步真的不容易,奈何最亲近的人在后面捅刀子。世事无常,娱乐圈真的是太乱了。但是无论如何,不管怎样,我都跟宝宝一样,不能容忍女人的背叛。祝福宝宝。


什么是ToolBar

首先,ToolBar是谷歌在5.0版本时推出的一个新的布局控件,目的是为了替代不怎么好用的ActionBar的,ActionBar的不好用,本人是有体会的,谷歌的官方认为(实际上也是这样的),ActionBar在某些程度上限制了Android App开发与设计的弹性


其次,谷歌为了保持移动端App界面的一致性体验,推出了Material Design设计风格,ToolBar就是其中的一个组件。而且,在标题栏这块,谷歌也给出了新的概念--App Bar。


最后,谷歌也早就不推荐(废弃)使用ActionBarActivity了,所以,再做新东西的时候就别再创建一个继承自ActionBarActivity的Activity了,强迫症患者是绝对不允许代码中有删除线的。当然,很多小伙伴早就ToolBar撸起来了,不用多说,公司的新项目也是上的ToolBar,这里做个用法的总结。


如何使用ToolBar
引用兼容包

要开始使用ToolBar首先要做的是引用相关的兼容包:


compile 'com.android.support:design:23.3.0'

也就是我们刚才说的Material Design设计风格的兼容包,如果你的APP支持的最低版本是5.0+,就不用使用兼容包了,直接就支持了。


当然,还有一个兼容包:


compile 'com.android.support:appcompat-v7:23.3.0'

因为我的Activity不是继承自ActionBarActivity,而是AppCompatActivity。


使用ToolBar

引用了上面的design兼容包后,就可以在xml布局文件里这样来使用了:


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
toolBar:popupTheme="@style/Theme.ToolBar.Base"
toolBar:logo="@drawable/main_ic_home_selected"
toolBar:navigationIcon="@drawable/ic_launcher"
toolBar:title="ToolBar"
toolBar:subtitle="subTitle">
</android.support.v7.widget.Toolbar>

刚才说了,ToolBar是用来替换ActionBar的,如果我们的Activity继承自AppCompatActivity的话,默认是有ActionBar的,那么就会出现下面的情况:



两者都显示的情况

所以,如果在xml中使用了ToolBar来替代ActionBar的话,就要设置Activity的风格没有ActionBar,或者通过变通的方式实现。比如设置Theme:


<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="windowNoTitle">true</item>
</style>

假设我们的整个App的页面都是使用ToolBar的话,可以定义一个AppTheme.Base,内容如上,去掉ActionBar。


然后在设置具体的Theme,比如:


<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

这里的属性配置,分别决定了对应的内容的颜色,看下图:



ToolBar的颜色属性说明

接下来的使用就基本上跟其他控件一样了,需要在Activity中声明,然后findViewById,最后拿来使用。xml里面的属性,代码同样有对应的方法去设置,对于xml设置属性,需要注意一点:命名空间


xmlns:toolBar="http://schemas.android.com/apk/res-auto"


toolBar:popupTheme="@style/Theme.ToolBar.Base"
toolBar:logo="@drawable/main_ic_home_selected"
toolBar:navigationIcon="@drawable/ic_launcher"
toolBar:title="ToolBar"
toolBar:subtitle="subTitle">

使用android自带的命名空间设置对应的属性是不生效的,但是不会报错,其实你只要知道这个控件时在兼容包里的,不是sdk自带的,稍微注意一下就好了。


但是,在java代码中,关键的一点其实是


setSupportActionBar(toolbar);

这句代码,这句代码就把用toolbar代替ActionBar体现的非常具体了,一看就能明白是什么意思。要注意的是,ToolBar的有些方法必须要在这句话之前调用才能生效,比如setTitle,而有些方法则必须要在这句话之后调用才能生效,比如setOnMenuItemClickListener,具体哪些之前调用,哪些之后调用,哪些前后无所谓就需要自己去查API了。


另外,ToolBar也支持设置menu,实现方式跟使用ActionBar一样的,加载xml布局:


@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
String msg = "";
switch (item.getItemId()) {
case R.id.action_edit:
msg += "Click edit--111";
break;
case R.id.action_share:
msg += "Click share--111";
break;
case R.id.action_settings:
msg += "Click setting--111";
break;
case android.R.id.home:
msg += "Click back--111";
break;
}
if(!msg.equals("")) {
Toast.makeText(HelloWorldActivity.this, msg, Toast.LENGTH_SHORT).show();
}
return true;
}

还有,ToolBar作为布局控件,可以作为容器在里面再加上自定义布局:


<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
toolBar:popupTheme="@style/Theme.ToolBar.Base"
toolBar:logo="@drawable/main_ic_home_selected"
toolBar:navigationIcon="@drawable/ic_launcher"
toolBar:title="ToolBar"
toolBar:subtitle="subTitle">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom TextView"/>
</android.support.v7.widget.Toolbar>

这种使用方式可以轻松的实现标题内容居中等自定义的样式,如果是使用ActionBar就麻烦了许多。而且ToolBar作为一个布局控件,可以把它布局到xml的任何位置,不只是头部,ActionBar是固定在头部的,这点跟ActionBar区别很大,用起来也更加灵活多变,但估计不会有人把ActionBar放到别的位置吧!!


ToolBar使用总结

以上基本上就是ToolBar的基本使用了,当然,ToolBar配合Material Design的其他元素使用,以及动画效果的修饰,使用起来还是挺好看的一种风格,个人比较推荐,我的博客项目也已经换上了ToolBar来实现了,需要具体代码的可以参考一下,有问题欢迎留言探讨。


最后是源码地址,如果觉得对您有帮助,并且想要一起提高Android开发技能的小伙伴能star一下,以后会继续在这个项目上添加新的内容,包括一些有用的工具类、各种控件、效果实现、设计模式的使用等等。




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台