1. 程式人生 > >安卓開發入門:工具欄(Action Bar)

安卓開發入門:工具欄(Action Bar)

本文針對Android3.0及以上。主要是官方文件的翻譯加上我自己的理解。對應於官方文件的develop -- Training -- Adding the Action Bar

內容:

1.新增工具欄

2.新增工具欄按鈕

    2.1 工具欄佈局

    2.2新增工具欄按鈕的步驟

3.定製工具欄外觀

    3.1 使用內建的主題

    3.2 自定義背景顏色

    3.3 自定義文字顏色

        3.3.1 自定義工具欄標題文字顏色

        3.3.2 自定義選項卡和按鈕的文字顏色

3.3.3 自定義Tab Indicator

4. 工具欄重疊模式


1. 新增工具欄(Activity Bar)

新增一個工具欄需要你的app所使用的activity theme(活動主題)本身支援工具欄。從Android 3.0(API level 11)開始,所有使用Theme.Holo主題(以及它的擴充套件主題)的activity預設包含了工具欄。而如果你app targetSdkVersion或者minSdkVersion屬性設定為“11”及以上的話,它預設的主題風格就是Theme.Hplp。所以我們現在建立的安卓activity都是預設帶工具欄的。

OK,為你的activity建立一個工具欄就這麼簡單,保證你的工程是為Android 3.0以上建議的就行。不需要任何其他附件操作。現在我們用ADT或者Android Studio建立的activity預設都是帶工具欄的。Android2.x需要額外的步驟,詳情參考官方文件。

預設建立的一個activity,看起來是這樣的:


除了一個圖示和app名稱,沒有按鈕,也不能響應事件。

注意:如果你要使用自定義主題,保證你的主題繼承自Theme.Holo就行。

2. 為工具欄新增按鈕

上面的工具欄除了一個標題和圖示,什麼也沒用。現在我們來為它新增按鈕。但是,但是,在此之前,我們先來了解一下工具欄上有哪些東東。

2.1 工具欄佈局


工具的區域可以分為4塊:圖示、標題、常用按鈕區域、action overflow(放不下的按鈕都放在這裡)

action overflow按鈕會彈出二級按鈕,通常放不下的按鈕都放在這裡。如下圖:


2.2新增工具欄按鈕的步驟:

step1:在XML檔案中定義工具欄按鈕

所有的工具欄按鈕都可以XML menu resource中定義,還可以指定按鈕是在常用按鈕區域,還是在overflow中。

在res/menu/目錄下新建一個XML檔案main_activity_actions.xml。為每一個你要指定的按鈕新增一個<item>條目。

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- Search, should appear as action button -->
    <item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"
          android:showAsAction="ifRoom" /><!--如果有空間就放在常用按鈕區域>
    <!-- Settings, should always be in the overflow -->
    <item android:id="@+id/action_settings"
          android:title="@string/action_settings"
          android:showAsAction="never" /><!--放在overflow中>
</menu>
所有按鈕的圖片都用id指定。可以去官網下載官方提供的工具欄圖示。我們在xml檔案中,將search按鈕放在了常用工具欄區域(如果有空間的話)。將setting按鈕放在overflow中(官方強建議將setting按鈕放在overflow中)。如果你沒為<item>指定showAsAction屬性,那麼預設放在overflow中。

step2:將工具欄按鈕新增到工具欄

經過step1,我們只是定義了工具欄按鈕,它們和工具欄還沒什麼關係。所以在工具欄上也顯示不了。現在我們把它們新增到工具欄上。新增是在activity類的onCreateOptionsMenu中進行的。

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_activity_actions, menu);
    return super.onCreateOptionsMenu(menu);
}

step3:響應工具欄按鈕事件

通過step1和step2,我們只是讓按鈕在工具欄上顯示了。而沒有指定使用者點選按鈕後應該發生什麼。當用戶點選工具欄按鈕後,系統會呼叫你的activity的onOptionsItemSelected()回撥方法。我們可以在這個回撥方法中用getItemId()方法來獲得被點選的按鈕的ID,然根據ID來響應按鈕事件。

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle presses on the action bar items
    switch (item.getItemId()) {
        case R.id.action_search:
            openSearch();
            return true;
        case R.id.action_settings:
            openSettings();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

如果你是在為app的“主activity”新增工具欄,經過上面step1~step3,任務也就完成了。如果是在為“二級activity”新增工具欄的話還得step4。

step4:為“二級activity”新增Up 按鈕


不是所有的activity都是頂層activity,我們得為“低階”的activity提供導航到“父activity”的按鈕,就是上圖中的Up按鈕。Up按鈕是直接在圖示上實現的。同時是圖示,也是Up按鈕。

指定一個activity有Up按鈕,只需要androidmanifest.xml檔案中指定。

<application ... >
    ...
    <!-- The main/home activity (it has no parent activity) -->
    <activity
        android:name="com.example.myfirstapp.MainActivity" ...>
        ...
    </activity>
    <!-- A child of the main activity -->
    <activity
        android:name="com.example.myfirstapp.DisplayMessageActivity"
        android:label="@string/title_activity_display_message"
        android:parentActivityName="com.example.myfirstapp.MainActivity" >
        <!-- Parent activity meta-data to support 4.0 and lower -->
        <meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.example.myfirstapp.MainActivity" />
    </activity>
</application>

然後在activity的onCreate方法中將工具欄設定為可以Up導航,就大工告成了。(注意是在“低階”的activity類的onCreate方法中)
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_displaymessage);

    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    // If your minSdkVersion is 11 or higher, instead use:
    // getActionBar().setDisplayHomeAsUpEnabled(true);
}

