Android с нуля: создание стилей и тем
Как разработчики Android, мы склонны в первую очередь фокусироваться на функциональности наших приложений. Однако одной функциональности достаточно редко хватает. В Google Play, где сегодня находится более миллиона приложений, внешний вид так же важен, как и функциональность, если не больше. Если вам трудно в этом поверить, я предлагаю вам быстро взглянуть на приложения в разделе «Топ чарты» в Google Play.
Существует два подхода к изменению внешнего вида приложений для Android. Первый подход включает прямое изменение свойств представлений в XML-файлах макета. Такой подход возможен только в том случае, если вы работаете над простым приложением, которое имеет небольшое количество видов и активностей. Второй подход предполагает создание и использование пользовательских стилей и тем. Если вы знакомы с веб-разработкой, первый подход сродни использованию встроенных стилей CSS, а второй подход сродни использованию таблиц стилей.
В этом уроке вы узнаете, как создавать пользовательские стили и темы для ваших приложений для Android. Вы также узнаете, как использовать инструменты и шорткаты Android Studio, которые облегчают создание стилей.
1. Создание стилей
Стили, очевидно, применяются к компонентам пользовательского интерфейса. Поэтому давайте начнем с создания новой пустой активности и добавления двух представлений в ее XML-файл макета.
Как видно из приведенного выше кода, свойства, такие как layout_width и layout_margin , явно включены в определение каждого представления.
Чтобы создать новый стиль для первого вида, щелкните его правой кнопкой мыши и выберите «Рефакторинг»> «Извлечь»> «Стиль».
Теперь вы увидите диалоговое окно, в котором вы можете указать имя стиля, а также выбрать атрибуты, которые должны быть в него включены. Пусть имя будет MyBox и выберите все атрибуты, кроме background .
Когда вы нажмете OK, вы увидите, что код для первого вида изменился.
В представлении теперь есть атрибут style , который указывает на стиль MyBox . Вы можете взглянуть на определение стиля, открыв res/values/styles.xml.
Как только стиль был создан, его можно применить к любому виду. Например, вот как вы применили MyBox ко второму представлению:
С применяемыми стилями, вот как выглядят два вида в активности:
2. Расширение стилей
Android позволяет создавать стили, которые используют другие стили в качестве основы. Другими словами, он позволяет расширять существующие стили.
Существуют два разных синтаксиса, которые вы можете использовать при расширении стиля. Первый синтаксис часто называют неявным синтаксисом и он использует точечную нотацию. Например, вот как вы создаете два производных стиля, называемых TEAL и CYAN, используя MyBox в качестве родительского стиля:
Как вы могли догадаться, у MyBox.TEAL и MyBox.CYAN есть все свойства MyBox . В дополнение к этим, у них есть свойство android: background.
Второй синтаксис для создания производного стиля обычно называют явным синтаксисом. Он включает использование атрибута parent , значение которого задано как имя родительского стиля. Вот фрагмент кода, который определяет стиль под названием TealBox.
Применение производных стилей ничем не отличается от применения обычных.
Большинство разработчиков используют неявный синтаксис при расширении своих собственных стилей и явный синтаксис при расширении стилей платформы.
3. Создание тем
Все это время мы применяли только стили к представлениям, которые находятся внутри активности. Android также позволяет применять стили для всех видов активностей и приложений. Когда стиль применяется к активности или приложению, он становится темой.
По умолчанию все приложения, созданные с использованием последней версии Android Studio, используют тему AppTheme . AppTheme является потомком известной темы AppCompat, большой и очень всеобъемлющей темы, которая может повлиять на внешний вид почти всех широко используемых представлений.
Вы можете найти определение AppTheme в styles.xml:
AppTheme использует Material Design. Поэтому для создания собственных тем, соответствующих спецификации Material Design, можно использовать AppTheme в качестве родителя. Кроме того, вы можете напрямую использовать Theme.AppCompat в качестве родителя.
Хотя вы всегда можете создавать темы, написав XML-код, помните, что это просто стили — в этом уроке я покажу вам, как использовать редактор тем для Android Studio, чтобы он сделал для вас всю тяжелую работу.
Чтобы открыть редактор тем, откройте меню «Сервис» и выберите Android> Редактор тем.
С правой стороны окна редактора тем вы можете не только управлять существующими темами, но и создавать новые. Левая сторона показывает вам предварительный просмотр результатов внесенных вами изменений в темы.
Чтобы создать новую тему, нажмите раскрывающееся меню Тема и выберите вариант Создать новую тему.
В появившемся диалоговом окне укажите имя новой темы — MyTheme и нажмите OK.
На этом этапе styles.xml будет иметь новую строку, которая выглядит так:
4. Применение тем
Прежде чем применить тему, которую мы создали, добавим несколько широко используемых представлений к активности. Это позволит вам сразу заметить эффекты примененной темы.
Следующий код создает обычную Button , Button без полей, цветную Button , Checkbox , RadioButton , Switch , Seekbar , TextView и EditText .
Со всеми новыми добавлениями макет будет выглядеть так:
Если вы прочитали спецификацию Material Design, я уверен, что вы можете сказать, что в настоящее время активность использует оттенки индиго для colorPrimary и colorPrimaryDark . Для colorAccent используется оттенок розового. Это цвета по умолчанию, указанные в Android Studio. Вы можете найти их шестнадцатеричные эквиваленты в res/values/colors.xml вашего проекта.
Чтобы применить MyTheme , тему, созданную нами на предыдущем шаге, к вашей активности, откройте файл манифеста вашего проекта и добавьте атрибут android:theme в определение активности. Задайте значение @style/MyTheme .
Аналогично, вы можете применить тему ко всему вашему приложению, установив значение атрибута android: theme в определении приложения в @style/MyTheme .
Если вы сейчас посмотрите на свою активность, то она будет выглядеть совсем по-другому.
Заключение
В этом уроке вы узнали, как создавать и применять пользовательские стили и темы Android. Не стесняйтесь использовать эти знания, чтобы придать новые и лучшие виды вашим приложениям. Однако старайтесь не слишком увлекаться — большинство пользователей Android сегодня так привыкли к Material Design, что отклонение от его рекомендаций может их раздражать.
Чтобы узнать больше о стилях и темах, я предлагаю вам ознакомиться с руководством по стилям и темам.
Источник
Основы темизации в Android
Темизация приложения может быть одним из самых запутанных вопросов в разработке Android. В то время как проект постоянно увеличивается, становится все труднее поддерживать стили компонентов и тематическое оформление приложения. Если у вас нет хорошей системы дизайна, то можно получить противоречивое оформление и несоответствующие цвета в приложении. Хорошее понимание стилизации и темизации поможет вам создать единообразный пользовательский интерфейс во всем приложении. Кроме того, если вы думаете о миграции на Compose, плохая система дизайна может создать дополнительные сложности.
Хорошая система дизайна требует правильной настройки стилизации и темизации. Это способствует созданию единообразных и многократно используемых стилей для наших компонентов. Но как на самом деле создать правильную систему стилей и тем?
На этот вопрос нет однозначного ответа, его можно разделить на 5 частей.
Стиль по умолчанию
Стиль в сравнении с темой
Атрибуты
Все начинается с атрибута. Без атрибутов в XML не было бы никаких характеристик, которые бы мы могли определить. Атрибуты — это именованные значения, которые имеют свое определение в файле attrs.xml . Атрибут может быть определен как для представления, так и для темы. Например, атрибут android:layout_width является атрибутом представления, а colorPrimary — атрибутом темы.
Атрибут представления устанавливается в XML представления либо путем установки непосредственно в теге, либо косвенно с помощью style (будет упомянуто позже).. Давайте рассмотрим, как мы можем установить красный фон кнопки с помощью атрибута представления android:backgroundTint .
Примечание: Для доступа к встроенным атрибутам используется префикс android.
Допустим, вы хотите изменить его фон на белый. Вы можете сделать это, установив атрибут android:backgroundTint на белый.
Это хорошо, если вы измените только одну кнопку. Но как быть, если вы хотите изменить все красные кнопки на белые? Этого можно добиться:
Использование атрибута темы для android:backgroundTint
Создание и применение стиля ко всем кнопкам
Атрибут темы — это атрибут, который не принадлежит ни одному представлению и может быть изменен на уровне темы.
Чтобы использовать атрибут темы для android:backgroundTint , давайте сначала определим пользовательский атрибут темы под названием myButtonBackground в attrs.xml .
Добавление пользовательского атрибута темы:
Тип атрибута задается с помощью поля format . Формат может быть задан как одиночный или множественный тип, например,
android:background format=»reference|color» , который принимает как ссылки на drawable-ресурс («reference»), так и цвет («color»).
Теперь вы можете использовать атрибут myButtonBackground для установки фона вашей кнопки. Но перед этим необходимо задать значение myButtonBackground . Оно должно быть определено либо в теме, либо в наложении темы, которое будет использоваться.
Установка значения атрибута темы:
Затем вы можете использовать этот атрибут для установки фона ваших кнопок.
Установка фона кнопки с помощью пользовательского атрибута:
Если вы измените значение атрибута, то изменится фон всех кнопок, использующих атрибут ?attr/myButtonBackground в качестве фона. В качестве альтернативы можно использовать ?myButtonBackground как сокращение вместо ?attr/myButtonBackground .
Но установка android:backgroundTint на myButtonBackground для всех кнопок может оказаться непосильной задачей. Чтобы решить эту проблему, мы создадим стиль и применим его ко всем кнопкам, используя стиль по умолчанию.
Стиль по умолчанию
Замечали ли вы, что если не задаете кнопке никакого фона, то все равно получаете фоновый drawable (выводимый средствами графических ресурсов объект)? Это происходит потому, что компонент Button (кнопка) имеет стиль по умолчанию, как и любой другой вид. Стиль по умолчанию используется в качестве базового стиля представления.
Давайте проверим стиль кнопки по умолчанию.
Стиль кнопки по умолчанию устанавливается с помощью атрибута темы R.attr.buttonStyle . Это означает, что вы можете изменить стиль по умолчанию всех кнопок в вашем приложении с помощью этого атрибута.
Давайте изменим стиль кнопки по умолчанию в нашей теме так, чтобы фон был красным.
Установка стиля кнопки по умолчанию с помощью атрибута buttonStyle :
Тогда при создании кнопки вы будете получать следующее.
Кнопка с красным фоном
Разве это не напоминает текст с красным фоном? Так происходит потому, что стиль MyButton не наследуется ни от каких стилей. По этой причине все кнопки будут содержать атрибут фонового изображения только в своем стиле по умолчанию. Давайте проверим, как стиль кнопки по умолчанию выглядит в AppCompat .
Стиль кнопок по умолчанию в AppCompat :
Как вы видите, эти атрибуты являются базовым стилем для кнопки. Давайте укажем Widget.AppCompat.Button в качестве родителя стиля MyButton и изменим атрибут background на backgroundTint , поскольку мы хотим изменить только цвет, а не drawable-объект.
Установка родительского стиля кнопки MyButton :
Затем мы получаем кнопку с красным фоном.
Кнопка с красным фоном
Стиль и тема
Мы уже упоминали о стиле и теме, но в чем разница между ними? И стиль, и тема — это набор атрибутов, но разница заключается в том, в каком случае они применяются. Стили предназначены для применения к представлениям, а темы — к действиям или всему приложению. По этой причине стиль должен содержать только атрибуты представления, а тема — только атрибуты темы.
Вы можете изменить стиль представления тремя способами:
Изменение атрибута представления в файле макета
Создание нового стиля и применение его с помощью атрибута представления style в файле макета
Указание стиля по умолчанию
Давайте посмотрим, как можно изменить фон кнопки в файле макета.
Изменение фона кнопки в файле макета:
Теперь давайте проверим, как мы можем создать стиль и применить его к этой кнопке.
Стиль кнопки с пользовательским фоновым drawable:
Установка пользовательского стиля для кнопки:
При применении стиля учитываются только атрибуты представления. Если вы попытаетесь установить любой атрибут темы внутри стиля MyButton , это не сработает. Для наглядности приведем пример:
Использовать атрибут темы colorPrimary внутри drawable фона кнопки.
Изменим значение colorPrimary внутри стиля MyButton
Фоновый drawable, который использует атрибут colorPrimary :
Изменение атрибута темы colorPrimary внутри стиля кнопки:
Тогда, несмотря на то, что мы установили основной цвет как красный, мы получим кнопку с фиолетовым фоном.
Кнопка с фиолетовым фоном
Это происходит потому, что представление знает только о своих собственных атрибутах; Кнопка (Button) не знает об атрибуте colorPrimary, поэтому он игнорируется.
Представление получает свои атрибуты из файла макета или атрибута стиля. Если стиль представления включает атрибут темы, он будет проигнорирован.
Как же тогда изменить атрибуты темы только для одного представления? Здесь на помощь приходит наложение тем.
Наложение тем
Наложение тем — это техника, используемая при переопределении атрибутов темы для любого представления или группы представлений. Наложение тем очень полезно, когда вы обновляете тему определенной части вашего приложения.
При применении наложения темы нужно выполнить два шага:
Создайте стиль, состоящий из атрибутов темы, которые необходимо изменить.
Примените этот стиль к файлу макета с помощью android:theme или программно с помощью ContextThemeWrapper .
Давайте продолжим вышеупомянутый сценарий, в котором мы изменяем цвет фона кнопки с помощью атрибута темы colorPrimary . Сначала нам нужно создать стиль для наложения темы, в котором мы зададим colorPrimary .
Наложение темы для кнопки:
У наложения темы нет родительского элемента.
Кроме того, лучше начинать именовать стиль с ThemeOverlay , поскольку так его будет легче отличить от других стилей. Эта техника именования используется также в Material Components и AppCompat.
Давайте применим это наложение к кнопке в файле макета.
Применение наложения темы с помощью атрибута android:theme :
Имейте в виду, что если наложение темы применяется к группе представлений, оно также будет применяться ко всем ее потомкам. Другими словами, тема каждого потомка группы представлений накладывается, когда наложение темы применяется к группе представлений.
Применение наложения темы к группе представлений:
Мы также можем осуществить наложение темы программно, обернув контекст представления с помощью ContextThemeWrapper .
Использование ContextThemeWrapper для наложения темы:
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 в качестве оформления внешнего вида текста:
Как видите, атрибут style для TextView является свободным и может использоваться для настройки других атрибутов представления. Вы также можете установить android:textAppearance , создав стиль.
Давайте создадим стиль однострочного заголовка.
Однострочный стиль заголовка:
Теперь вы можете установить этот стиль с помощью атрибута style и повторно использовать его для любого текста.
Применение однострочного стиля заголовка к текстовому представлению:
Если вы хотите более глубоко погрузиться в изучение темы внешнего вида текста и приоритета стилей, я настоятельно рекомендую вам прочитать эту статью.
Заключение
Атрибуты являются ключевым понятием в стилизации и темизации. Используйте атрибуты представления для их стиля и атрибуты темы для приложения, Активности или иерархии представлений. Если вы хотите изменить стиль для всех инстансов данного типа представления во всем приложении, вам подойдут стили по умолчанию. Наложения тем используются для переопределения атрибутов темы, и вы можете использовать их даже для представлений в заданной иерархии. Внешний вид текста может помочь вам сформировать текстовые атрибуты TextViews с помощью android: textAppearance , оставляя атрибут style свободным.
Android-разработчиков с опытом от 3 лет и всех желающих приглашаем на онлайн-интенсив «Полный coverage. Покрываем Android-приложение юнит/интеграционными/UI тестами».
На интенсиве мы:
— Научимся покрывать android приложение юнит/интеграционными/UI тестами.
— Рассмотрим различные кейсы: покрытие тестами suspend функций, RX цепочек.
— Изучим популярные инструменты для написания тестов.
— Обсудим best practices по покрытию тестами.
Источник
