Основы темизации в Android

Темизация приложения может быть одним из самых запутанных вопросов в разработке Android. В то время как проект постоянно увеличивается, становится все труднее поддерживать стили компонентов и тематическое оформление приложения. Если у вас нет хорошей системы дизайна, то можно получить противоречивое оформление и несоответствующие цвета в приложении. Хорошее понимание стилизации и темизации поможет вам создать единообразный пользовательский интерфейс во всем приложении. Кроме того, если вы думаете о миграции на Compose, плохая система дизайна может создать дополнительные сложности.

Хорошая система дизайна требует правильной настройки стилизации и темизации. Это способствует созданию единообразных и многократно используемых стилей для наших компонентов. Но как на самом деле создать правильную систему стилей и тем?

На этот вопрос нет однозначного ответа, его можно разделить на 5 частей.

• Атрибуты

• Стиль по умолчанию

• Стиль в сравнении с темой

• Наложение темы

• TextAppearance

.       .       .

Атрибуты

Все начинается с атрибута. Без атрибутов в XML не было бы никаких характеристик, которые бы мы могли определить. Атрибуты - это именованные значения, которые имеют свое определение в файле attrs.xml. Атрибут может быть определен как для представления, так и для темы. Например, атрибут android:layout_width является атрибутом представления, а colorPrimary - атрибутом темы.

Атрибут представления устанавливается в XML представления либо путем установки непосредственно в теге, либо косвенно с помощью style (будет упомянуто позже).. Давайте рассмотрим, как мы можем установить красный фон кнопки с помощью атрибута представления android:backgroundTint.

Примечание: Для доступа к встроенным атрибутам используется префикс android.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="@color/red" />

Допустим, вы хотите изменить его фон на белый. Вы можете сделать это, установив атрибут android:backgroundTint на белый.

Это хорошо, если вы измените только одну кнопку. Но как быть, если вы хотите изменить все красные кнопки на белые? Этого можно добиться:

• Использование атрибута темы для android:backgroundTint

• Создание и применение стиля ко всем кнопкам

Атрибут темы — это атрибут, который не принадлежит ни одному представлению и может быть изменен на уровне темы.

Чтобы использовать атрибут темы для android:backgroundTint, давайте сначала определим пользовательский атрибут темы под названием myButtonBackground в attrs.xml.

Добавление пользовательского атрибута темы:

<resources>
    <attr name="myButtonBackground" format="color" />
</resources>

Тип атрибута задается с помощью поля format. Формат может быть задан как одиночный или множественный тип, например, 

android:background format="reference|color", который принимает как ссылки на drawable-ресурс ("reference"), так и цвет ("color").

Теперь вы можете использовать атрибут myButtonBackground для установки фона вашей кнопки. Но перед этим необходимо задать значение myButtonBackground. Оно должно быть определено либо в теме, либо в наложении темы, которое будет использоваться.

Установка значения атрибута темы:

<style name="Theme.MyApp" parent="...">
    <item name="myButtonBackground">@color/red</item>
</style>

Затем вы можете использовать этот атрибут для установки фона ваших кнопок.

Установка фона кнопки с помощью пользовательского атрибута:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="?attr/myButtonBackground" />

Если вы измените значение атрибута, то изменится фон всех кнопок, использующих атрибут ?attr/myButtonBackground в качестве фона. В качестве альтернативы можно использовать ?myButtonBackground как сокращение вместо ?attr/myButtonBackground.

Но установка android:backgroundTint на myButtonBackground для всех кнопок может оказаться непосильной задачей. Чтобы решить эту проблему, мы создадим стиль и применим его ко всем кнопкам, используя стиль по умолчанию.

Стиль по умолчанию

Замечали ли вы, что если не задаете кнопке никакого фона, то все равно получаете фоновый drawable (выводимый средствами графических ресурсов объект)? Это происходит потому, что компонент Button (кнопка) имеет стиль по умолчанию, как и любой другой вид. Стиль по умолчанию используется в качестве базового стиля представления.

Давайте проверим стиль кнопки по умолчанию.

// Source code: 
// https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/widget/Button.java
public class Button extends TextView {
  ...
  
  public Button(Context context, AttributeSet attrs) {
    this(context, attrs, com.android.internal.R.attr.buttonStyle);
  }
  
  public Button(Context context, AttributeSet attrs, int defStyleAttr) {
    this(context, attrs, defStyleAttr, 0);
  }
}

Стиль кнопки по умолчанию устанавливается с помощью атрибута темы R.attr.buttonStyle. Это означает, что вы можете изменить стиль по умолчанию всех кнопок в вашем приложении с помощью этого атрибута.

Давайте изменим стиль кнопки по умолчанию в нашей теме так, чтобы фон был красным.

Установка стиля кнопки по умолчанию с помощью атрибута buttonStyle:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.StylesNThemes" parent="Theme.AppCompat.DayNight.DarkActionBar">
      ...
      <item name="android:buttonStyle">@style/MyButton</item>
    </style>

    <style name="MyButton">
      <item name="android:background">@color/red</item>
    </style>
</resources>

Тогда при создании кнопки вы будете получать следующее.

