Эта страница переведена с помощью Cloud Translation API.

Kotlin Android Fundamentals 10.1: Стили и темы

Эта практическая работа входит в курс «Основы Android Kotlin». Вы получите максимальную пользу от этого курса, если будете выполнять практические работы последовательно. Все практические работы курса перечислены на целевой странице практической работы «Основы Android Kotlin» .

Эта лабораторная работа входит в серию, которая научит вас основам разработки приложений для Android и поможет создать приложение, которое находит встречи Google Developer Group (GDG). Приложение отображает информацию о предстоящих встречах в удобном и понятном виде.

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

10.1 Стили и темы
10.2 Материальный дизайн, размеры и цвета
10.3 Дизайн для всех

Введение в дизайн

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

Сравните два экрана ниже. Обратите внимание, что, перемещая элементы и акцентируя внимание на важном, вы помогаете пользователю понять, что происходит. Для простых экранов хороший дизайн часто означает показывать меньше. Для экранов с большим количеством важной информации хороший дизайн делает насыщенную информацию понятной с первого взгляда. Работая над приложениями для Android, вы, возможно, сталкивались с концепцией информационной архитектуры (ИА).

Другой уровень дизайна — это создание последовательных пользовательских потоков ( вариантов использования ), позволяющих пользователям выполнять задачи. Этот вид дизайна называется проектированием пользовательского опыта (UXD), и некоторые дизайнеры специализируются на нём.

Если у вас нет доступа к дизайнеру, вот несколько советов для начала:

Определите варианты использования. Опишите, что пользователи должны делать с помощью вашего приложения и как.
Реализуйте дизайн. Не привязывайтесь к первому черновику и делайте его только «достаточно хорошим», потому что вы будете вносить в него изменения, только увидев, как с ним взаимодействуют реальные пользователи.
Получите обратную связь. Найдите любого, кого вы сможете уговорить протестировать ваше приложение — членов семьи, друзей или даже тех, кого вы только что встретили в группе разработчиков Google. Попросите их использовать ваше приложение для реализации сценария использования, пока вы наблюдаете и делаете подробные заметки.
Усовершенствуйте! Используя всю эту информацию, улучшите приложение, а затем протестируйте его снова.

Вот ещё несколько вопросов, которые стоит задать себе при разработке эффективного приложения. Вы изучили методы решения этих проблем в предыдущих практических занятиях:

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

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

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

Хороший дизайн — важнейший способ побудить пользователей использовать ваше приложение.

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

Что вам уже следует знать

Вам должно быть знакомо:

Как создавать приложения с действиями и фрагментами, а также перемещаться между фрагментами, передавая данные
Использование представлений и групп представлений для создания пользовательского интерфейса (UI), включая RecyclerView
Как использовать компоненты архитектуры, включая ViewModel , с рекомендуемой архитектурой для создания хорошо структурированного и эффективного приложения
Привязка данных, сопрограммы и обработка кликов
Как подключиться к Интернету и кэшировать данные локально, используя базу данных Room
Как настроить свойства представления
Как извлекать ресурсы и использовать ресурсы из XML-файлов ресурсов

Чему вы научитесь

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

Что ты будешь делать?

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

Стартовое приложение GDG-finder создано с учетом всего, что вы уже изучили в этом курсе.

Приложение использует ConstraintLayout для создания трёх экранов. Два из них — это просто файлы макетов, которые вы будете использовать для изучения цветов и текста на Android.

Третий экран — поисковая система GDG. GDG (группы разработчиков Google) — это сообщества разработчиков, специализирующиеся на технологиях Google, включая Android. GDG по всему миру проводят встречи, конференции, учебные семинары и другие мероприятия.

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

Если вам повезёт и в вашем регионе есть GDG, вы можете зайти на сайт и зарегистрироваться на их мероприятия! Мероприятия GDG — отличный способ познакомиться с другими разработчиками Android и изучить передовой опыт отрасли, который не вошел в этот курс.

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

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

