Material Design:Toolbar的使用

前言:
顧名思義送滞,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的全方位使用,至于那些酷炫的效果魂奥,期待我以后的文章放出吧菠剩。
參考文檔:

Toolbar.png

(一)建立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)

自定義toolbar.jpg

可以在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" />
SearchView.png

如果你需要配置控件锯厢,那么在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)步穷劈,與諸君共勉笼恰。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市歇终,隨后出現(xiàn)的幾起案子社证,更是在濱河造成了極大的恐慌,老刑警劉巖评凝,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件追葡,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡奕短,警方通過(guò)查閱死者的電腦和手機(jī)宜肉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)翎碑,“玉大人谬返,你說(shuō)我怎么就攤上這事∪砧荆” “怎么了遣铝?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)达椰。 經(jīng)常有香客問(wèn)我翰蠢,道長(zhǎng),這世上最難降的妖魔是什么啰劲? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任梁沧,我火速辦了婚禮,結(jié)果婚禮上蝇裤,老公的妹妹穿的比我還像新娘廷支。我一直安慰自己频鉴,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布恋拍。 她就那樣靜靜地躺著垛孔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪施敢。 梳的紋絲不亂的頭發(fā)上周荐,一...
    開(kāi)封第一講書(shū)人閱讀 51,292評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音僵娃,去河邊找鬼概作。 笑死,一個(gè)胖子當(dāng)著我的面吹牛默怨,可吹牛的內(nèi)容都是我干的讯榕。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼匙睹,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼愚屁!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起痕檬,我...
    開(kāi)封第一講書(shū)人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤霎槐,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后谆棺,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體栽燕,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年改淑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浴讯。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡朵夏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出榆纽,到底是詐尸還是另有隱情仰猖,我是刑警寧澤,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布奈籽,位于F島的核電站饥侵,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏衣屏。R本人自食惡果不足惜躏升,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望狼忱。 院中可真熱鬧膨疏,春花似錦一睁、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至饲帅,卻和暖如春复凳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背灶泵。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工育八, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人丘逸。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓单鹿,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親深纲。 傳聞我的和親對(duì)象是個(gè)殘疾皇子仲锄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • ¥開(kāi)啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程,因...
    小菜c閱讀 6,408評(píng)論 0 17
  • 原文地址:http://www.android100.org/html/201606/06/241682.html...
    AFinalStone閱讀 925評(píng)論 0 1
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,104評(píng)論 25 707
  • 一 還是老生常談的話題“我是誰(shuí)”湃鹊,“我從哪里來(lái)”儒喊,“我要到何處去”……這個(gè)迷惑了人大半輩子的本源問(wèn)題,或許有的人終...
    載著蝸牛的蒲公英閱讀 187評(píng)論 0 0
  • 即使哭也不愿說(shuō)出心里的理由,
    素奻閱讀 215評(píng)論 0 0