Pull to refresh

Кастомизация виджета Action Bar

Reading time 4 min
Views 28K
imageСтатья является переводом топика из блога android-developers. В ней показывается, как стилизовать виджет Action Bar нужным вам образом. В качестве примера рассматривается изменение оформления виджета под общую цветовую гамму вышеописанного блога.

Со времени появления паттерна Action Bar прошло уже немало времени, и многие разработчики уже внедрили его в свои приложения. В Android 3.0 (Honeycomb) данный паттерн вообще является частью SDK и общей навигационной парадигмы. Использование общепринятого элемента навигации упрощает освоение программы пользователем (потому что он, скорее всего, уже работал с ним), и не требует от разработчика придумывать свои собственные «велосипеды». Но раз уж все используют один и тот же паттерн, то, ясное дело, каждый стилизует его под своё приложение. Следующий пример показывает, как стилизовать Action Bar под общий вид/имидж приложения. Будем изменять стандартную тему оформления Holo.Light для соответствия блогу android-developers.

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


Иконка


Для создания иконки в выбранной цветовой схеме можно использовать Android Asset Studio. Будем использовать это изображение, как логотип.

image


Навигация


Далее, секция навигации работает в трёх разных режимах. Рассмотрим их по очереди.

Стандартный

Стандартный режим просто отображает название Activity. Для этого стилизация не нужна, поехали дальше.

Список

Слева — стандартный выпадающий список, справа — тот эффект, который нам нужен.

image

В стандартном списке используется цветовая схема, в которой доминирует голубой цвет. Чтобы реализовать нужную нам схему, перегрузим 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-файле для оформления подсветки, спиннера и верхнего bar'a используется комбинация state-list'ов и nine-patch изображений.

Вкладки


Ниже расположены скриншоты оформления вкладок «до» и «после».

image

И снова, в стандартной тема для вкладок доминирует голубой цвет. Для переоформления перегрузим 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>


Действия (Actions)


И снова, «до» и «после».
image

При выделении того или иного, элемента он подсвечивается голубым. Для изменения, перегрузим 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>


Кроме этого еще нужно изменить оформление чекбоксов и radio buttons.

<item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
<item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>


image

Фон


В принципе, можно также изменить фон. По умолчанию, в теме 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 или всему приложению.


<activity android:name=".MainActivity" 
          android:label="@string/app_name"
          android:theme="@style/Theme.AndroidDevelopers"
          android:logo="@drawable/ad_logo">


Важно еще отметить, что некоторые стили, которые мы перегрузили, действуют на все виджеты (например android:selectableItemBackground). То есть, мы таким образом изменяем оформление всего приложения, что бывает весьма полезно, если вы стараетесь выдержать общий стиль.

Конец


Исходник сэмпла можно взять на code.google.com.
Tags:
Hubs:
+28
Comments 29
Comments Comments 29

Articles