AppCompat v21 - Material Design для пре-Lollipop пристроїв

image
17 жовтня був опублікований Android 5.0 SDK, який приніс нові віджети і матеріальний дизайн. Ми розширили бібліотеки підтримки, щоб ви могли використовувати ваші останні розробки і на попередніх версіях Android. Це зміни включають в себ велике оновлення для AppCompat, а так само бібліотеки RecyclerView, CardView і Palette.

У цьому пості ми поглянемо, що нового з'явилося в AppCompat і як це використовувати для підтримки матеріального дизайну у ваших додатках.

Що нового в AppCompat?

Бібліотека AppCompat (aka ActionBarCompat) з'явилася як порт нового ActionBar API Android 4.0 на пристрої з Gingerbread. Вона представила загальний шар API поверх бэкпортированной або стандартною реалізації. AppCompat v21 ж приносить API і набір можливостей з Android 5.0

У цій версії Android з'явився новий віджет Toolbar. Він являє собою узагальнення шаблону ActionBar і дає більше контролю та гнучкості. Toolbar — це елемент view в загальній ієрархії, що спрощує реалізацію його взаємодії з іншими віджетами, анімації та реакції на події прокрутки. Так само ви можете використовувати його як Actionbar вашої активності, а це означає, що стандартні елементи меню дій будуть показуватися в ньому.

Ви, ймовірно, вже користувалися якийсь час оновленою версією AppCompat. Ця бібліотека була включена в оновлення різних програм Google, що вийшли в останні тижні, у тому числі Play Маркет і Play Преса. Крім того, він був інтегрований в додаток Google I/O, зображене вище, яке має відкритий вихідний код.

Установка

Якщо ви використовуєте Gradle, просто додайте appcompat як залежність у ваш файл build.gradle:

dependencies {
compile "com.android.support:appcompat-v7:21.0.+"
}

Нова інтеграція
Якщо ви ще не використовуєте AppCompat або починаєте з нуля, ось як її підключити:
  • Всі ваші активності повинні успадковуватися від ActionBarActivity, яка в свою чергу успадковується від FragmentActivity з бібліотеки v4 support, тому ви можете продовжувати використовувати фрагменти.
  • Усі вашим теми (які включають Action Bar/Toolbar) повинні успадковуватися від Theme.AppCompat. Є кілька варіантів тем, у тому числі світла (Light) і тема без панелі дій (NoActionBar).
  • Коли впроваджуєте щось для відображення панелі (наприклад, SpinnerAdater для навігації), переконайтеся, що використовуєте контекст з темою панелі, отриманий за допомогою getSupportActionBar().getThemedContext().
  • Ви повинні використовувати статичні методи класу MenuItemCompat для дзвінків MenuItem, що відносяться до дій.
Для отримання додаткової інформації зверніться до керівництву по API Action Bar, яке є вичерпним керівництвом по AppCompat.

Міграція з попередніх версій
Для більшості додатків тепер вам достатньо одного оголошення теми у values/:

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- Set AppCompat's actionBarStyle -->
<item name="actionBarStyle">@style/MyActionBarStyle</item>

<!-- Set AppCompat's color theming attrs -->
<item name="colorPrimary">@color/my_awesome_red</item>
<item name="colorPrimaryDark">@color/my_awesome_darker_red</item>

<!-- The rest of your attributes -->
</style>

Тепер ви можете прибрати всі стилі ActionBar values-v14+.

Теми оформлення

AppCompat підтримує нові атрибути колірної палітри, які дозволяють налаштувати тему під ваш бренд, використовуючи основний та акцентний кольору. Наприклад:

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">@color/my_awesome_color</item>

<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">@color/my_awesome_darker_color</item>

<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">@color/accent</item>

<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight, and colorSwitchThumbNormal. -->

</style>