現在當在“低階”activity中點選工具欄圖示時,就會導航到“父activity”。

因為我們在androidmanifest.xml中指定,系統已經知道當前activity的“父activity”是誰了,所以我們不必自己處理Up按鈕事件。當收到Up按鈕的點選事件,系統會自動導航到“父activity”。

高階話題

3. 定製你的工具欄外觀

工具欄提供了一種熟悉和可預測的方式來為使用者提供操作或導航。但是這並不意味著你的工具欄必須得和其他app的工具欄長的一模一樣。如果你想讓你的工具欄更有個性,使用樣式和主題資源很輕鬆就能做到。

Android包含了一些內建的Activity主題比如“dark”或“light”工具欄樣式。你可以擴充套件這些主題來定製你的工具欄。

3.1 使用內建的主題

Android包含兩個最基本的主題可以用來指定工具欄的顏色

  • Theme.Holo “黑暗”主題

  • Theme.Holo.Light“明亮”主題

你可以為整個app或單個Activity使用這兩種主題,只需要在androidmanifest檔案中為<application>元素或<activity>元素新增android:theme屬性即可。比如:

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

而且另一種內建的主題Theme.Holo.Light.DarkActionBar可以讓你的工具欄變成黑色,而activity其餘的部分使用light color。



3.2 自定義背景顏色

要改變工具欄的背景顏色,你得

1.為你的activity建立一個自定義的主題。(在res/values/目錄下建立一個values resource檔案)

2.重寫這個主題的actionBarStyle屬性。讓actionBarStyle屬性指向另一個自定義的樣式。

3.將2中指向的自定義樣式的background屬性設定為你想要的背景圖片或顏色。

就像下面這樣:

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>
    
    <style name="MyActionBar"
        parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@drawable/bg</item>
    </style>
</resources>
效果為什麼是這個鬼樣子大哭

(請忽略我用的圖片)

如果你使用的是navigation tabs或split action bar,你同樣可以通過backgroundStacked和backgroundSplit屬性來改變背景。這個小弟還沒用過,所以就不詳細介紹了。

3.3 自定義文字顏色

To modify the color of text in the action bar, you need to override separate properties for each text element:

  • Action bar title: Create a custom style that specifies the textColor property and specify that style for the property in your custom .
  • Action bar tabs: Override  in your activity theme.
  • Action buttons: Override  in your activity theme.
要改變工具欄上的文字顏色。你得根據不同的文字元素進行相應屬性設定。比如工具欄標題文字、選項(tabs)卡文字、按鈕上的文字。

3.3.1 自定義工具欄標題文字顏色

改變工具欄標題文字的顏色有點小複雜:

1.你先為這個工具欄建立一個自定義主題,並重新主題的actionBarStyle屬性。

2.讓主題的actionBarStyle屬性指向另一個自定義工具欄樣式。

3.讓這個自定義工具欄樣式的titleTextStyle屬性指向另一自定義工具欄文字樣式。

4.而且這個工具欄文字樣式必須擴充套件自TextAppearance.Holo.Widget.ActionBar.Title。將它的textColor設為你想要的顏色。

3.3.2 自定義選項卡和按鈕的文字顏色

改變選項卡和按鈕上的文字顏色就簡單一些,只需要3步:

1.為工具欄建立一個自定義主題,並重寫主題的actionBarTabTextStyle屬性(選項卡)或者actionMenuTextColor屬性(按鈕)。

2.將actionBarTabTextStyle屬性(選項卡)或者actionMenuTextColor屬性(按鈕)指向另一個自定義樣式。

3.在自定義樣式中設定textColor屬性。

下面是例子:

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <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 styles -->
    <style name="MyActionBar"
           parent="@style/Widget.Holo.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    </style>

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

    <!-- ActionBar tabs text styles -->
    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">
        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>
注意主題或樣式都擴充套件自哪個內建主題或樣式

3.3.3 自定義Tab Indicator

由於還沒用過Tab,就不介紹了。

4. 工具欄重疊模式

效果大概如下圖,以後待續。。。


參考:

chaoc寫的樣式和主題

官方文件:Action Bar guide