ActionBar介紹

        本文簡單的介紹一下ActionBar。若有錯誤之處請多指教。html

1、概述

       Action Bar是Android 3.0以後引入的新的對象,它一般位於應用程序的頂部,是一個用來定義用戶區域的Windows特性,系統可以很好根據不一樣的屏幕配置來適應Action Bar的外觀。ActionBar是咱們能夠爲activity實現的最重要的設計元素之一。其提供了多種 UI 特性,可讓咱們的 app 與其餘 Android app 保持較高的一致性,從而爲用戶所熟悉。java

    其核心的功能包括:android

  • 一個專門的空間用來顯示你的app的標識(Logo),以及指出目前所處在app的哪一個頁面。web

  • 以一種可預見的方式訪問重要的操做(好比搜索、建立、共享等)。app

  • 支持導航和視圖切換(經過Tabs和下拉列表)。ide

actionbar-actions

2、創建Action Bar

注意:僅支持 Android 3.0 及以上版本佈局

          ActionBar APIs第一次被添加進來是在Android 3.0(API lever 11) ,可是它在Support Library 兼容Android 2.1 (API level 7) 或者更高中也是可用的。優化

注意:要注意從合適的包中導入ActionBar 類:ui

  • 若是 支持的 API 等級低於 11: 
    import android.support.v7.app.ActionBarspa

  • 若是支持的 API 等級僅僅是 11和更高: 
    import android.app.ActionBar

3、添加Action Bar按鈕

        Action Bar 容許咱們爲當前環境下最重要的操做添加按鈕。那些直接出如今 action bar 中的 icon 和/或文本被稱做action buttons(操做按鈕)。安排不下的或不足夠重要的操做被隱藏在 action overflow (超出空間的action,譯者注)中。

    1.編寫XML資源文件

        全部的操做按鈕和 action overflow 中其餘可用的條目都被定義在 menu資源 的 XML 文件中。經過在項目的res/menu 目錄中新增一個 XML 文件來爲 action bar 添加操做。

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 搜索, 應該做爲動做按鈕展現-->
    <item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"
          app:showAsAction="ifRoom" />
    <!-- 設置, 在溢出菜單中展現 -->
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          app:showAsAction="never" />
</menu>

        上述代碼聲明,當 action bar 有可用空間時,搜索操做將做爲一個操做按鈕來顯示,但設置操做將一直只在 action overflow 中顯示。(默認狀況下,全部的操做都顯示在 action overflow 中,但爲每個操做指明設計意圖是很好的作法。

        icon 屬性要求每張圖片提供一個 resource id。在 @drawable/ 以後的名字必須是存儲在項目目錄res/drawable/ 下位圖圖片的文件名。例如:ic_action_search.png 對應 "@drawable/ic_action_search"。一樣地,title 屬性使用經過 XML 文件定義在項目目錄 res/values/ 中的一個 string 資源,詳情請參見 建立一個簡單的 UI 。

注意: 使用showAction屬性時須要在其之上使用一個定義在<menu>標籤中的用戶自定義的命名空間,當使用Support Libray定義XML資源時這是必須的,由於這個屬性在舊的Android Framework中是不存在的,因此你必需要爲全部定義在Support Libray中的屬性用本身的命令空間做爲他們的前綴。

注意:當建立 icon 和其餘 bitmap 圖片時,要爲不一樣屏幕密度下的顯示效果提供多個優化的版本,這一點很重要。在 支持不一樣屏幕 課程中將會更詳細地討論。

    2.添加操做

        要爲 action bar 佈局菜單條目,就要在 activity 中實現 onCreateOptionsMenu() 回調方法來 inflate 菜單資源從而獲取 Menu 對象。例如:

@Override
public boolean onCreateOptionsMenu(Menu menu) {    
    // 爲ActionBar擴展菜單項
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_activity_actions, menu);    
    return super.onCreateOptionsMenu(menu);
}

    3.爲操做按鈕添加響應事件

        當用戶按下某一個操做按鈕或者 action overflow 中的其餘條目,系統將調用 activity 中onOptionsItemSelected()的回調方法。在該方法的實現裏面調用MenuItem的getItemId()來判斷哪一個條目被按下 - 返回的 ID 會匹配咱們聲明對應的 <item> 元素中 android:id 屬性的值。

@Override
public boolean onOptionsItemSelected(MenuItem item) {    
    // 處理動做按鈕的點擊事件
    switch (item.getItemId()) {        
        case R.id.action_search:
            openSearch();            
            return true;        
        case R.id.action_settings:
            openSettings();            
            return true;        
         default:            
         return super.onOptionsItemSelected(item);
    }
}

    4.爲下級 Activity 添加向上按鈕

        在不是程序入口的其餘全部屏中(activity 不位於主屏時),須要在 action bar 中爲用戶提供一個導航到邏輯父屏的不是程序入口的其餘全部屏中(activity 不位於主屏時),須要在 action bar 中爲用戶提供一個導航到邏輯父屏的up button(向上按鈕)

actionbar-up.png

