|
Панель дій забезпечує користувача додатку знайомий і передбачуваний спосіб виконання дій і навігації, але це не означає, що вона повинна виглядати точно так, як і в інших додатках.
Можете стилізувати панель дій за допомогою стилів і тематичних ресурсів Android.
Android-включає в себе кілька вбудованих тем activity, які включають "темні" або "легкі" стилі панелі дій. Ви також можете розширити ці теми для подальшого налаштування зовнішнього вигляд панелі дій.
Примітка: Якщо ви використовуєте API Support Library для панелі дій, то повинні використовувати (або скасувати) сім'ю стилів Theme.AppCompat (а не сім'ю Theme.Holo, доступну на рівні API 11 і вище). При цьому, кожна властивість стилю, яку ви оголошуєте, повинна бути оголошена двічі: один раз за допомогою властивості стилю платформи (android: properties) і один раз властивості стилю включені в Support Library (властивості appcompat.R.attr - контекстом цих властивостей насправді є ваш додаток). Подивіться наведені нижче приклади для подробиць.
ВИКОРИСТАННЯ ТЕМИ ANDROID
Android-включає в себе дві базові теми activity, які диктують колір панелі дій:
• Theme.Holo для "темної" теми.
• Theme.Holo.Light для «легкої» теми.
Ви можете застосувати ці теми для всіх додатків або окремих видів activity, оголосивши їх у файлі маніфесту з атрибутом android:theme для елемента <application> або для індивідуальних <> елементів <activity>.
Наприклад:
<application android:theme="@android:style/Theme.Holo.Light" ... />
Ви також можете використовувати темну панель дій, а для іншої частини activity використати схему світлого кольору, оголосивши тему Theme.Holo.Light.DarkActionBar.
При використанні Support Library, необхідно використовувати теми Theme.AppCompat:
• Theme.AppCompat для "темної" теми.
• Theme.AppCompat.Light для «легкої» теми.
• Theme.AppCompat.Light.DarkActionBar для легкої теми з темною панеллю дій.
Переконайтеся, що використовуєте значки на панелі дій, які правильно контрастують з кольором панелі дій. Щоб допомогти вам, Action Bar Icon Pack включає в себе стандартні іконки дій для використання як з Holo light так і з Holo dark панелями дій.
НАЛАШТУВАННЯ ФОНУ
Щоб змінити фон панелі дій, створіть власну тему для своєї activity, яка перекриває властивості actionBarStyle. Ця властивість вказує на інший стиль, в якому ви можете змінити параметри background, щоб задати drawable-ресурс для фону бару дії.
Якщо ваш додаток використовує navigation tabs (навігаційні вкладки) або split action bar (розділену дій), то ви також можете вказати фон для цих панелей, використовуючи властивості backgroundStacked і backgroundSplit, відповідно.
Увага: Важливо, щоб ви оголосили відповідну батьківський тему, під яку буде налаштовуватися ваша користувальницька тема, а стиль наслідувати її стилі. Без батьківського стилю, панель дій буде без багатьох властивостей стилю, якщо ви явно не оголошувати їх самі.
Для Android 3.0 і тільки вище
Припідтримці Android 3.0 і тільки вище, ви можете визначити фон панелі дій таким чином:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_background</item>
</style>
</resources>
Потім застосувати тему для всього додатку або окремих видів activity:
<application android:theme="@style/CustomActionBarTheme" ... />
Для Android 2.1 і вище
При використанні Support Library, для тієї ж теми, що і вище, повинно замість нього виглядати так:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="background">@drawable/actionbar_background</item>
</style>
</resources>
Потім застосувати тему для всього додатку або окремих видів activity:
<application android:theme="@style/CustomActionBarTheme" ... />
НАЛАШТУВАННЯ КОЛЬОРУ ТЕКСТУ
Щоб змінити колір тексту на панелі дій, ви повинні перевизначити окремі властивості для кожного елемента тексту:
• Назва панелі дій: Створіть користувацький стиль, який визначається властивістю textColor і вкажіть, що цей стиль для параметру titleTextStyle в користувальницькому actionBarStyle.
Примітка: користувальницький стиль застосований до titleTextStyle повинен використовувати TextAppearance.Holo.Widget.ActionBar.Title як батьківський стиль.
• Вкладки панелі дій: Перепишіть actionBarTabTextStyle в темі вашої activity.
• Кнопки дій: Перепишіть actionMenuTextColor в темі вашої activity.
Для Android 3.0 і вище тільки
При підтримці Android 3.0 і тільки вище, ваш XML-файл стилю може виглядати наступним чином:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.Holo">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.Holo.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MyActionBarTitleText"
parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
</style>
<!-- ActionBar tabs text styles -->
<style name="MyActionBarTabText"
parent="@style/Widget.Holo.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
</style>
</resources>
Для Android 2.1 і вище
При використанні Support Library, ваш XML-файл стилю може виглядати наступним чином:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">@style/MyActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MyActionBarTitleText"
parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
<!-- ActionBar tabs text -->
<style name="MyActionBarTabText"
parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
</resources>
НАЛАШТУВАННЯ ІНДИКАТОРА ВКЛАДКИ
Щоб змінити індикатор, використовуваний для навігаційних вкладок, створіть тему activity, яка переписує властивість actionBarTabStyle. Ця властивість вказує на інший ресурс стилю, в якому ви перевизначите властивості фону, які повинен вказати стан-список drawable.
Примітка: стан список drawable важливий, щоб вибрана вкладка показувала свій стан з фоном, який відрізняється від інших вкладках. Для отримання більш докладної інформації про те, як створити drawable-ресурс, що обробляє кілька станів кнопки, читайте документацію State List.
Наприклад, от стан-список drawable, який оголошує певне фонове зображення для різних станів вкладки панелі дії:
res/drawable/actionbar_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STATES WHEN BUTTON IS NOT PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected_focused" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected_focused" />
<!-- STATES WHEN BUTTON IS PRESSED -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
<!-- Focused states (such as when focused with a d-pad or mouse hover) -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="true"
android:drawable="@drawable/tab_unselected_pressed" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="true"
android:drawable="@drawable/tab_selected_pressed" />
</selector>
Для Android 3.0 і тільки вище
При підтримці Android 3.0 і тільки вище, ваш XML-файл стилю може виглядати наступним чином:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.Holo">
<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
parent="@style/Widget.Holo.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">@drawable/actionbar_tab_indicator</item>
</style>
</resources>
Для Android 2.1 і вище
При використанні Support Library, ваш XML-файл стилю може виглядати наступним чином:
res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat">
<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
<!-- Support library compatibility -->
<item name="actionBarTabStyle">@style/MyActionBarTabs</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
parent="@style/Widget.AppCompat.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">@drawable/actionbar_tab_indicator</item>
<!-- Support library compatibility -->
<item name="background">@drawable/actionbar_tab_indicator</item>
</style>
</resources>
(Джерело: developer.android.com)
|