Просмотреть атрибуты

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

Используется для индивидуальных или единичных проектов, таких как поля, отступы или ограничения.

Стили

Используйте стиль для создания набора повторно используемой информации о стиле, например размера шрифта или цвета.
Подходит для объявления небольших наборов общих дизайнов, используемых в вашем приложении.

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

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

Это стиль по умолчанию, предоставляемый системой Android.

Темы

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

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

Для стилизации только с использованием текстовых атрибутов, таких как fontFamily .

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

На скриншотах ниже показано приложение GDG-finder со светлой темой (слева) и тёмной темой (справа), а также с пользовательскими шрифтами и размерами заголовков. Это можно реализовать несколькими способами, и некоторые из них вы изучите в этой лабораторной работе.

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

Загрузите и запустите стартовое приложение GDG-finder .
Обратите внимание, что на главном экране много однообразно отформатированного текста, из-за чего сложно понять, о чем эта страница и что на ней важно.
Откройте файл макета home_fragment.xml .
Обратите внимание, что макет использует ConstraintLayout для позиционирования элементов внутри ScrollView .
Обратите внимание, что для каждого представления атрибуты макета ограничений и полей задаются в представлении, поскольку эти атрибуты, как правило, настраиваются для каждого представления и экрана.
В текстовом представлении title добавьте атрибут textSize , чтобы изменить размер текста до 24sp .

Напоминаем, что sp обозначает масштабно-независимые пиксели (scale-independent pixels) , которые масштабируются как с учётом плотности пикселей, так и размера шрифта, заданного пользователем в настройках устройства. Android определяет размер текста на экране при его отрисовке. Всегда используйте sp для размеров текста.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

Установите textColor текстового представления title непрозрачный серый цвет, задав для него значение aRGB #FF555555 .

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

Чтобы открыть вкладку «Предварительный просмотр» в Android Studio, выберите «Вид» > «Окна инструментов» > «Предварительный просмотр» или нажмите вертикальную кнопку «Предварительный просмотр» на правом краю редактора макетов. В окне предварительного просмотра убедитесь, что заголовок стал серым и больше, чем был раньше, как показано ниже.

Оформите подзаголовок так, чтобы он имел тот же цвет, что и заголовок, и был меньше, шрифт 18sp . (Значение альфа по умолчанию — FF , непрозрачный. Вы можете опустить значение альфа, если не собираетесь его менять.)

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

Цель этой лабораторной работы — придать приложению немного причудливый, но при этом профессиональный вид, но вы можете оформить его по своему усмотрению. Попробуйте следующие атрибуты для отображения текста subtitle . Используйте вкладку «Предварительный просмотр» , чтобы увидеть, как изменится внешний вид вашего приложения. Затем удалите эти атрибуты.

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

Не забудьте отменить атрибуты textAllCaps , textStyle и background в представлении subtitle , прежде чем продолжить.
Запустите свое приложение, и оно уже должно выглядеть лучше.

При использовании шрифтов в вашем приложении вы можете предоставить необходимые файлы шрифтов в составе APK-файла. Хотя это простое решение, обычно не рекомендуется, поскольку оно увеличивает время загрузки и установки приложения.

Android позволяет приложениям загружать шрифты во время работы с помощью API Downloadable Fonts. Если ваше приложение использует тот же шрифт, что и другое приложение на устройстве, Android загружает шрифт только один раз, экономя место на устройстве.

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

Шаг 1: Примените загружаемый шрифт

Откройте файл home_fragment.xml на вкладке «Дизайн» .
На панели «Дерево компонентов» выберите представление текста title .
На панели «Атрибуты» найдите атрибут fontFamily . Его можно найти в разделе «Все атрибуты» или просто поискать.
Нажмите стрелку раскрывающегося списка.
Прокрутите до пункта «Другие шрифты» и выберите его. Откроется окно « Ресурсы» .

