Стили и темы

Попробуйте способ создания композиций.

Jetpack Compose — это рекомендуемый набор инструментов для создания пользовательского интерфейса для Android. Узнайте, как работать с темами оформления в Compose.

Проектирование систем в Compose →

Стили и темы в Android позволяют отделить детали дизайна приложения от структуры и поведения пользовательского интерфейса, подобно таблицам стилей в веб-дизайне.

Стиль — это набор атрибутов, определяющих внешний вид отдельного View . Стиль может задавать такие атрибуты, как цвет шрифта, размер шрифта, цвет фона и многое другое.

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

Стили и темы объявляются в файле ресурсов стилей, расположенном в папке res/values/ , обычно называемом styles.xml .

Рисунок 1. Две темы, примененные к одному и тому же действию: Theme.AppCompat (слева) и Theme.AppCompat.Light (справа).

Темы против стилей

Темы и стили имеют много общего, но используются для разных целей. Темы и стили имеют одинаковую базовую структуру — пару «ключ-значение», которая сопоставляет атрибуты с ресурсами .

Стиль задаёт атрибуты для определённого типа представления. Например, один стиль может определять атрибуты кнопки. Каждый атрибут, указанный в стиле, можно задать и в файле разметки. Выделение всех атрибутов в стиль упрощает их использование и поддержку в нескольких виджетах.

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

Styles and themes are meant to work together. For example, you might have a style that specifies that one part of a button is colorPrimary , and another part is colorSecondary . The actual definitions of those colors are provided in the theme. When the device goes into night mode, your app can switch from its "light" theme to its "dark" theme, changing the values for all those resource names. You don't need to change the styles, since the styles are using the semantic names and not specific color definitions.

Для получения более подробной информации о том, как темы и стили взаимодействуют друг с другом, см. статью в блоге «Стилизация Android: темы и стили» .

Создайте и примените стиль.

Чтобы создать новый стиль, откройте файл res/values/styles.xml вашего проекта. Для каждого стиля, который вы хотите создать, выполните следующие действия:

1. Добавьте элемент <style> с именем, которое однозначно идентифицирует стиль.
2. Добавьте элемент <item> для каждого атрибута стиля, который вы хотите определить. name в каждом элементе указывает на атрибут, который вы используете в качестве XML-атрибута в вашем макете. Значение в элементе <item> — это значение для этого атрибута.

Например, предположим, вы определяете следующий стиль:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

Стиль можно применить к представлению следующим образом:

<TextView
    style="@style/GreenText"
    ... />

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

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

Расширьте и настройте стиль.

При создании собственных стилей всегда расширяйте существующий стиль из фреймворка или библиотеки поддержки, чтобы обеспечить совместимость со стилями пользовательского интерфейса платформы. Чтобы расширить стиль, укажите стиль, который вы хотите расширить, с помощью атрибута parent . Затем вы можете переопределить унаследованные атрибуты стиля и добавить новые.

Например, вы можете унаследовать стандартный внешний вид текста платформы Android и изменить его следующим образом:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

Однако всегда наследуйте основные стили вашего приложения из библиотеки поддержки Android. Стили в библиотеке поддержки обеспечивают совместимость, оптимизируя каждый стиль под атрибуты пользовательского интерфейса, доступные в каждой версии. Стили из библиотеки поддержки часто имеют название, похожее на название стиля из платформы, но с добавлением AppCompat .

