Android L 之 ToolBar使用

官方地址：#####

https://developer.android.com/reference/android/support/v7/widget/Toolbar.html

介绍：#####

Toolbar是android L引入的一个新控件，可以理解为action bar的第二代：提供了action bar类似的功能，但是更灵活。不像actionbar那么固定，Toolbar更像是一般的View元素，可以被放置在view树体系的任意位置，可以应用动画，可以跟着scrollView滚动，可以与布局中的其他view交互。当然，你还可以用Toolbar替换掉actionbar，只需调用 Activity.setActionBar()。

——设置导航栏图标
——设置App的logo
——支持设置标题和子标题
——支持添加一个或多个的自定义控件（作为Toolbar的子控件）
——支持Action Menu

概述

Paste_Image.png

1、App icon
一般用于放置logo或返回按钮
2、View control
如果你的app在不同的view中展示数据，action bar中的这一部分可以允许用户进行view的切换。
3、Action buttons
一般分用来展示一些app中比较重要的动作：比如收藏、关注等等
4、Action overflow
放置一些不常用的功能，点击Menu时弹出。

使用：#

一、添加依赖####

Toolbar是在 Android 5.0 才开始加上的，Google 为了将这一设计向下兼容，自然也少不了要推出兼容版的Toolbar。为此，我们需要在工程中引入appcompat-v7的兼容包，使用android.support.v7.widget.Toolbar进行开发。