В окне «Ресурсы» найдите lobster или просто lo .
В результатах выберите Lobster Two .
Справа, под названием шрифта, выберите переключатель «Создать загружаемый шрифт ». Нажмите кнопку «ОК» .
Откройте файл манифеста Android.
В нижней части манифеста найдите новый тег <meta-data> с атрибутами name и resource , установленными на "preloaded_fonts" . Этот тег сообщает сервисам Google Play, что приложение хочет использовать загруженные шрифты. Когда ваше приложение запускается и запрашивает шрифт Lobster Two, поставщик шрифтов загружает его из интернета, если он ещё не доступен на устройстве.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

В папке res/values найдите файл preloaded_fonts.xml , который определяет массив, в котором перечислены все загружаемые шрифты для этого приложения.
Аналогично, файл res/fonts/lobster_two.xml содержит информацию о шрифте.
Откройте home_fragment.xml и обратите внимание в коде и предварительном просмотре, что шрифт Lobster Two применен к title TextView и, таким образом, применен к заголовку.

Откройте файл res/values/styles.xml и проверьте тему AppTheme по умолчанию, созданную для проекта. Сейчас она выглядит так, как показано ниже. Чтобы применить новый шрифт Lobster Two ко всему тексту, необходимо обновить эту тему.
В теге <style> обратите внимание на атрибут parent . Каждый тег style может указывать родительский элемент и наследовать все его атрибуты. Код определяет Theme , определяемую библиотеками Android. Тема MaterialComponents определяет всё: от работы кнопок до отображения панелей инструментов. Тема имеет разумные значения по умолчанию, поэтому вы можете настроить только нужные элементы. Приложение использует Light версию этой темы без панели действий ( NoActionBar ), как показано на снимке экрана выше.

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

В стиле AppTheme установите шрифтовое семейство lobster_two . Необходимо задать оба свойства android:fontFamily и fontFamily , поскольку родительская тема использует оба. Вы можете проверить home_fragment.xml на вкладке «Дизайн» , чтобы увидеть изменения.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

Запустите приложение ещё раз. Новый шрифт применён ко всему тексту! Откройте панель навигации и перейдите на другие экраны — вы увидите, что шрифт применён и там.

Шаг 2: Примените тему к заголовку

В home_fragment.xml найдите текстовое представление title , в котором указан атрибут шрифта lobster_two . Удалите атрибут fontFamily и запустите приложение. Поскольку тема использует то же семейство шрифтов, изменений не будет.
Верните другой атрибут fontFamily в текстовое представление title :
app:fontFamily="serif-monospace " Убедитесь, что оно есть в app !

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

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

Удалить атрибут fontFamily из текстового представления title .

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

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

Шаг 1: Создайте стиль

Откройте res/values/styles.xml .
Внутри тега <resources> определите новый стиль с помощью тега <style> , как показано ниже.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

При выборе имён стилей важно учитывать их семантику. Выберите имя стиля, исходя из того, для чего он будет использоваться, а не из свойств, на которые он влияет. Например, назовите этот стиль Title , а не LargeFontInGrey . Этот стиль будет использоваться для любого заголовка в вашем приложении. По соглашению, стили TextAppearance называются TextAppearance. , поэтому в данном случае Name будет TextAppearance.Title .

У стиля есть родительский элемент, как и у темы. Но на этот раз стиль расширяет не тему, а стиль TextAppearance.MaterialComponents.Headline6 . Этот стиль является текстовым стилем по умолчанию для темы MaterialComponents , поэтому, расширяя его, вы изменяете стиль по умолчанию, а не начинаете его с нуля.

Внутри нового стиля определите два элемента. В одном элементе установите textSize равным 24sp , а в другом — тот же тёмно-серый цвет textColor , что и раньше.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