Чтобы унаследовать стили от библиотеки или собственного проекта, укажите имя родительского стиля без части @android:style/ `, как показано в предыдущем примере. Например, следующий пример наследует стили оформления текста от библиотеки Support:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

You can also inherit styles—except those from the platform—by extending a style's name with a dot notation, instead of using the parent attribute. That is, prefix the name of your style with the name of the style you want to inherit, separated by a period. You typically only do this when extending your own styles, not styles from other libraries. For example, the following style inherits all styles from the GreenText in the preceding example and then increases the text size:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

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

To find which attributes you can declare with an <item> tag, refer to the "XML attributes" table in the various class references. All views support XML attributes from the base View class , and many views add their own special attributes. For example, the TextView XML attributes include the android:inputType attribute that you can apply to a text view that receives input, such as an EditText widget.

Примените стиль в качестве темы.

Тему можно создать так же, как и стили. Разница заключается в способе её применения: вместо применения стиля с помощью атрибута style к представлению, вы применяете тему с помощью атрибута android:theme либо к тегу <application> , либо к тегу <activity> в файле AndroidManifest.xml .

Например, вот как применить «темную» тему Material Design из библиотеки поддержки Android ко всему приложению:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

А вот как можно применить «светлую» тему всего к одному виду деятельности:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

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

Начиная с Android 5.0 (уровень API 21) и Android Support Library версии 22.1, вы также можете указать атрибут android:theme для представления в файле разметки. Это изменяет тему для этого представления и любых дочерних представлений, что полезно для изменения цветовых палитр темы в определенной части вашего интерфейса.

В предыдущих примерах показано, как применить тему, например, Theme.AppCompat , предоставляемую библиотекой поддержки Android. Однако обычно вы хотите настроить тему в соответствии с фирменным стилем вашего приложения. Лучший способ сделать это — расширить эти стили из библиотеки поддержки и переопределить некоторые атрибуты, как описано в следующем разделе.

Иерархия стилей

Android предоставляет множество способов установки атрибутов в вашем Android-приложении. Например, вы можете устанавливать атрибуты непосредственно в макете, применять стиль к представлению, применять тему к макету и даже устанавливать атрибуты программно.

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

1. Применение стилей на уровне символов или абзацев с использованием текстовых элементов span к классам, производным от TextView .
2. Программное применение атрибутов.
3. Применение отдельных атрибутов непосредственно к представлению.
4. Применение стиля к изображению.
5. Стиль по умолчанию.
6. Применение темы к набору представлений, активности или всему приложению.
7. Применение определенных стилей, специфичных для представления, например, установка TextAppearance для TextView .

Рисунок 2. Стиль элемента ` span переопределяет стиль элемента textAppearance `.

Внешний вид текста

Одно из ограничений стилей заключается в том, что к View можно применить только один стиль. Однако в TextView можно также указать атрибут TextAppearance , который функционирует аналогично стилю, как показано в следующем примере:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance позволяет определять стили, специфичные для текста, оставляя при этом стили View доступными для других целей. Однако следует отметить, что если вы определяете какие-либо атрибуты текста непосредственно в View или в стиле, эти значения переопределяют значения TextAppearance .

TextAppearance поддерживает подмножество атрибутов стиля, предлагаемых TextView . Полный список атрибутов см. в TextAppearance .

Некоторые распространенные атрибуты TextView не включенные в список, — это lineHeight[Multiplier|Extra] , lines , breakStrategy и hyphenationFrequency . TextAppearance работает на уровне символов, а не абзацев, поэтому атрибуты, влияющие на всю разметку, не поддерживаются.

Настройте тему по умолчанию

When you create a project with Android Studio, it applies a Material Design theme to your app by default, as defined in your project's styles.xml file. This AppTheme style extends a theme from the Support Library and includes overrides for color attributes that are used by key UI elements, such as the app bar and the floating action button , if used. So, you can quickly customize your app's color design by updating the provided colors.

Например, ваш файл styles.xml выглядит примерно так:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Значения стиля на самом деле являются ссылками на другие цветовые ресурсы , определенные в файле res/values/colors.xml проекта. Именно этот файл вы редактируете, чтобы изменить цвета. См. обзор цветов Material Design , чтобы улучшить пользовательский опыт с помощью динамических цветов и дополнительных пользовательских цветов.

Как только вы определитесь с цветами, обновите значения в файле res/values/colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

Затем вы можете переопределить любые другие стили по своему усмотрению. Например, вы можете изменить цвет фона активности следующим образом:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

Список атрибутов, которые можно использовать в вашей теме, см. в таблице атрибутов в R.styleable.Theme . При добавлении стилей для представлений в вашем макете вы также можете найти атрибуты, обратившись к таблице «XML-атрибуты» в справочнике классов представлений. Например, все представления поддерживают XML-атрибуты из базового класса View .

Most attributes are applied to specific types of views, and some apply to all views. However, some theme attributes listed at R.styleable.Theme apply to the activity window, not the views in the layout. For example, windowBackground changes the window background and windowEnterTransition defines a transition animation to use when the activity starts. For more details, see Start an activity using an animation .

Библиотека поддержки Android также предоставляет другие атрибуты, которые можно использовать для настройки темы, наследуемой от Theme.AppCompat , например, атрибут colorPrimary показанный в предыдущем примере. Лучше всего их можно посмотреть в файле attrs.xml библиотеки .

В библиотеке поддержки также доступны различные темы оформления, которые вы можете использовать вместо тех, что показаны в предыдущем примере. Лучший способ увидеть доступные темы — это посмотреть файл themes.xml в библиотеке .

Добавить стили, специфичные для каждой версии

Если в новой версии Android добавлены атрибуты темы, которые вы хотите использовать, вы можете добавить их в свою тему, сохранив при этом совместимость со старыми версиями. Все, что вам нужно, это еще один файл styles.xml , сохраненный в каталоге values , который содержит квалификатор версии ресурса :

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

Поскольку стили в файле values/styles.xml доступны для всех версий, ваши темы в values-v21/styles.xml могут их наследовать. Это означает, что вы можете избежать дублирования стилей, начав с «базовой» темы, а затем расширяя ее стилями, специфичными для вашей версии.

Например, для объявления переходов между окнами для Android 5.0 (уровень API 21) и выше необходимо использовать новые атрибуты. Таким образом, ваша базовая тема в файле res/values/styles.xml может выглядеть следующим образом:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

Затем добавьте стили, специфичные для версии, в файл res/values-v21/styles.xml следующим образом:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

Теперь вы можете применить AppTheme в файле манифеста, и система выберет стили, доступные для каждой версии системы.

Для получения дополнительной информации об использовании альтернативных ресурсов для различных устройств см. раздел «Предоставление альтернативных ресурсов» .

Настройка стилей виджетов

Every widget in the framework and Support Library has a default style. For example, when you style your app using a theme from the Support Library, an instance of Button is styled using the Widget.AppCompat.Button style. If you want to apply a different widget style to a button, you can do so with the style attribute in your layout file. For example, the following applies the library's borderless button style:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

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

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

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

Дополнительные ресурсы

Чтобы узнать больше о темах и стилях, ознакомьтесь со следующими дополнительными ресурсами:

Сообщения в блоге

• Оформление Android: темы и стили
• Стилизация Android: общие атрибуты темы
• Стилизация Android: предпочтение атрибутов темы