dependencies {    
    compile fileTree(dir: 'libs', include: ['*.jar'])    
    //添加V7依赖包    
    compile 'com.android.support:appcompat-v7:24.1.1'
}```

####二、布局文件####

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_alignParentBottom="true"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:logo="@mipmap/ic_music"
app:title="A"
app:titleTextAppearance="@style/ActionBarTitle"
app:titleTextColor="#ff0000"
app:subtitleTextColor="#3cff00"
app:subtitleTextAppearance="@style/ActionBarTitle"
app:subtitle="B"
app:navigationIcon="@mipmap/ic_thunder">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is Custom View" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>

 app:logo    ——标志
 app:title     ——标题
 app:titleTextAppearance    ——标题外观样式
 app:titleTextColor    ——标题文本颜色
 app:subtitle    ——副标题
 app:subtitleTextColor    ——副标题文本颜色
 app:subtitleTextAppearance    ——副标题外观样式
 app:navigationIcon  ——导航图标
####三、Menu配置####

<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@drawable/ic_action_name"
android:title="Search"
android:orderInCategory="90"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom" />
<item
android:id="@+id/action_share"
android:title="分享"
app:showAsAction="always"
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"/>
<item
android:id="@+id/action_settings"
android:title="a"
android:icon="@drawable/ic_action_setting"
app:showAsAction="never" />
<item
android:id="@+id/action_user"
android:title="UserInfo"
android:icon="@drawable/ic_action_user"
app:showAsAction="never" />
<item
android:id="@+id/action_lover"
android:title="MyLover"
android:icon="@drawable/ic_action_lover"
app:showAsAction="never" />
</menu>

android:id  —— Menu item id 代码中获取，进行事件监听
android:icon  ——Menu item 图标
android:title  ——Menu item 标题
android:orderInCategory  ——优先级，值越大优先级越低，actionbar地方不够就会放到overflow中
app:showAsAction
－－always    一直
－－ifRoom    当有空间时显示
－－never     从不
－－withText  系统默认竖屏时是只显示图片的,withText属性要在横屏时才体现的出来.
－－collapseActionView    方法需要 API 14 以上，collapseActionView表示当用户不再和它交互时控件该如何展示：在Toolbar上以小图标显示，在下拉菜单下以一个菜单项显示。当用户和action view交互时，它将在Toolbar上扩展。
app:actionViewClass
——action view是用于替换action button并显示在action bar上面的一种可视组件。ActionViewClass属性用于指定action view的类，这里的SearchView是系统提供的，当然你也可以自定义。
app:actionProviderClass
——Action provider同ActionView 类似可以替换ActionBar中的Action Button，不同的是Action Provider提供子菜单的方式，用得比较少，所以本文不予介绍。
####四、代码操作####
1.设置Toolbar
需要先设置为 NO_TITLE
通过style设置

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

通过代码设置

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// 一、隐藏原来的状态栏(必须添加到setContentView()之前)，也可以通过主题Theme指定无
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

// 二、设置使用我们的ToolBar代替ActionBar ,如果不设置为 ActionBar 那么 不会自动装载内容
Toolbar mToolBar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolBar);

2.设置ToolBar的Menu菜单

@Override
public boolean onCreateOptionsMenu(Menu menu) {
//为ActionBar扩展菜单项
MenuInflater menuInflater = getMenuInflater();
//填充菜单 第一个参数 我们要填充的menu配置, 第二个参数 填充到哪个menu
menuInflater.inflate(R.menu.activity_menus, menu);
return super.onCreateOptionsMenu(menu);
}

3.Menu监听

// 处理menu的点击事件
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
//系统的 返回键 ID
case android.R.id.home:
Toast.makeText(this, "返回监听",Toast.LENGTH_SHORT).show();
return super.onOptionsItemSelected(item);
case R.id.action_settings:
Toast.makeText(this, "Setting", Toast.LENGTH_SHORT).show();
return true;
case R.id.action_user:
Toast.makeText(this, "User", Toast.LENGTH_SHORT).show();
return true;
｝
｝

至此，我们的Toobar就 配置方面就差不多了，那么我们现在有一些其它的需求。

####五、其它需求####
1.ActionView的获取—>SearchView的获取
在 创建menu的时候获取

@Override
public boolean onCreateOptionsMenu(Menu menu) {
//为ActionBar扩展菜单项
MenuInflater menuInflater = getMenuInflater();
//填充菜单 第一个参数 我们要填充的menu配置, 第二个参数 填充到哪个menu
menuInflater.inflate(R.menu.activity_menus, menu);
//SearchView获取
MenuItem item = menu.findItem(R.id.action_search);
SearchView searchView =(SearchView)MenuItemCompat.getActionView(item);
//这里 获取了SearchView，那么我们就可以对SerchView进行操作了
return super.onCreateOptionsMenu(menu);
}

2.修改Overflow的显示图标，以及弹出层的位置


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

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>

<item name="android:actionOverflowButtonStyle">@style/OverflowMenuButton</item>

<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

<item name="android:itemTextAppearance">@style/CustomMenuTextApearance</item>
</style>

<!--修改 overflow的图标-->
<style name="OverflowMenuButton" parent="@android:style/Widget.Holo.ActionButton.Overflow">
    <item name="android:src">@mipmap/ic_thunder</item>
</style>

<!--修改 overflow的位置 背景颜色 -->
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
    <item name="overlapAnchor">false</item>
    <item name="android:dropDownWidth">wrap_content</item>
    <item name="android:paddingRight">5dp</item>
    <item name="android:actionMenuTextColor">#060aff</item>
    <item name="android:popupBackground">?attr/colorPrimary</item>
</style>

<!--修改 optionMenu 文本颜色 整体-->
<style name="CustomMenuTextApearance" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
    <item name="android:textColor">#ff8000</item>
</style>


3.Overflow显示icon的显示
之前我们已经在Menu中配置了很多item，并且对所有的item都进行了 icon，不过当我们点击Menu菜单 弹出的时候，并没有看到我们的icon设置，此处Google所给出的ToolBar不能弹出相关的icon所以我们需要额外设置
重写：onPrepareOptionsMenu()

@Override
public boolean onPrepareOptionsMenu(Menu menu) {
if (menu != null&& menu instanceof MenuBuilder) {
//编sdk版本24的情况 可以直接使用 setOptionalIconsVisible
if (Build.VERSION.SDK_INT > 23) {
MenuBuilder builder = (MenuBuilder) menu;
builder.setOptionalIconsVisible(true);
} else {
//sdk版本24的以下，需要通过反射去执行该方法
try {
MenuBuilder builder = (MenuBuilder) menu;
Method m = builder.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}
return super.onPrepareOptionsMenu(menu);}

我们也可以在onCreateOptionsMenu中找到我们设置的menu菜单，重新进行icon设置

@Override
public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater menuInflater = getMenuInflater();    
menuInflater.inflate(R.menu.activity_menus, menu);

//设置optionMenu 中的的item 添加icon图片 
MenuItem settingItem =  menu.findItem(R.id.action_settings);

//直接指定 
settingItem.setIcon(R.mipmap.ic_thunder);

//获取设置的图标，重新指定
Drawable icon = settingItem.getIcon(); 
settingItem.setIcon(icon);

return super.onCreateOptionsMenu(menu);

}


4.修改overflow中 显示的文字颜色
-4.1通过Style样式设置，见**（其它需求2）**
-4.2代码设置
使用SpannableString创意性的设置

MenuItem settingItem = menu.findItem(R.id.action_settings);
CharSequence title = settingItem.getTitle();
//第一个参数:要设定的样式,第二个参数:从什么地方开始,第三个参数:什么地方结束
//如果不知道SpannableString，请自行www.baidu.com
SpannableString ss = new SpannableString(title);
//设置文本颜色
ss.setSpan(new ForegroundColorSpan(Color.RED), 0, title.length(), 0);
settingItem.setTitle(ss);

简单做法通过HTML.fromHtlm

MenuItem settingItem = menu.findItem(R.id.action_settings);
settingItem.setTitle(Html.fromHtml("<font color='#060aff'>" + userItem.getTitle() + "</font>"));



![最终，替换后的效果，目的达到了，至于有人说真丑，嘿嘿，你可以试着搞个漂亮的出来](http://upload-images.jianshu.io/upload_images/1635594-d43eb9382e3c9583.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 207,248评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,681评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,443评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,475评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,458评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,185评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,451评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,112评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,609评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,083评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,163评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,803评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,357评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,357评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,590评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,636评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,925评论 2赞 344

推荐阅读更多精彩内容