共用方式為


取代動作列

概觀

最常見的用法 Toolbar 之一是將默認動作列取代為自定義 Toolbar 專案(建立新的 Android 專案時,它會使用預設動作列)。 Toolbar因為 能夠將品牌標誌、標題、功能表項、導覽按鈕,甚至自定義檢視新增至活動 UI 的應用程式行區段,因此它會在預設動作列上大幅升級。

若要將應用程式的預設動作列取代為 Toolbar

  1. 建立新的自定義主題,並修改應用程式的屬性,使其使用這個新主題。

  2. windowActionBar停用自定義主題中的 屬性,並啟用 windowNoTitle 屬性。

  3. 定義的配置 Toolbar

  4. 在活動的 Toolbar Main.axml 版面配置檔案中包含版面配置。

  5. 將程式代碼新增至 Activity OnCreate 的 方法,以找出 Toolbar ,並呼叫 SetActionBar 以安裝 ToolBar 作為動作列。

下列各節將詳細說明此程式。 系統會建立簡單的應用程式,並將其動作列取代為自訂 Toolbar

啟動應用程式專案

建立名為 ToolbarFun 的新 Android 專案(如需建立新 Android 專案的詳細資訊,請參閱 Hello,Android )。 建立此項目之後,請將目標和最低 Android API 層級設定為 Android 5.0 (API 層級 21 - Lollipop) 或更新版本。 如需設定 Android 版本層級的詳細資訊,請參閱 瞭解 Android API 層級。 建置並執行應用程式時,它會顯示預設動作列,如下列螢幕快照所示:

默認動作列的螢幕快照

建立自定義主題

開啟 Resources/values 目錄,並建立名為 styles.xml 的新檔案。 以下列 XML 取代其內容:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MyTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:colorPrimary">#5A8622</item>
  </style>
</resources>

此 XML 會定義名為 MyTheme 的新自定義主題,該主題是以 Lollipop 中的 Theme.Material.Light.DarkActionBar 主題為基礎。 屬性 windowNoTitle 設定為 true 以隱藏標題列:

<item name="android:windowNoTitle">true</item>

若要顯示自訂工具列,預設值 ActionBar 必須停用:

<item name="android:windowActionBar">false</item>

橄欖綠色 colorPrimary 設定用於工具列的背景色彩:

<item name="android:colorPrimary">#5A8622</item>

套用自定義主題

編輯 屬性/AndroidManifest.xml ,並將下列 android:theme 屬性新增至 <application> 元素,讓應用程式使用 MyTheme 自定義主題:

<application android:label="@string/app_name" android:theme="@style/MyTheme"></application>

如需將自定義主題套用至應用程式的詳細資訊,請參閱 使用自定義主題

定義工具列配置

在 [ 資源/配置 ] 目錄中,建立名為 toolbar.xml 的新檔案。 以下列 XML 取代其內容:

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"/>

此 XML 會定義取代預設動作列的自定義 Toolbar 。 的最小高度 Toolbar 會設定為它所取代之動作列的大小:

android:minHeight="?android:attr/actionBarSize"

的背景色彩Toolbar會設定為先前在 styles.xml定義的橄欖綠色:

android:background="?android:attr/colorPrimary"

從 Lollipop 開始, android:theme 屬性可用來設定個別檢視的樣式。 ThemeOverlay.Material Lollipop 中引進的主題可讓您重疊默認Theme.Material主題,並覆寫相關的屬性,使其成為淺色或深色。 在此範例中,會 Toolbar 使用深色主題,使其內容以淺色表示:

android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"

使用此設定,讓功能表項與較深的背景色彩形成對比。

包含工具列配置

編輯版面配置檔案 Resources/layout/Main.axml ,並以下列 XML 取代其內容:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
</RelativeLayout>

此版面設定包含 Toolbar toolbar.xml定義的 ,並使用 RelativeLayout 來指定要Toolbar放置在 UI 頂端 (按鈕上方) 的 。

尋找並啟用工具列

編輯 MainActivity.cs並 新增下列using語句:

using Android.Views;

此外,將下列幾行程式代碼新增至 方法的 OnCreate 結尾:

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "My Toolbar";

此程式代碼會 Toolbar 尋找和呼叫 SetActionBar ,讓 Toolbar 在預設動作列特性上採取 。 工具列的標題會變更為 [我的工具列]。 如此程式代碼範例所示, ToolBar 可以直接將 參考為動作列。 編譯並執行此應用程式 – 自訂 Toolbar 項目會顯示為取代預設動作列:

具有綠色色彩配置的自定義工具列螢幕快照

請注意,樣式 Toolbar 與套用至應用程式其餘部分的主題無關 Theme.Material.Light.DarkActionBar

如果執行應用程式時發生例外狀況,請參閱 下面的疑難解答 一節。

新增功能表項

在本節中,功能表會新增至 Toolbar。 的 ToolBar 右上方區域會保留給功能表項 –每個功能表項(也稱為 動作專案)都可以在目前活動內執行動作,也可以代表整個應用程式執行動作。

