取代動作列
概觀
最常見的用法 Toolbar
之一是將默認動作列取代為自定義 Toolbar
專案(建立新的 Android 專案時,它會使用預設動作列)。 Toolbar
因為 能夠將品牌標誌、標題、功能表項、導覽按鈕,甚至自定義檢視新增至活動 UI 的應用程式行區段,因此它會在預設動作列上大幅升級。
若要將應用程式的預設動作列取代為 Toolbar
:
建立新的自定義主題,並修改應用程式的屬性,使其使用這個新主題。
windowActionBar
停用自定義主題中的 屬性,並啟用windowNoTitle
屬性。定義的配置
Toolbar
。在活動的
Toolbar
Main.axml 版面配置檔案中包含版面配置。將程式代碼新增至 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
:
將功能表圖示(如有必要)新增至
mipmap-
應用程式項目的資料夾。 Google 會在 [材料圖示] 頁面上提供一組免費的功能表圖示。在 [資源/功能表] 底下新增功能表資源檔,以定義功能表項的內容。
OnCreateOptionsMenu
實作 Activity 的 方法 – 這個方法會擴大功能表項。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
,如果有足夠的空間可顯示這些專案。 [ 喜好設定 ] 功能表項會設定 showAsAction
為 never
–這會導致 [喜好設定 ] 功能表出現在 溢位 功能表中(三個垂直點)。
實作 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
正確設定版面配置或自定義主題,可能會造成此錯誤。