圖 2. Gmail 中的 up button。

        當運行在 Android 4.1(API level 16) 或更高版本,或者使用 Support 庫中的 ActionBarActivity 時,實現向上導航須要在 manifest 文件中聲明父 activity ,同時在 action bar 中設置向上按鈕可用。

在 manifest 中聲明一個 activity 的父類,例如:

<application ... >
    ...   
     <!-- 主 main/home 活動 (沒有上級活動) -->
    <activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...    
     </activity>
    <!-- 主活動的一個子活動-->
    <activity
        android:name="com.example.myfirstapp.DisplayMessageActivity"
        android:label="@string/title_activity_display_message"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >
        <!--  meta-data 用於支持 support 4.0 以及如下來指明上級活動 -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

        而後,經過調用setDisplayHomeAsUpEnabled() 來把 app icon 設置成可用的向上按鈕:

@Override
public void onCreate(Bundle savedInstanceState) {    
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_displaymessage);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);   
    // 若是你的minSdkVersion屬性是11活更高, 應該這麼用:
    // getActionBar().setDisplayHomeAsUpEnabled(true);}

        因爲系統已經知道 MainActivity 是 DisplayMessageActivity 的父 activity,當用戶按下向上按鈕時,系統會導航到恰當的父 activity , 你不須要去處理向上按鈕的事件。

        也能夠重寫 getSupportParentActivityIntent() and onCreateSupportNavigateUpTaskStack() 在你的activity 中,詳細見https://developer.android.com/guide/topics/ui/actionbar.html

    5.配置ActionBar

manifests/AndroidManifest.xml
<activity android:theme="@style/Theme.AppCompat.Light" ... >

4、自定義Action Bar的風格

        普通屬性:

        actionBarStyle:這是一個特殊的的樣式資源,經過它能夠爲ActionBar定義不少樣式。Widget.AppCompat.ActionBar  這個顏色默認的樣式,你應該使用它做爲父樣式。

    • background :背景。

    • backgroundStacked : 層疊背景。

    • backgroundSplit :split背景。

    • actionButtonStyle :action按鈕樣式,使用Widget.AppCompat.ActionButton, 做爲其父樣式。

    • actionOverflowButtonStyle 使用 Widget.AppCompat.ActionButton.Overflow, 做爲其父樣式。

    • displayOptions 定義一個或者多個呈現樣式, 例如是否使用logo, Activity標題 等等,詳細查看官方文檔。

    • divider:分割。

    • titleTextStyle:標題樣式。使用 TextAppearance.AppCompat.Widget.ActionBar.Title,做爲其父樣式。                             

    1.使用Android主題

    Android包含兩個基本的 activity 主題,這兩個主題決定了 action bar 的顏色:

  • ‍‍‍‍‍‍‍Theme.Holo,一個 「dark」 的主題

actionbar-theme-dark@2x.png

  • ‍‍Theme.Holo.Light‍‍,一個 「light」 的主題

actionbar-theme-light-solid@2x.png

這些主題便可以被應用到 app 全局,也能夠經過在 manifest 文件中設置 <application> 元素 或 <activity>元素的 android:theme 屬性,對單一的 activity 進行設置。

例如:

<application android:theme="@android:style/Theme.Holo.Light" ... />

能夠經過聲明 activity 的主題爲 Theme.Holo.Light.DarkActionBar 來達到以下效果:action bar 爲dark,其餘部分爲light。

actionbar-theme-light-darkactionbar@2x.png

當使用 Support 庫時,必須使用 Theme.AppCompat 主題替代:

  • Theme.AppCompat,一個「dark」的主題

  • Theme.AppCompat.Light,一個「light」的主題

  • Theme.AppCompat.Light.DarkActionBar,一個帶有「dark」 action bar 的「light」主題

必定要確保咱們使用的 action bar icon 的顏色與 action bar 自己的顏色有差別。Action Bar Icon Pack 爲 Holo 「dark」和「light」的 action bar 提供了標準的 action icon。

    2.自定義背景

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 應用於程序或者活動的主題 -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar 樣式 -->
    <style name="MyActionBar"
           parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>
</resources>

    3.自定義文本顏色

    修改 action bar 中的文本顏色,須要分別設置每一個元素的屬性:

  • Action bar 的標題:建立一種自定義樣式,並指定 textColor 屬性;同時,在自定義的 actionBarStyle中爲 titleTextStyle 屬性指定爲剛纔的自定義樣式。

注意:被應用到 titleTextStyle 的自定義樣式應該使用 TextAppearance.Holo.Widget.ActionBar.Title 做爲父樣式。

  • Action bar tabs:在 activity 主題中重寫 actionBarTabTextStyle

  • Action 按鈕:在 activity 主題中重寫 actionMenuTextColor

res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 應用於程序或者活動的主題 -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.Holo">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
        <item name="android:actionMenuTextColor">@color/actionbar_text</item>   
    </style>

    <!-- ActionBar 樣式 -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

    <!-- ActionBar 標題文本 -->
    <style name="MyActionBarTitleText"
           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>

    <!-- ActionBar Tab標籤 文本樣式 -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>

     這是對ActionBar的一次簡單使用,本文中沒有提到Navigation Tabs 、ShareActionProvider等,後續更新。

相關文章
相關標籤/搜索