Android Studio精彩案例七ToolBar使用详解一.docx
《Android Studio精彩案例七ToolBar使用详解一.docx》由会员分享，可在线阅读，更多相关《Android Studio精彩案例七ToolBar使用详解一.docx（35页珍藏版）》请在冰点文库上搜索。
AndroidStudio精彩案例七ToolBar使用详解一
AndroidStudio精彩案例（七）《ToolBar使用详解<一>》
Android5.x以后谷歌大力推崇MaterialDesign设计，有意统一之前Android style风格乱象的情况。
上一篇博客我们学习了ActionBar的使用，因为以前很多方式都会对ActionBar做深度定制，使用起来不是很方便，toolbar作为 Android 5.x引入的一个新控件，可以理解为是ActionBar的升级版，大大扩展了Actionbar，使用更灵活，不像actionbar那么固定，所以单纯使用ActionBar已经稍显过时了，它的一些方法已被标注过时。
Toolbar更像是一般的View元素，可以被放置在view树体系的任意位置，可以应用动画，可以跟着scrollView滚动，可以与布局中的其他view交互，等总之很强大。
。
这篇文章来介绍Android5.x新特性之Toolbar和Theme的使用，参考了许多博文，和书籍，在此对其做一个总结，从零开始，教您学会使用ToolBar。
应用程序中使用appbar可有如下优点：
1.可以显示出用户所处的当前位置；
2.可以提供一些重要的交互操作，比如搜索（search）操作；
3.可以实现导航功能，让用户快速回到HomeActivity；
本文就主要介绍一下AndroidToolbar的使用方法。
我们先来看一张图片，因为在下面你会不断地遇到这个图片中的内容
简单解释一下属性意义：
colorPrimaryDark：
状态栏的颜色（可用来实现沉浸效果）
colorPrimary:
Toolbar的背景颜色（xml中用android:
background=”?
attr/colorPrimary”指定）
android:
textColorPrimary：
Toolbar中文字的颜色，设置后MenuItem的字体颜色也会跟随
colorAccent：
EditText正在输入时，RadioButton选中时的颜色
windowBackground:
底部导航栏的颜色
app:
title=”AppTitle”：
Toolbar中的AppTitle
app:
subtitle=”SubTitle” ：
Toobar中的小标题
app:
navigationIcon=”@android:
drawable/ic_menu_sort_by_size” ：
导航图标（注意和Logo的区别）
我们从以下几个点了解Toolbar的使用
1.Toolbar的基础使用
2.Toolbar配置主题Theme
3.Toolbar中常用的控件设置
4.Toolbar的自定义
Toolbar的基础使用
我们从以下几点来一步一步的学习Toolbar的使用
1.Style（风格）
2.Layout（布局）
3.Activity（代码）
Style（风格）
为了能在你的Activity中使用Toolbar，你必须在工程里修改styles.xml文件里的主题风格，系统默认如下
[html] viewplain copy
print?
1.12px;">
这种Theme表示使用系统之前的ActionBar，那么我们想要使用Toolbar怎么办呢？
[html] viewplain copy
print?
1.12px;">
我们还需要隐藏默认的ActionBar,否则会报如下错误:
[html] viewplain copy
print?
1.12px;">Caused by:
java.lang.IllegalStateException:
This Activity already has an action bar
2.supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set
3.windowActionBar to false in your theme to use a Toolbar instead.
这个主题表示不使用系统的Actionbar了，这是第一步。
Layout布局
[html] viewplain copy
print?
1.12px;">android="
2. xmlns:
tools="
3. android:
layout_width="match_parent"
4. android:
layout_height="match_parent"
5. tools:
context=".MainActivity">
6.
7. 8. android:
id="@+id/toolbar"
9. android:
layout_width="match_parent"
10. android:
layout_height="?
attr/actionBarSize"
11. >
12.
13.
14.
为了在你的UI中使用Toolbar，你得为每个activity布局添加Toolbar,并且给Toolbar设置一个idandroid:
id=”@+id/toolbar”。
这是第二部。
其中高度指定为了ActionBar大小
Activity（代码）
[html] viewplain copy
print?
1.12px;"> Toolbar toolbar;
2. @Override
3. protected void onCreate（Bundle savedInstanceState） {
4. super.onCreate（savedInstanceState）;
5. setContentView（R.layout.activity_main）;
6.
7. toolbar = findView（R.id.toolbar）;
8. setSupportActionBar（toolbar）;
9. }
代码中通过findView找到Toolbar，然后通过setSupportActionBar（toolbar）;将Toolbar设置为Activity的导航栏。
通过上面的三个步骤，你就已经使用了Supportv7提供的Toolbar了。
看看那效果图。
是不是感觉很丑？
没有一点MD设计的风格，而且还有一个问题，为什么跟Action有这么大的差距？
那么先来穿插的解决这个问题。
还要注意点，默认的title是项目名称。
然后加入Menu：
步骤如下：
打开Android studio会发现如图所示，没有Menu文件：
修改文件名为main_menu.xml。
加入如下代码：
[html] viewplain copy
print?
1.
xml version="1.0" encoding="utf-8"?
>
2.android="
3.
4.
--添加一条item-->
5. id="@+id/Setting"
6. android:
title="设置"
7. />
8.
然后再主活动引入menu：
[html] viewplain copy
print?
1.@Override
2. public boolean onCreateOptionsMenu（Menu menu） {
3. getMenuInflater（）.inflate（R.menu.main_menu,menu）;
4. urn true;
5. }
现在再来运行程序：
好了介绍搜玩了如何引入menu，点击指示图标会显示设置。
再回到toolBar上来，虽然还是很丑，不过别失望，这仅仅是为了让Toolbar正常工作而已，为了让Toolbar有MaterialDesign风格，我们必须去设置Toolbar的主题风格。
Toolbar配置主题Theme
我们重新配置系统主题Theme，修改styles.xml代码如下：
[html] viewplain copy
print?
1.12px;">
-- Base application theme. -->
2.
3.
-- Customize your theme here. -->
4.
--导航栏底色-->
5. #f61d1f1f
6.
--状态栏底色-->
7. #0a0909
8.
--导航栏上的标题颜色,这里的颜色还可以自己定义喜欢的类型-->
9. textColorPrimary">#fff
10.
--Activity窗口的颜色,注意：
这个颜色值要通过color属性引进来-->
11. windowBackground">@color/windowBackground
12.
--按钮选中或者点击获得焦点后的颜色-->
13. #00ff00
14.
--和 colorAccent相反，正常状态下按钮的颜色,如果我们的colorPrimary是深色，一般设置这里为白色-->
15. #fff
16.
--Button按钮正常状态颜色,根据项目来定义-->
17. @color/accent_material_light
18.
--EditText 输入框中字体的颜色，colorPrimary如果设置深色，一般字体设置为白色-->
19. @android:
color/white
20.
Toolbar中常用的控件设置
各个属性就不解释了，注释都很清楚。
你可以对着文章开头的那张图片理解一下上边都对应了手机屏幕的哪个位置的。
我们来看看Toolbar怎么使用这些主题吧？
配置activity_main.xml中的Toolbar改成为如下：
[html] viewplain copy
print?
1.12px;">
xml version="1.0" encoding="utf-8"?
>
2.3. android:
id="@+id/activity_main"
4. android:
layout_width="match_parent"
5. android:
layout_height="match_parent"
6.>
7.
8. 9. android:
id="@+id/toolbar"
10. android:
background="?
attr/colorPrimary"
11. android:
layout_width="match_parent"
12. android:
layout_height="?
attr/actionBarSize"
13. app:
popupTheme="@style/ThemeOverlay.AppCompat.Dark"
14. >
15.
16.
相比上面的Toolbar配置，这里添加了不少代码
首先。
app定义了命名空间，主要目的是为了兼容低版本也是用MD效果的。
然后：
[html] viewplain copy
print?
1.14px;">android:
background="?
attr/colorPrimary"
它表示我这个ToolBar的整个样式。
使用?
attr表示全引用，整个自定义样式里面的内容都对我的tooBar生效。
表示根据屏幕的分辨率采用系统默认的高度。
为了在你的UI中使用Toolbar，你得为每个activity布局添加Toolbar,并且给Toolbar设置一个idandroid:
id=”@+id/toolbar”。
这是第二。
代码添加toobar
[html] viewplain copy
print?
1.14px;"> getSupportActionBar（）.setDisplayShowTitleEnabled（false）;14px;">
2. 12px;"> toolbar.setTitle（"主标题"）;
3. toolbar.setSubtitle（"副标题"）;
4. //还可以代码设置标题颜色
5. toolbar.setSubtitleTextColor（Color.WHITE）;
6. //设置logo。
您要注意logo与导航位置图标的区别
7. toolbar.setLogo（R.mipmap.ic_action_select_all）;
8. //添加导航位置图标
9. toolbar.setNavigationIcon（R.mipmap.img_menu）;
注释写的很详细了吧。
Toolbar可以设置Title（主标题），Subtitle（副标题），Logo（logo图标），NavigationIcon（导航按钮）。
注意 如果你想要通过toolbar.setTitle（“主标题”）;设置Toolbar的标题，你必须在调用它之前调用如下代码：
[html] viewplain copy
print?
1.14px;">14px;">getSupportActionBar（）.setDisplayShowTitleEnabled（false）;
2.
上面代码用来隐藏系统默认的Title，不指定这行代码，代码设置Title是没有任何效果的。
经过如上配置再来看看效果图吧！
当然，你也可以通过布局文件来添加同样的效果。
个人喜欢使用代码添加。
对于布局文件添加，可参考如下：
通过app:
title属性设置Toolbar的标题，通过app:
logo属性设置Toolbar的图标。
还可以通过app:
titleTextColor属性设置标题文字颜色等等。
那么Toolbar能不能使用Menu菜单功能呢？
答案是肯定的了。
来看看加载如下menu菜单的Toolbar吧
修改刚才的main_menu.xml中的代码：
[html] viewplain copy
print?
1.android="
2. xmlns:
app="
3. xmlns:
tools="
4. tools:
context=".MainActivity">
5.
--添加一条item-->
6. 7. android:
id="@+id/action_edit"
8. android:
icon="@drawable/ic_action_search"
9. android:
orderInCategory="80"
10. android:
title="查找"
11. app:
showAsAction="always"/>
12.
13. 14. android:
id="@+id/action_share"
15. android:
icon="@drawable/abc_ic_menu_share_mtrl_alpha"
16. android:
orderInCategory="90"
17. android:
title="分享"
18. app:
showAsAction="ifRoom"/>
19.
20. 21. android:
id="@+id/action_settings"
22. android:
orderInCategory="100"
23. android:
title="设置"
24. app:
showAsAction="never"/>
25.
怎么给menu的各个Item添加点击事件呢？
Toolbar给我们提供如下方法
[html] viewplain copy
print?
1.//事件
2.//实现接口（也可以重写onOptionItemSelected（）方法实现同样的功能，个人喜欢添加监听器效果）
3.toolbar.setOnMenuItemClickListener（new Toolbar.OnMenuItemClickListener（） {
4. @Override
5. public boolean onMenuItemClick（MenuItem item） {
6. switch （item.getItemId（）） {
7. case R.id.action_edit:
8. Toast.makeText（MainActivity.this, "查找按钮", Toast.LENGTH_SHORT）.show（）;
9. break;
10. case R.id.action_share:
11. Toast.makeText（MainActivity.this, "分享按钮", Toast.LENGTH_SHORT）.show（）;
12. break;
13. case R.id.action_settings:
14. Toast.makeText（MainActivity.this, "设置按
升级会员 