Кнопка с красным фоном

Разве это не напоминает текст с красным фоном? Так происходит потому, что стиль MyButton не наследуется ни от каких стилей. По этой причине все кнопки будут содержать атрибут фонового изображения только в своем стиле по умолчанию. Давайте проверим, как стиль кнопки по умолчанию выглядит в AppCompat.

Стиль кнопок по умолчанию в AppCompat:

<style name="Widget.AppCompat.Button" parent="Base.Widget.AppCompat.Button"/>

<style name="Base.Widget.AppCompat.Button" parent="android:Widget">
    <item name="android:background">@drawable/abc_btn_default_mtrl_shape</item>
    <item name="android:textAppearance">?android:attr/textAppearanceButton</item>
    <item name="android:minHeight">48dip</item>
    <item name="android:minWidth">88dip</item>
    <item name="android:focusable">true</item>
    <item name="android:clickable">true</item>
    <item name="android:gravity">center_vertical|center_horizontal</item>
</style>

Как вы видите, эти атрибуты являются базовым стилем для кнопки. Давайте укажем Widget.AppCompat.Button в качестве родителя стиля MyButton и изменим атрибут background на backgroundTint, поскольку мы хотим изменить только цвет, а не drawable-объект.

Установка родительского стиля кнопки MyButton:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.StylesNThemes" parent="Theme.AppCompat.DayNight.DarkActionBar">
      ...
      <item name="android:buttonStyle">@style/MyButton</item>
    </style>

    <style name="MyButton" parent="Widget.AppCompat.Button">
      <item name="android:backgroundTint">@color/red</item>
    </style>
</resources>

Затем мы получаем кнопку с красным фоном.

Кнопка с красным фоном

Стиль и тема

Мы уже упоминали о стиле и теме, но в чем разница между ними? И стиль, и тема - это набор атрибутов, но разница заключается в том, в каком случае они применяются. Стили предназначены для применения к представлениям, а темы — к действиям или всему приложению. По этой причине стиль должен содержать только атрибуты представления, а тема — только атрибуты темы.

Вы можете изменить стиль представления тремя способами:

• Изменение атрибута представления в файле макета

• Создание нового стиля и применение его с помощью атрибута представления style в файле макета

• Указание стиля по умолчанию

Давайте посмотрим, как можно изменить фон кнопки в файле макета.

Изменение фона кнопки в файле макета:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background" />

Теперь давайте проверим, как мы можем создать стиль и применить его к этой кнопке.

Стиль кнопки с пользовательским фоновым drawable:

<resources>
   <style name="MyButton" parent="Widget.AppCompat.Button">
      <item name="android:background">@drawable/button_background</item>
    </style>
</resources>

Установка пользовательского стиля для кнопки:

<Button
    style="@style/MyButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

При применении стиля учитываются только атрибуты представления. Если вы попытаетесь установить любой атрибут темы внутри стиля MyButton, это не сработает. Для наглядности приведем пример:

• Использовать атрибут темы colorPrimary внутри drawable фона кнопки.

• Изменим значение colorPrimary внутри стиля MyButton

Фоновый drawable, который использует атрибут colorPrimary:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="?colorPrimary" />
    <padding
        android:bottom="4dp"
        android:left="8dp"
        android:right="8dp"
        android:top="4dp" />
</shape>

Изменение атрибута темы colorPrimary внутри стиля кнопки:

<resources>
    <style name="Theme.StylesNThemes" parent="Theme.AppCompat.DayNight.DarkActionBar">
      <item name="colorPrimary">@color/purple_500</item>
    </style>

    <style name="MyButton" parent="Widget.AppCompat.Button">
        <item name="android:background">@drawable/button_background</item>
        <item name="android:textColor">@color/white</item>
        <!-- Setting a theme attribute inside the MyButton style -->
        <item name="colorPrimary">@color/red</item>
    </style>
</resources>

Тогда, несмотря на то, что мы установили основной цвет как красный, мы получим кнопку с фиолетовым фоном.

Кнопка с фиолетовым фоном

Это происходит потому, что представление знает только о своих собственных атрибутах; Кнопка (Button) не знает об атрибуте colorPrimary, поэтому он игнорируется.

Представление получает свои атрибуты из файла макета или атрибута стиля. Если стиль представления включает атрибут темы, он будет проигнорирован.

Как же тогда изменить атрибуты темы только для одного представления? Здесь на помощь приходит наложение тем.

Наложение тем

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

При применении наложения темы нужно выполнить два шага:

• Создайте стиль, состоящий из атрибутов темы, которые необходимо изменить.

• Примените этот стиль к файлу макета с помощью android:theme или программно с помощью ContextThemeWrapper.

Давайте продолжим вышеупомянутый сценарий, в котором мы изменяем цвет фона кнопки с помощью атрибута темы colorPrimary. Сначала нам нужно создать стиль для наложения темы, в котором мы зададим colorPrimary.

Наложение темы для кнопки:

<!-- res/values/theme_overlays.xml -->
<resources>
    <style name="ThemeOverlay.StylesNThemes.Button.Red" parent="">
      <item name="colorPrimary">@color/red</item>
    </style>
