Android с нуля: создание стилей и тем

Как разработчики Android, мы стремимся сосредоточиться в первую очередь на функциональности наших приложений. Однако одной лишь функциональности достаточно редко. В Google Play, на котором сегодня размещено более миллиона приложений, внешний вид не менее важен, чем функциональность. Если вам трудно в это поверить, я советую вам взглянуть на приложения в разделе « Лучшие графики » в Google Play.

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

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

1. Создание стилей

Стили, очевидно, применяются к компонентам пользовательского интерфейса. Поэтому давайте начнем с создания нового пустого действия и добавления двух представлений в его XML-файл макета.

Как видно из приведенного выше кода, такие свойства, как layout_width и layout_margin , явно включены в определение каждого представления.

Чтобы создать новый стиль для первого представления, щелкните его правой кнопкой мыши и выберите « Refactor»> «Extract»> «Style» .

Теперь вы увидите диалоговое окно, в котором вы можете дать имя стилю, а также выбрать атрибуты, которые должны быть включены в него. Пусть имя будет MyBox и выберите все атрибуты, кроме background .

Когда вы нажмете ОК , вы увидите, что код для первого просмотра изменился.

Теперь у представления есть атрибут 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 , использование AppTheme в качестве родителя всегда является хорошей идеей. Кроме того, вы можете напрямую использовать Theme.AppCompat в качестве родителя.

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

Чтобы открыть редактор тем, откройте меню « Инструменты» и выберите « Android»> «Редактор тем» .

В правой части окна редактора тем есть элементы управления не только для изменения тем, но и для создания новых. Левая сторона показывает вам предварительный просмотр результатов изменений, которые вы вносите в темы.

Чтобы создать новую тему, щелкните раскрывающееся меню « Тема» и выберите параметр « Создать новую тему» .

В появившемся диалоговом окне установите имя новой темы на MyTheme и нажмите ОК .

На этом этапе у styles.xml будет новая строка, которая выглядит следующим образом:

Теперь давайте MyTheme с помощью редактора тем. Для простоты в этом руководстве мы будем изменять только значения colorPrimary , colorPrimaryDark и colorAccent .

Чтобы изменить значение colorPrimary , нажмите кнопку colorPrimary . Редактор тем теперь покажет вам диалог, содержащий палитру цветов. Выберите любой цвет, который вы хотите, но убедитесь, что вы даете ему новое имя. Если вы забудете это сделать, редактор тем заменит цвет, используемый AppTheme .

Выполните те же действия, чтобы изменить значения colorPrimaryDark и colorAccent . Редактор тем автоматически использует цвет, выбранный вами для colorPrimary чтобы предложить подходящие цвета для colorPrimaryDark и colorAccent .

Определение MyTheme теперь будет выглядеть так:

4. Применение тем

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

Следующий код создает обычную Button , Button без полей, цветную Button , Seekbar , Button RadioButton , Switch , Seekbar , TextView и EditText .

Со всеми недавно добавленными видами макет будет выглядеть так:

Если вы читали спецификацию Material Design, я уверен, что вы можете сказать, что в данный момент в colorPrimary используются цвета индиго для colorPrimary и colorPrimaryDark . Для colorAccent он использует оттенок розового. Это цвета по умолчанию, указанные в Android Studio. Вы можете найти их шестнадцатеричные эквиваленты в res / values ​​/ colors.xml вашего проекта.

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

Точно так же вы можете применить тему ко всему вашему приложению, установив значение атрибута android:theme определения приложения в @style/MyTheme .

Если вы посмотрите на свою деятельность сейчас, она должна выглядеть совсем иначе.

Вывод

Из этого урока вы узнали, как создавать и применять пользовательские стили и темы для Android. Не стесняйтесь использовать эти знания, чтобы придать вашим приложениям новый и лучший вид. Однако старайтесь не слишком увлекаться — большинство пользователей Android сегодня настолько привыкли к Material Design, что отклонение от его руководящих принципов может раздражать их.

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