Customizing the Action Bar をてきとう翻訳してみた

日本でも、Xoom、Optimus padなどのHoneycomb端末が発売されましたし、そろそろ重い腰を上げてHoneycomb対応しなくてはいけない雰囲気になってきました。というわけで、HoneycombのUIの要となるAction BarのカスタマイズについてAndroid developer blogの記事を適当翻訳したので、メモがてらおいておきます。寝ぼけながら訳したので変なところがあるはず…ご指摘ください。

Android Developers Blog: Customizing the Action Bar

Action BarのUIデザインパターンについて過去に紹介してから、その使い勝手からたくさんのアプリで採用されてきました。Android 3.0（Honeycomb）では、タブレット端末などで余分の広くなった領域を有効利用するために、このUIデザインパターンは標準となってます。Honeycomb対応のアプリでAction Bar を使うことで、ユーザから見て親しみやすい印象を持たせることができます。またHoneycomb以降でてくる多様なAndroid端末に対応する準備をしといたほうがいいと思われます。
Action Barsは本当に親しみやすさを出すには効果的ですが、同一にしないと意味がありません！以下のサンプルコードと付録のプロジェクトで、どのようにAction Barのスタイルをアプリのブランディングに合うよう変更するかをデモします。HoneycombのHolo.Lightテーマを例にとって、これをこのblogのカラースキームに合うようにカスタマイズしていきます。
<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
…
</style>
Icon

このステップは簡単です。Android Asset Studioを使って、選んだカラースキームでアイコンを作成することができます。よりブランディングされたlogoを作成する出発点としてこのイメージを使用していきます。
Navigation

次に、Action BarのNavigationの、その３つのモード *1について取り扱います。順番に見ていきましょう。

Standard

Action Barの標準のナビゲーションモードは単にActivityのタイトルを表示するだけです。なのでstyleの変更は必要ありません…次！
List

左が標準のリストをドロップダウンしたところです。これを右の画像のように変更するとします。

リストナビゲーションモードでのデフォルトスタイルは、青系のカラースキームです。カラースキームを確認するには、折り畳まれたコントロールにタッチして、そのトップバーと拡張リストを選択ハイライトの両方をみればわかります。 android:actionDropDownStyleをオーバライドすることによって、この要素のカラースキームをカスタマイズすることができます。

<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
    <item name="android:background">@drawable/ad_spinner_background_holo_light</item>
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item>
    <item name="android:dropDownSelector">@drawable/ad_selectable_background</item>
</style>
上記は、state list drawablesと閉じた状態のspinnerの9-patchの画像の合わせ技を使っており、広げたリストのトップバーはアイテムを選択したときのハイライトカラーを設定してます。
Tabs

タブナビゲーションのビフォーアフターは以下の通り。

タブナビゲーションは標準の青系のカラーリングです。これをカスタマイズするには、android:actionBarTabStyleに希望のパレットを使ってカスタマイズしたdrawableを設定します。

<style name="MyActionBarTabStyle" parent="android:style/Widget.Holo.Light.ActionBarView_TabView">
    <item name="android:background">@drawable/actionbar_tab_bg</item>
    <item name="android:paddingLeft">32dp</item>
    <item name="android:paddingRight">32dp</item>
</style>
Actions

Action Barの独自アイテムのビフォーアフターは以下の通り。

独自アクションアイテムは、選択されたときデフォルトの青色の背景を継承します。これもandroid:selectableItemBackgroundをオーバライドし、希望の色のshape drawableを設定することでカスタマイズできます。
<item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
また、オーバフローメニューにも注意が必要です。広げるとリストの上部に青いバーが見えています。android:popupMenuStyleがオーバライドでき、オーバフローメニューのリストの上部用にカスタムしたdrawableを設定します。（実際には先ほどリストナビゲーションに使ったdrawableと全く同じです）

<style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow">
    <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item> 
</style>
また、オーバーフローメニューの中の選択された項目もデフォルトの選択色になってます。android:dropDownListViewStyleをオーバライドすることで、カスタマイズしたい選択色に変更可能です。

<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
    <item name="android:listSelector">@drawable/ad_selectable_background</item>
</style>
こういう変更はたくさんあるので、作成したアプリの細かいところまで注意が必要です。オーバーフローのメニュー項目の中にあるチェックボタンやラジオボタンのハイライトがまだ青いままです。これらもオーバライドしましょう。
<item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
Background

今回希望のカラーリングにするために、背景はフォームHolo.Lightを継承したまま（背景透過状態）にしました。もしカスタマイズしたい場合、android:actionBarStyleのandroid:backgroundをオーバライドすることで簡単にカスタマイズできます。
<style name="MyActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@drawable/action_bar_background</item>
</style>
全て一気に変更する場合

これらのコンポーネントのすべてをまとめて、カスタムスタイルを作成できます。
<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
    <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
    <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
    <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
    <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
    <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
    <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
</style>
個々のActivity、またはアプリケーション全体にこのスタイルを適用できます。
<activity android:name=".MainActivity" 
          android:label="@string/app_name"
          android:theme="@style/Theme.AndroidDevelopers"
          android:logo="@drawable/ad_logo">
注意すべきは、今回の例でオーバーライドしたシステムスタイルのうちのいくつかはAction Bar以外にも影響することです。例えば、オーバライドしたandroid:selectableItemBackgroundは選択状態をサポートする他のwidgetにも影響するでしょう。アプリ全体にスタイルを適用するには有用ですが、必ず一貫性があるカスタマイズになっているかどうかテストする必要があります。
親しみやすく、アプリのスタイルに合わせるためには

アクションバーをカスタマイズするのは、標準コンポーネントを使うよりアプリのブランディングを広げるかなりいい方法です。この効果を得る代わりに責任も負うことになります。ユーザーインタフェースをカスタマイズするときは、アプリのわかりやすさ、操作しやすさが決して損なわれてないかどうか最新の注意を払わなければなりません。特に、ハイライトカラーは、文字とのコントラストが低くなっていないかどうか、全状態でdrawableが適用されていないかどうかに注意が必要です。デモアプリを提供します。Action Barの提供機能の操作とカスタマイズテーマの適用方法のデモに利用ください。