アクションバーウィジェットのカスタマイズ

画像 この記事は、 android-developersブログのトピックの翻訳です。 必要な方法でアクションバーウィジェットのスタイルを設定する方法を示します。 例として、上記のブログの一般的な配色のウィジェットのデザインの変更を検討します。



Action Barパターンの登場以来、多くの時間が経過し、多くの開発者が既にアプリケーションに実装しています。 Android 3.0(Honeycomb)では、このパターンは通常、SDKの一部であり、ナビゲーションパラダイム全体です。 一般に受け入れられているナビゲーション要素を使用すると、ユーザーによるプログラムの開発が簡単になり(おそらく既に彼と一緒に働いているため)、開発者が独自の「バイク」を思いつく必要はありません。 しかし、誰もが同じパターンを使用するため、当然、誰もが自分のアプリケーションに合わせてそれを様式化します。 次の例は、アプリケーションの全体的な外観/画像のアクションバーのスタイルを設定する方法を示しています。 android-developersブログに合わせてデフォルトのHolo.Lightテーマを変更します。



<style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light"></style>
      
      







アイコン



Android Asset Studioを使用して、選択した配色でアイコンを作成できます。 この画像をロゴとして使用します。



画像




ナビゲーション



さらに、ナビゲーションセクションは3つの異なるモードで動作します。 それらを順番に検討します。



標準


標準モードでは、単にアクティビティという名前が表示されます。 このため、様式化は必要ありません。さらに先に進みましょう。



一覧


左側は標準のドロップダウンリストで、右側は必要な効果です。



画像



標準リストでは、シアンが支配的な配色を使用しています。 必要なスキームを実装するには、 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>
      
      





このxmlファイルは、 状態リスト9パッチ画像の組み合わせを使用して、ハイライト、スピナー、およびトップバーを装飾します。



タブ



以下は、「前」タブと「後」タブのデザインのスクリーンショットです。



画像



繰り返しますが、標準のタブテーマは青で支配されています。 再登録するには、 android:actionBarTabStyleをリロードします。



 <!--    --> <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>
      
      







アクション



そして再び、「前」と「後」。

画像



1つまたは別の要素を選択すると、青色で強調表示されます。 変更するには、 android:selectableItemBackgroundをリロードします。



 <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
      
      







また、展開すると、メニューのリストの上部に青い長方形が表示されます。 変更するには、 Android:popupMenuStyleをリロードします。



 <!--    --> <style name="MyPopupMenu" parent="android:style/Widget.Holo.Light.ListPopupWindow"> <item name="android:popupBackground">@drawable/ad_menu_dropdown_panel_holo_light</item> </style>
      
      







メニューで選択したアイテムの色も変更します。



 <!--      --> <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>
      
      







画像



背景



原則として、背景を変更することもできます。 デフォルトでは、 Holo.Lightテーマでは透明です。 変更するには、 Android:actionBarStyleをリロードする必要があります。



すべてをまとめる



すべての要素を結合するには、カスタムスタイルを作成します。



 <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 android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/Theme.AndroidDevelopers" android:logo="@drawable/ad_logo">
      
      







また、オーバーロードしたスタイルの一部がすべてのウィジェットに影響することに注意することも重要です(たとえば、 android:selectableItemBackground )。 つまり、アプリケーション全体のデザインを変更します。これは、共通のスタイルを維持しようとする場合に非常に便利です。



終わり



サンプルソースcode.google.com取得できます。



All Articles