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閱讀 230,527評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,687評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,640評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,957評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,682評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,011評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,009評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,183評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,714評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,148評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,838評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2 380

推薦閱讀更多精彩內容