Коли ви поставите ці аттрібути, AppCompat автоматично застосує їх значення атрибутів з API 21+. А це, в свою чергу, офарбить панель статусу і елемент у списку недавніх завдань.

На більш старих платформах, AppCompat емулює колірні теми, коли це можливо. В поточний момент, це обмежується фарбуванням панелі дій і деякими віджетами.

Тонування віджетів
Коли ви запускаєте додаток на пристрої Android 5.0, всі віджети тонуються кольором, вказаним в атрибутах теми. Є дві основні можливості, які дозволяють це робити на Lollipop: тонування drawable і посилання на аттрібути тим (у форматі ?attr/foo) всередині drawable.

AppCompat пропонує схожу поведінку на ранніх версіях Android для наступного безлічі UI віджетів:

  • Все, що пропонується в AppCompat toolbar (режими дій та інше)
  • EditText
  • Spinner
  • CheckBox
  • RadioButton
  • Switch (використовуйте новий клас android.support.v7.widget.Switchcompat
  • CheckedTextView
Вам нічого не потрібно робити спеціально, щоб це запрацювало. Використовуйте ці елементи у вашій розмітці як зазвичай, а AppCompat зробить решту (з деякими застереженнями, див. нижче FAQ).

Віджет панелі інструментів (Toolbar)

image
Toolbar повністю підтримується бібліотекою AppCompat і повністю відповідає як за можливостями, так і за API викликам, віджету з SDK. У AppCompat, панель інструментів реалізується з допомогою класу android.support.v7.widget.Toolbar. Є два способи її застосування:
  • Використовувати як ActionBar, якщо ви хочете використовувати існуючі можливості Action Bar (такі, як впровадження меню, виділення, ActionBarDrawerToggle тощо), але при цьому хочете більше контролю над її зовнішнім виглядом.
  • Використовувати автономну панель в ситуаціях, коли звичайний ActionBar не підходить. Наприклад, щоб показати кілька панелей на екрані, зайняти лише частину екрану по ширині і т.д.
Action Bar
Щоб використовувати Toolbar як ActionBar, по-перше, вимкніть звичайний ActionBar. Найпростіший спосіб зробити це — успадкувати вашу тему від Theme.AppCompat.NoActionBar (або світлого її варіанти)

По-друге, створити екземпляр панелі інструментів. Наприклад, включивши її в ваш xml розмітки

<android.support.v7.widget.Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />

Висота, ширина, фон і таке інше тепер повністю залежать від вас, це просто хороший приклад. Так як Toolbar — це просто ViewGourp, ви можете стилізувати і позиціонувати його на свій розсуд.

І нарешті, встановіть Toolbar як ActionBar у вашій активності або фрагменті:

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.blah);

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
}

Починаючи з цього моменту всі елементи меню будуть відображатись в вашій панелі інструментів, наповнюючись з допомогою стандартних викликів налаштування меню.

використання
Відміну автономного режиму в тому, що ви не ставите Toolbar як ActionBar. Тому, ви можете використовувати будь-яку тему AppCompat і вам не потрібно відключати звичайний ActionBar.

В автономному режимі ви можете наповнювати Toolbar вмістом або діями. Наприклад, якщо ви хочете показати дії, вам потрібно впровадити меню:

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.blah);

Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);

// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});

// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.your_toolbar_menu);
}

Є безліч інших речей, які можна робити з панеллю інструментів. Для отримання додаткової інформації, дивіться опис Toolbar API.

Стилі
Налаштування стилю панелі інструментів відрізняється від того, як це робилося для стандартної панелі дій. Стиль застосовується прямо до самого віджету.

Ось основний стиль, який ви повинні використовувати, коли ви використовуєте Toolbar як ActionBar:

<android.support.v7.widget.Toolbar 
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

Оголошення app:theme дозволить переконатися, що шрифт і елементи використовують чистий колір (наприклад, 100% непрозорий білий).