若要將選單新增至 Toolbar

  1. 將功能表圖示(如有必要)新增至 mipmap- 應用程式項目的資料夾。 Google 會在 [材料圖示] 頁面上提供一組免費的功能表圖示

  2. 在 [資源/功能表] 底下新增功能表資源檔,以定義功能表項的內容。

  3. OnCreateOptionsMenu實作 Activity 的 方法 – 這個方法會擴大功能表項。

  4. OnOptionsItemSelected實作 Activity 的 方法 – 此方法會在點選選選單項時執行動作。

下列各節將 [編輯] 和 [儲存] 功能表項新增至自定義 Toolbar,以詳細示範此程式。

安裝功能表圖示

繼續進行 ToolbarFun 範例應用程式,將功能表圖示新增至應用程式專案。 下載工具列圖示、解壓縮並複製解壓縮 mipmap- 資料夾的內容至 ToolbarFun/Resources的專案 mipmap- 資料夾,並在專案中包含每個新增的圖示檔。

定義功能表資源

在 [資源] 底下建立新的功能表子目錄。 在 功能表 子目錄中,建立名為 top_menus.xml 的新功能表資源檔,並將其內容取代為下列 XML:

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
       android:id="@+id/menu_edit"
       android:icon="@mipmap/ic_action_content_create"
       android:showAsAction="ifRoom"
       android:title="Edit" />
  <item
       android:id="@+id/menu_save"
       android:icon="@mipmap/ic_action_content_save"
       android:showAsAction="ifRoom"
       android:title="Save" />
  <item
       android:id="@+id/menu_preferences"
       android:showAsAction="never"
       android:title="Preferences" />
</menu>

此 XML 會建立三個選單項:

  • 使用ic_action_content_create.png圖示的 [編輯] 功能表項(鉛筆)。

  • 使用圖示的 ic_action_content_save.png [儲存] 功能表項(磁碟)。

  • 沒有圖示的 [喜好設定] 選單項。

[showAsAction編輯] 和 [儲存] 功能表項的屬性會設定為 ifRoom –此設定會讓這些功能表項出現在 中Toolbar,如果有足夠的空間可顯示這些專案。 [ 喜好設定 ] 功能表項會設定 showAsActionnever –這會導致 [喜好設定 ] 功能表出現在 溢位 功能表中(三個垂直點)。

實作 OnCreateOptionsMenu

將下列方法新增至 MainActivity.cs

public override bool OnCreateOptionsMenu(IMenu menu)
{
    MenuInflater.Inflate(Resource.Menu.top_menus, menu);
    return base.OnCreateOptionsMenu(menu);
}

Android 會呼叫 OnCreateOptionsMenu 方法,讓應用程式可以指定活動的功能表資源。 在這裡方法中 ,top_menus.xml 資源會擴充至傳遞 menu的 。 此程式代碼會導致新的 [編輯]、 [儲存] 和 [喜好設定 ] 功能表項出現在 中 Toolbar

實作 OnOptionsItemSelected

將下列方法新增至 MainActivity.cs

public override bool OnOptionsItemSelected(IMenuItem item)
{
    Toast.MakeText(this, "Action selected: " + item.TitleFormatted,
        ToastLength.Short).Show();
    return base.OnOptionsItemSelected(item);
}

當使用者點選功能表項時,Android 會呼叫 OnOptionsItemSelected 方法,並傳入選取的功能表項。 在此範例中,實作只會顯示快顯通知,指出已點選哪個功能表項。

建置並執行 ToolbarFun 以查看工具列中的新功能表項。 現在 Toolbar 會顯示三個功能表圖示,如下列螢幕快照所示:

說明 [編輯]、[儲存] 和 [溢位] 功能表項位置的圖表

當使用者點選 [編輯 ] 功能表項時,會顯示快顯通知,指出 OnOptionsItemSelected 已呼叫 方法:

點選 [編輯專案] 時顯示的快顯通知螢幕快照

當使用者點選溢位功能表時, 會顯示 [喜好設定 ] 功能表項。 通常,較不常見的動作應該放在溢位功能表中 – 此範例會使用 [喜好設定] 的溢位功能表,因為它不會像 [編輯] 和 [儲存] 一樣常使用:

[溢位] 功能表中出現的 [喜好設定] 功能表項螢幕快照

如需 Android 功能表的詳細資訊,請參閱 Android 開發人員 功能表 主題。

疑難排解

下列秘訣可協助偵錯將動作列取代為工具列時可能發生的問題。

活動已經有動作列

如果應用程式未正確設定為使用自訂主題,如套用自定義主題中所述,執行應用程式時可能會發生下列例外狀況:

未使用自定義主題時可能發生的錯誤

此外,可能會產生如下的錯誤訊息: Java.Lang.IllegalStateException:此活動已經有窗口裝飾所提供的動作列。

若要更正此錯誤,請確認android:theme自定義主題的屬性已新增至 <application> [屬性/AndroidManifest.xml] 中,如先前套用自定義主題中所述。 此外,如果未 Toolbar 正確設定版面配置或自定義主題,可能會造成此錯誤。