Определите другой стиль для субтитров. Назовите его TextAppearance.Subtitle .
Поскольку единственное отличие от TextAppearance.Title будет в размере текста, сделайте этот стиль дочерним по отношению к TextAppearance.Title .
В стиле Subtitle установите размер текста 18sp . Вот готовый стиль:

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Шаг 2: Примените созданный вами стиль.

В home_fragment.xml добавьте стиль TextAppearance к title Title Удалите атрибуты textSize и textColor .

Темы переопределяют любой заданный вами стиль TextAppearance . (Пирамидальная диаграмма в начале практикума показывает порядок применения стилей.) Используйте свойство textAppearance , чтобы применить стиль как TextAppearance , чтобы шрифт, заданный в Theme , переопределял заданный здесь.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

Также добавьте стиль TextAppearance.Subtitle к текстовому полю subtitle и удалите атрибуты textSize и textColor . Этот стиль также необходимо применить как textAppearance , чтобы шрифт, заданный в теме, переопределил заданный здесь.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

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

Проект Android Studio: GDGFinderStyles .

Используйте темы, стили и атрибуты представлений, чтобы изменить их внешний вид.
Темы влияют на стиль всего вашего приложения и содержат множество предустановленных значений цветов, шрифтов и размеров шрифтов.
Атрибут применяется к представлению, в котором он установлен. Используйте атрибуты, если у вас есть стили, применяемые только к одному представлению, например, отступы, поля и ограничения.
Стили — это группы атрибутов, которые могут использоваться несколькими представлениями. Например, вы можете создать стиль для всех заголовков контента, кнопок или текстовых представлений.
Темы и стили наследуются от родительской темы или стиля. Вы можете создать иерархию стилей.
Значения атрибутов (задаваемые в представлениях) переопределяют стили. Стили переопределяют стиль по умолчанию. Стили переопределяют темы. Темы переопределяют любые стили, заданные свойством textAppearance .

Определите стили в файле ресурсов styles.xml с помощью тегов <style> и <item> .

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Использование загружаемых шрифтов делает шрифты доступными для пользователей без увеличения размера APK-файла. Чтобы добавить загружаемый шрифт для представления:

Выберите представление на вкладке «Дизайн» и выберите «Дополнительные шрифты» в раскрывающемся меню атрибута fontFamily .
В диалоговом окне «Ресурсы» найдите шрифт и выберите переключатель «Создать загружаемый шрифт» .
Убедитесь, что манифест Android содержит тег метаданных для предварительно загруженных шрифтов.

Когда приложение впервые запрашивает шрифт, а шрифт еще не доступен, поставщик шрифтов загружает его из Интернета.

Документация для разработчиков Android:

Другие ресурсы:

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

При необходимости задавайте домашнее задание.
Объясните учащимся, как следует сдавать домашние задания.
Оцените домашние задания.

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

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

Ответьте на эти вопросы

Вопрос 1

Какой тег используется для определения тем?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Вопрос 2

Что из перечисленного НЕ является хорошим использованием стилей?

▢ Укажите ограничения представления.

▢ Укажите цвет фона заголовков.

▢ Унифицировать размер шрифта во всех представлениях.

▢ Укажите цвет текста для группы представлений.

Вопрос 3

В чем разница между темами и стилями?

▢ Темы применяются ко всему приложению, в то время как стили можно применять к определенным представлениям.

▢ Темы не могут наследовать от других тем, но стили могут наследовать от других стилей.

▢ Стили не могут наследовать от других стилей, но темы могут наследовать от других тем.

▢ Темы предоставляются системой Android, а стили определяются разработчиком.

Вопрос 4

Если у TextView в вашем приложении есть Theme , которая задает размер шрифта 12sp , определенный стиль, который задает его 14sp , и атрибут fontSize 16sp , какой размер шрифта будет отображаться на экране?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Начните следующий урок: 10.2: Material Design, размеры и цвета

Ссылки на другие практические занятия по этому курсу см. на целевой странице практических занятий по основам Android Kotlin .