前言:
顧名思義送滞,Toolbar就是應(yīng)用的工具欄,是android L引入的新控件, 用來(lái)替代ActionBar一個(gè)Activity可以有多個(gè)Toolbar,你也可以把toolbar放在任何位置躺坟,因?yàn)樗亲鳛橐粋€(gè)ViewGroup來(lái)定義使用的。
Toolbar配合官方Material Design支持庫(kù)能展示很酷炫的效果乳蓄,比如配合AppBar咪橙,CoordinatorLayout,NestedScorllView虚倒,Collapsing Toolbar Layout等美侦。本文將介紹Toolbar的全方位使用,至于那些酷炫的效果魂奥,期待我以后的文章放出吧菠剩。
參考文檔:
- [Material Design]自定義ToolBar之一 (作者:pheynix)
- Google Android Training--> Best Pratice for User Interface --> Adding the App Bar
(一)建立Toolbar
- extend AppCompatAcitivity
- NoActionBar主題
- setSupportActionBar()
1. 加入v7 appcompat庫(kù)
在build.gradle(Model:app)中聲明
dependencies {
compile 'com.android.support:appcompat-v7:23.3.0'
}
2. 繼承AppCompatAcitivity
public class MainActivity extends AppCompatActivity {
// ...
}
3. 設(shè)置manifest或styles
在manifest中,把<application>中的主題設(shè)置為NoActionBar主題耻煤,用以取消系統(tǒng)默認(rèn)的ActionBar
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<!-- ... -->
</application>
當(dāng)然具壮,你也可以直接在values/styles定制自己的style,并且在manifest中引用這個(gè)style哈蝇,具體代碼如下:
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<!-- ... -->
</application>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item></style>
注意:引用定制的style棺妓,則style中的主題必須定為NoActionBar主題
4. 在layout中加入Toolbar組件
MainActivity的layout布局如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar_layout"/>
</LinearLayout>
為了方便Toolbar的調(diào)用,可以把Toolbar封裝成一個(gè)單獨(dú)的layout炮赦,并且在需要使用到它的時(shí)候在布局中include這個(gè)layout怜跑,封裝的Toolbar layout如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
5. 自定義Toolbar
可以自定義Toolbar各個(gè)部分的顏色,自定義的地方包括:
Toolbar可以自定義的地方包括:
狀態(tài)欄顏色(Status Bar/colorPrimaryDark)(只在api21及以上有效)
標(biāo)題欄背景顏色(ToolBar/colorPrimary)
彈出菜單背景顏色(OptionMenu)
內(nèi)容區(qū)域背景顏色(Background)
導(dǎo)航欄顏色(NavigationBar)(只在api21及以上有效)
標(biāo)題文字顏色 (TitleBarTextColor/TextColorPrimary)
彈出菜單文字顏色(TextColor)
內(nèi)容文字顏色(TextColor)
控件顏色(ColorAccent)
可以在res/values/下修改color.xml文件吠勘,并添加使用到的顏色建議參考google給出的color style 規(guī)范(自備梯子)性芬,然后再在Toolbar的布局下添加各項(xiàng)屬性。
6. 建立Toolbar
在Activity中的onCreate()方法中看幼,調(diào)用setSupportActionBar() 方法建立Toolbar
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//...
}
通過(guò)以上步驟批旺,你已經(jīng)在Activity中建立了一個(gè)Toolbar,這時(shí)候你可以通過(guò)V7 appcompat支持庫(kù)的ActionBar類(lèi)提供的各種實(shí)用方法诵姜。這種方法可以讓你做一些有用的事情汽煮,如隱藏和顯示應(yīng)用程序欄。
要使用這些實(shí)用方法棚唆,需要你調(diào)用活動(dòng)的getsupportactionbar()方法暇赤,此方法返回一個(gè)appcompat ActionBar對(duì)象引用。一旦你獲得了該對(duì)象引用宵凌,你可以調(diào)用任何的ActionBar的方法調(diào)整應(yīng)用程序欄鞋囊。例如,調(diào)用ActionBar.hide()方法隱藏應(yīng)用程序欄瞎惫,建議可以看一下關(guān)于ActionBar類(lèi)的官方API文檔 (自備梯子)溜腐。
(二)在Toolbar中添加操作按鈕
- menu
- onCreateOptionsMenu()
- onOptionsItemSelected()
1. 添加操作按鈕
Toolbar上所有的操作按鈕和下拉條目都需要在menu中定義译株,res/menu/目錄下新建一個(gè)xml文件,在該文件下定義Toolbar所需要的操作按鈕挺益,代碼如下:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "Mark Favorite", should appear as action button if possible -->
<item
android:id="@+id/action_favorite"
android:icon="@drawable/ic_favorite_black_48dp"
android:title="@string/action_favorite"
app:showAsAction="ifRoom"/>
<!-- Settings, should always be in the overflow -->
<item
android:id="@+id/action_settings"
android:title="@string/action_settings"
app:showAsAction="never"/>
</menu>
app:showAsAction屬性指定了這個(gè)操作按鈕是否顯示在Toolbar上歉糜。 ifRoom作用是:如果Toolbar上有足夠的空間,則在Toolbar上顯示為一個(gè)操作按鈕望众;如果沒(méi)有足夠的空間匪补,則在下拉菜單列表中。never的作用是:設(shè)置操作按鈕在下拉菜單中顯示烂翰,而不在Toolbar中顯示夯缺。
2. 設(shè)置操作按鈕的監(jiān)聽(tīng)事件
在menu設(shè)置了顯示在Toolbar上的item之后,需要把Toolbar和menu關(guān)聯(lián)才能顯示定義的item甘耿,重寫(xiě)Activity提供的onCreateOptionsMenu()方法可以關(guān)聯(lián)Toolbar和menu踊兜。
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main,menu);
return true;
}
這樣,你就能在Toolbar上看到你關(guān)聯(lián)的item了棵里,然后重寫(xiě)onOptionsItemSelected()方法就可以對(duì)Toolbar的按鈕設(shè)置監(jiān)聽(tīng)润文。
@Override
protected boolean onOptionsItemSelected(MenuItem item) {
Intent intent;
switch (item.getItemId()) {
case R.id.action_favorite:
// User chose the "Favorite" action, mark the current item
// as a favorite...
return true;
case R.id.action_favorite:
// User chose the "Favorite" action, mark the current item
// as a favorite...
return true;
default:
// If we got here, the user's action was not recognized.
// Invoke the superclass to handle it.
return super.onOptionsItemSelected(item);
}
}
(三)添加Toolbar的返回按鈕
- getSupportActionBar()
- setDisplayHomeAsUpEnabled(true)
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if(getSupportActionBar() != null)
// Enable the Up button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
//...
}
(四)添加Action View和Action Provider按鈕
本節(jié)介紹如何添加兩種通用組件——action view 和 action provider
action view是一個(gè)能提供的豐富功能的組件。例如殿怜,搜索視圖(search action view)允許用戶(hù)在Toolbar中輸入搜索文本,而不用改變Activity或Fragment曙砂。
action provider是一個(gè)可定制的布局的組件头谜,當(dāng)用戶(hù)點(diǎn)擊它,它能控制支配你想以任何方式定義的操作鸠澈。例如柱告,action provider能夠響應(yīng)一個(gè)點(diǎn)擊事件來(lái)展示菜單項(xiàng)。
安卓的支持庫(kù)提供了一些專(zhuān)門(mén)的action view和action provider笑陈。例如际度,使使用SearchView控件實(shí)現(xiàn)搜索查詢(xún)功能,使用ShareActionProvider控件與其他應(yīng)用程序共享信息涵妥。你也可以定義自己的action view和action provider乖菱。
1.action view:
在Toolbar關(guān)聯(lián)的menu中創(chuàng)建新的<item>來(lái)添加action view
(1)actionViewClass:實(shí)現(xiàn)該控件的類(lèi)。
(2)actionLayout:描述該空間的布局資源蓬网。
設(shè)置showAsAction屬性為"ifRoom|collapseActionView"或者"never|collapseActionView"窒所。collapseActionView標(biāo)志指明當(dāng)用戶(hù)不再和它交互時(shí)控件該如何展示:在Toolbar上以小圖標(biāo)顯示,在下拉菜單下以一個(gè)菜單項(xiàng)顯示帆锋。當(dāng)用戶(hù)和action view交互時(shí)吵取,它將在Toolbar上擴(kuò)展。
例如下面添加一個(gè)SearchView:
<item android:id="@+id/action_search"
android:title="@string/action_search"
android:icon="@drawable/ic_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView" />
如果你需要配置控件锯厢,那么在onCreateOptionsMenu()回調(diào)函數(shù)下皮官,通過(guò)調(diào)用靜態(tài)getActionView()方法獲取action views的對(duì)象引用脯倒。例如,下面代碼中對(duì)SearchView的對(duì)象引用:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_activity_actions, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView =
(SearchView)MenuItemCompat.getActionView(searchItem);
MenuItemCompat.getActionView(searchItem);
// Configure the search info and add any event listeners...
return super.onCreateOptionsMenu(menu);
}
響應(yīng)action view的擴(kuò)展
- onMenuItemActionCollapse()
- onMenuItemActionExpand()
設(shè)置監(jiān)聽(tīng)捺氢,當(dāng)SearchView折疊和擴(kuò)展時(shí)的響應(yīng)事件盔憨,代碼如下:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.options, menu);
// Define the listener
OnActionExpandListener expandListener = new OnActionExpandListener() {
@Override
public boolean onMenuItemActionCollapse(MenuItem item) {
// Do something when action item collapses
return true; //Return true to collapse action view
}
@Override
public boolean onMenuItemActionExpand(MenuItem item) {
// Do something when expanded
return true; // Return true to expand action view
}
};
// Get the MenuItem for the action item MenuItem actionMenuItem = menu.findItem(R.id.myActionItem);
// Assign the listener to that action item
MenuItemCompat.setOnActionExpandListener(actionMenuItem, expandListener);
// Any other things you have to do when creating the options menu…
return true;
}
2.action provider:
下面將聲明一個(gè)ShareActionProvider,這是一種在支持庫(kù)中定義的允許當(dāng)前應(yīng)用與其他應(yīng)用分享數(shù)據(jù)的控件讯沈,和action view差不多郁岩,直接貼代碼:
<item android:id="@+id/action_share"
android:title="@string/share"
app:showAsAction="ifRoom"
app:actionProviderClassapp:actionProviderClass="
android.support.v7.widget.ShareActionProvider" />
這里不需要為控件聲明一個(gè)圖標(biāo),因?yàn)镾hareActionProvider提供自己的圖標(biāo)缺狠。
總結(jié):Toolbar的基本用法差不多到此結(jié)束问慎,以后將繼續(xù)推出有關(guān)user interface(用戶(hù)界面)的文章,剛?cè)腴T(mén)安卓挤茄,也是第一次發(fā)表文章如叼,有錯(cuò)誤請(qǐng)指正,共同進(jìn)步穷劈,與諸君共勉笼恰。