</resources>

У наложения темы нет родительского элемента.

Кроме того, лучше начинать именовать стиль с ThemeOverlay, поскольку так его будет легче отличить от других стилей. Эта техника именования используется также в Material Components и AppCompat.

Давайте применим это наложение к кнопке в файле макета.

Применение наложения темы с помощью атрибута android:theme:

<Button
    android:theme="@style/ThemeOverlay.StylesNThemes.Button.Red"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Имейте в виду, что если наложение темы применяется к группе представлений, оно также будет применяться ко всем ее потомкам. Другими словами, тема каждого потомка группы представлений накладывается, когда наложение темы применяется к группе представлений.

Применение наложения темы к группе представлений:

<!-- Every child of this LinearLayout will be using colorPrimary as red -->
<LinearLayout
    android:theme="@style/ThemeOverlay.StylesNThemes.Button.Red"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am red!" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am red too!" />
</LinearLayout>

Мы также можем осуществить наложение темы программно, обернув контекст представления с помощью ContextThemeWrapper.

Использование ContextThemeWrapper для наложения темы:

class MyButton : MaterialButton {
    constructor(
        context: Context,
        attrs: AttributeSet
    ) : super(
        // It will override the contexts theme with the values inside theme overlay.
        ContextThemeWrapper(context, R.style.ThemeOverlay_StylesNThemes_Button_Red),
        attrs
    )
}

ContextThemeWrapper создает новый контекст (оборачивая заданный)  своей собственной темой. 

TextAppearance

TextAppearance - это класс, который содержит данные только для стилизации атрибутов TextView, связанных с текстом (например, textColor, textSize, но не связанных с видом, таких как maxLines или drawableTop и т.д.).

TextAppearance устанавливается атрибутом android:textAppearance на TextView. Атрибут android:textAppearance работает так же, как и атрибут style. Основное различие заключается в порядке приоритета между ними. style имеет приоритет над android:textAppearance, что означает, что style всегда будет превалировать над общими атрибутами.

Вы можете спросить, зачем он нам нужен, ведь мы можем задать все в style? Ответ заключается в том, что мы получаем возможность устанавливать только атрибуты, связанные с текстом, и это делает его многократно используемым для всех TextViews, оставляя атрибут style свободным.

Например, давайте создадим внешний вид текста для заголовка.

Использование стиля TextAppearance.StylesNThemes.Header в качестве оформления внешнего вида текста:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- You can also use TextAppearance as a parent but then you have to customize everything
     to look like header. Since there is already a style for header in both Material and AppCompat
     we just use one of them depending on the our applications base theme.-->
    <style name="TextAppearance.StylesNThemes.Header" parent="TextAppearance.MaterialComponents.Headline1">
        <!-- If any attribute which is not supported by TextAppearance is set here, 
        it will not be picked by TextView (Assuming this style is set with android:textAppearance). -->
        <item name="android:textSize">120sp</item>
    </style>
</resources>

Как видите, атрибут style для TextView является свободным и может использоваться для настройки других атрибутов представления. Вы также можете установить android:textAppearance, создав стиль.

Давайте создадим стиль однострочного заголовка.

Однострочный стиль заголовка:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textAppearance="@style/TextAppearance.StylesNThemes.Header"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Теперь вы можете установить этот стиль с помощью атрибута style и повторно использовать его для любого текста.

Применение однострочного стиля заголовка к текстовому представлению:

<resources>
    <style name="Widget.StylesNThemes.TextView.Header.SingleLine" parent="Widget.MaterialComponents.TextView">
        <item name="android:singleLine">true</item>
        <!-- If we were not using text appearance then we had to set all attributes inside 
         TextAppearance.StylesNThemes.Header here -->
        <item name="android:textAppearance">@style/TextAppearance.StylesNThemes.Header</item>
    </style>
</resources>

Если вы хотите более глубоко погрузиться в изучение темы внешнего вида текста и приоритета стилей, я настоятельно рекомендую вам прочитать эту статью.

.       .       .

Заключение

Атрибуты являются ключевым понятием в стилизации и темизации. Используйте атрибуты представления для их стиля и атрибуты темы для приложения, Активности или иерархии представлений. Если вы хотите изменить стиль для всех инстансов данного типа представления во всем приложении, вам подойдут стили по умолчанию. Наложения тем используются для переопределения атрибутов темы, и вы можете использовать их даже для представлений в заданной иерархии. Внешний вид текста может помочь вам сформировать текстовые атрибуты TextViews с помощью android: textAppearance, оставляя атрибут style свободным.

---

Перевод материала подготовлен в рамках курса "Android Developer. Professional".

Android-разработчиков с опытом от 3 лет и всех желающих приглашаем на онлайн-интенсив «Полный coverage. Покрываем Android-приложение юнит/интеграционными/UI тестами».
На интенсиве мы:
- Научимся покрывать android приложение юнит/интеграционными/UI тестами.
- Рассмотрим различные кейсы: покрытие тестами suspend функций, RX цепочек.
- Изучим популярные инструменты для написания тестов.
- Обсудим best practices по покрытию тестами.