Темна панель дій
Ви можете налаштувати панель інструментів безпосередньо, використовуючи атрибути розмітки. Щоб Toolbar виглядала як «DarkActionBar» (темне вміст, світле меню переповнення), вкажіть атрибути theme popupTheme:

<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="@dimen/triple_height_toolbar"
app:theme="@style/ThemeOverlay.AppCompat.Dark.Actionbar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Віджет пошуку (SearchView)

AppCompat пропонує оновлене API для віджета пошуку, яке піддається більшій налаштуванні і стилізації. Тепер ми використовуємо структуру стилів з Lollipop замість старих searchView* атрибутів теми.

Ось як ви можете налаштувати стиль SearchView:

values/themes.xml:

<style name="Theme.MyTheme" parent="Theme.AppCompat">
<item name="searchViewStyle">@style/MySearchViewStyle</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<!-- Background for the search query section (e.g. EditText) -->
<item name="queryBackground">...</item>
<!-- Background for the actions section (e.g. voice, submit) -->
<item name="submitBackground">...</item>
<!-- Close button icon -->
<item name="closeIcon">...</item>
<!-- Search button icon -->
<item name="searchIcon">...</item>
<!-- Go/commit button icon -->
<item name="goIcon">...</item>
<!-- Voice search button icon -->
<item name="voiceIcon">...</item>
<!-- Commit icon shown in the query suggestion row -->
<item name="commitIcon">...</item>
<!-- Layout for query suggestion rows -->
<item name="suggestionRowLayout">...</item>
</style>

Вам не потрібно вказувати всі (або взагалі якісь) з атрибутів. Значення за замовчуванням повинні підійти більшості додатків.

Toolbar на підході...

Сподіваюся, ця стаття допоможе приступити до роботи з AppCompat і дозволить створити дивовижні додатки в матеріальному стилі. Дайте знати в коментарях до оригінальної статті/Google+/Twitter, якщо у вас є питання про AppCompat або про будь-який з підтримуваних бібліотек, або де ми можемо надати більше документації

FAQ

Чому мій EditText (або інший віджет зі списку вище) не пофарбований коректно на пристрої Android до Lollipop?
Тонування віджетів в AppCompat працює з допомогою перехоплення впровадження розмітки і вставки спеціальних тонованих версій віджетів. Для більшості людей це буде працювати правильно. Але є кілька сценаріїв, коли це не працює, в тому числі:
  • У вас кастомизированная версія віджету (ви отнаследовали EditText)
  • Ви створюєте EditText без використання LayoutInflater (наприклад, викликавши new EditText())
Спеціальні тоновані версії віджетів поки приховані, так як вони знаходяться в незавершеному стані. Це може змінитися в майбутньому.

Чому віджет X не має матеріального стилю на не-Lollipop пристроях?
Поки були оновлені тільки деякі, найпоширеніші віджети. В майбутніх релізах будуть додані інші.

Чому у мого Action Bar залишилася тінь на Android Lollipop? Я задав android:windowContentOverlay рівний null.
На Lollipop тінь під панеллю створюється з допомогою нового API підйому. Щоб прибрати її, вам потрібно викликати getSupportActionBar().setElevation(0) або задати значення атрибута elevation в описі стилю Actionbar.

Чому немає ripple-анімації на пристроях до Lollipop?
Головне, що дозволяє RippleDrawable анимироваться плавно в Android 5.0 — це новий RenderThread. Для оптимізації продуктивності на попередніх версіях Android ми поки залишили RippleDrawable за бортом.

Як мені використовувати AppCompat з Preferences?
Ви можете продовжувати використовувати PreferenceFragment ActionBarActivity, коли запускаєте додаток на пристрої з API v11+. Для пристроїв з попередньою версією API вам доведеться використовувати PreferenceActivity, яка стилізована під матеріальний дизайн.

P.S. Це мій перший переклад, прошу писати в лічку про всі неточності (особливо, що стосується російських термінів)

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.