Темы и стили в Android без магии. И как их готовить с SwitchCompat

Темы и стили в Android без магии. И как их готовить с SwitchCompat

В предыдущей статье мы рассмотрели как использовать темы и стили на уровне кода, на примере кастомной view. В этой статье давайте разберем несколько способов стилизации стандартного ui элемента, а в частности SwitchCompat.

Введение

Не всегда оформление по умолчанию стандартного UI элемента устраивает дизайнера. Давайте разберем, как поменять внешний вид элемента на примере SwitchCompat.

Для решения задачи нам нужно:

• Создать свой стиль для SwitchCompat.
• Каким-то образом задать этот стиль SwitchCompat.

• Указывать для каждой view в верстке экранов через атрибут style.
• Создать тему с переопределенным атрибутом switchStyle и назначить эту тему в манифесте для всего приложения или конкретной активити. Это изменит внешний вид view для всего приложения/активити.
• Тему также можно установить программно, в коде активити. При необходимости ее можно менять «на лету».

Новый стиль для SwitchCompat

В ресурсах создадим новый стиль MySwitchStyle, наследуем оформление от Widget.AppCompat.CompoundButton.Switch, задав parent. Можно и не наследовать, но тогда придется указать все значения, даже которые мы не планируем менять.

Чтобы что-то изменить, надо переопределить требуемые атрибуты. Атрибуты можно посмотреть в документации.

В документации видим несколько атрибутов. Они указаны в виде, как если бы мы обращались к ним в коде (например, вот так R.styleable.SwitchCompat_android_thumb). Я расшифрую только часть из них, чтобы не было сомнений. Назначение остальных несложно понять из документации.

• android:thumb — ресурс для подвижной части SwitchCompat
• track — ресурс для неподвижной части SwitchCompat
• thumbTint — позволяет окрашивать подвижную часть в нужные цвета в зависимости от состояния SwitchCompat
• trackTint — позволяет окрашивать неподвижную часть в нужные цвета в зависимости от состояния SwitchCompat

Нам понадобится селектор в папке color наших ресурсов. Файл selector_switch_thumb.xml

Теперь зададим атрибут thumbTint в нашем стиле.

Теперь все SwitchCompat, получившие каким-то образом стиль MySwitchStyle, будут выглядеть по-новому.

Стиль в верстке

Самый тривиальный и негибкий способ.

• Стиль применяется при inflate ресурса layout.
• Повлиять программно мы никак не можем.
• Указывать каждый раз в верстке неудобно. И можем забыть.

Стиль в теме. Тема назначается через Manifest

Создаем тему AppTheme и задаем значение атрибуту switchStyle. Значением является наш стиль MySwitchStyle.

Тема может быть указана в манифесте для всего приложения

Или для конкретной активити

Теперь все SwitchCompat будут иметь новый внешний вид. Без изменения в верстке.

• Плюсы — Можем менять внешний вид для всего приложения сразу.
• Минусы — налету менять не получится.

Стиль в теме. Тема назначается программно

Для того, чтобы установить тему для активити программно, нужно вызвать метод активити setTheme(themeResId).

Давайте менять тему активити в зависимости от состояния Switch.

private const val KEY_CUSTOM_THEME_CHECKED = "KEY_CUSTOM_THEME_CHECKED" class MainActivity : AppCompatActivity() < private val preference by lazy < PreferenceManager.getDefaultSharedPreferences(this) >override fun onCreate(savedInstanceState: Bundle?) < val isCustomThemeChecked = preference.getBoolean( KEY_CUSTOM_THEME_CHECKED, true ) if (isCustomThemeChecked) < setTheme(R.style.CustomTheme) >else < setTheme(R.style.StandardTheme) >super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) customThemeCheckbox.isChecked = isCustomThemeChecked customThemeCheckbox.setOnCheckedChangeListener < _, isChecked ->preference.edit() .putBoolean(KEY_CUSTOM_THEME_CHECKED, isChecked) .apply() recreate() > > > 

1. Устанавливаем тему программно, вызвав setTheme. Метод надо вызывать до super.onCreate(savedInstanceState). В onCreate у нас происходит инициализация фрагментов (когда они есть).
2. Задаем начальное состояние Switch в зависимости от темы.
3. Устанавливаем листенер, который при изменении Switch меняет тему в настройках и перезапускает активити через метод активити recreate().

Остальной код

Другие View

Чтобы переопределить стиль для SwitсhView для всего приложения, мы переопределили значение атрибута switchStyle, можно догадаться, что такие атрибуты есть и для других View.

• editTextStyle
• checkboxStyle
• radioButtonStyle

Кусок из темы Base.V7.Theme.AppCompat.Light.

@style/Widget.AppCompat.EditText @style/Widget.AppCompat.CompoundButton.CheckBox @style/Widget.AppCompat.CompoundButton.RadioButton @style/Widget.AppCompat.Button

Ресурсы

Статья не претендует на полный справочник. Код умышленно сокращен. Я ставил задачу дать общее понимание — как это работает и зачем это нужно. Дальше все легко ищется в документации и в стандартных ресурсах.

• android development
• android theme

Темы и стили

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

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

Откройте снова файл манифеста AndroidManifest.xml из прошлого урока и измените строчку для активности AboutActivity, указав тему.

Запустив программу, вы увидите, что внешний вид окна «О программе» стал уже другим. Сравните.

Обратите внимание, что теперь появляется не окно во весь экран, а диалоговое окно в центре экрана. При этом остальная часть экрана затемняется.

Похожие темы: android:theme=»@style/Theme.AppCompat.Light.Dialog», android:theme=»@style/Theme.AppCompat.Light.Dialog.MinWidth», android:theme=»@style/Theme.AppCompat.Dialog.MinWidth».

Тему можно применить не только к отдельной активности, но и ко всем активностям приложения, если прописать в теге application.

Кстати, вы можете разработать свою тему на основе существующих и сохранить ее в файле res/values/styles.xml.

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

Стили

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

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

Предположим, у нас есть следующий код разметки для TextView:

Мы можем вынести все свойства в файл стилей следующим образом:

res/values/styles.xml

Тогда в файле разметки теперь будет так:

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

Создать файл со стилями несложно. Создаем новый XML-файл в папке res/values/ вашего проекта. Имя файла не имеет значения, главное, чтобы расширение было XML, а сам файл находился в указанной папке. В проекте, создаваемом студией, уже есть готовый файл res/values/styles.xml, в который вы можете добавить новые стили. А также вы можете создать свой отдельный файл стилей.

Корневым узлом файла должен быть элемент . Для каждого элемента, которому требуется стиль, нужно добавить элемент с уникальным именем. Далее создаются элементы для каждого свойства и присваиваются им имена, которые отвечают за выбранное свойство. Значением элемента должно выступать ключевое слово, цвет в шестнадцатеричном значении, ссылка на другой тип ресурсов или другое значение в зависимости от свойства стиля. Ниже представлен образец такого стиля:

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

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

Быстрое создание стилей через Android Studio

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

В текстовом режиме щёлкните правой кнопкой мыши на нужном компоненте и в контекстном меню выбирайте пункт Refactor | Extract | Style. Далее укажите имя стиля и выберите требуемые параметры для экспорта. Студия самостоятельно создаст стиль в файле styles.xml и автоматически применит созданный ресурс в layout-файле.

Наследование стилей

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

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

Как видите, нам не пришлось использовать атрибут parent в теге style, потому что имя стиля начинается с имени MyTextStyle (созданный нами стиль). Теперь наш стиль наследует все свойства от стиля родителя, при этом мы изменили одно свойство android:textColor, чтобы текст выводился красным цветом. Вы можете ссылаться на новый стиль через конструкцию @style/MyTextStyle.Red.

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

Итак, мы наследовались от стилей MyTextStyle и MyTextStyle.Red, а затем добавили новое свойство android:textSize.

Не забывайте, что данная техника наследования применима только к собственным стилям. Для наследования системных стилей типа TextAppearance необходимо использовать атрибут parent.

Свойства стиля

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

Для поиска свойств, которые применимы к заданному View, можно обратиться к документации и просмотреть все поддерживаемые свойства. Так все атрибуты, перечисленные в таблице атрибутов класса TextView могут быть использованы для элементов TextView или EditText. Например, у данных элементов есть свойство android:inputType:

Но вместо этого мы можем также создать стиль для элемента EditText, который будет включать в себя данное свойство:

В файле разметки теперь можно написать так:

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

Для просмотра всех существующих стилей вы можете посмотреть исходники Android. Найдите папку, в которую вы устанавливали Android SDK, там можно найти нужные исходники. Например, у меня путь к исходникам стилей Android API 17 выглядит следующим образом: D:Androidandroid-sdk-windowsplatformsandroid-17dataresvaluesstyles.xml. Помните, что все объекты View не поддерживает сразу все существующие атрибуты, поэтому используйте только специфичные стили для выбранного элемента. Но если вы по ошибке зададите ошибочный стиль для View, то это не вызовет краха приложения. Элемент View будет использовать только подходящие свойства и игнорировать чужие для него свойства.

Существуют также свойства, которые не поддерживаются ни одним элементом View и применимы только как тема. Подобные стили действуют сразу на всё окно, а не на отдельный элемент. Например, есть тема, скрывающая заголовок приложения, строку состояния или изменяющая фон окна. Подобные стили легко определить по слову window, с которого начинается название стиля: windowNoTitle, windowBackground (о них ниже).

Не забывайте использовать префикс android перед именем в каждом элементе item: .

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

Извлечение свойств в стили

Если вы решили в своём проекте использовать стили и вам нужно быстро переместить нужные атрибуты, то Android Studio предлагает быстрый механизм для этой операции. В текстовом режиме ставите курсор на названии компонента, например, ImageView, затем щёлкаете правой кнопкой мыши и выбираете Refactor | Extract | Style. . В диалоговом окне выбираете нужные атрибуты для переноса в стили и выбираете имя стиля.

Динамическое изменение стилей

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

 Context themedContext = new ContextThemeWrapper(baseContext, R.style.MyTheme); // in LayoutInflater View view = LayoutInflater.from(themedContext) .inflate(R.layout.mylayout, null); // in constructor View view = new View(themedContext); 

Тема

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

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

Чтобы установить тему, откройте файл AndroidManifest.xml и отредактируйте тег , чтобы он включал в себя атрибут android:theme с указанием имени стиля:

 #b0b0ff  

 #FF9800 

 #F57C00 

 #00E676 

 @color/accentColor @color/accentColor 

 res/values/themes.xml  res/layout/fragment_list.xml 

 AlertDialog alertDialog = new AlertDialog.Builder( getActivity(), R.style.AlertDialogCustom_Destructive) .setPositiveButton(R.string.button_delete, new DialogInterface.OnClickListener() < @Override public void onClick(DialogInterface dialogInterface, int i) < // Delete Action >>) .setNegativeButton(R.string.button_cancel, new DialogInterface.OnClickListener() < @Override public void onClick(DialogInterface dialogInterface, int i) < // Cancel Action >>) .setTitle(R.string.title_delete_item) .create(); 

 import android.app.AlertDialog; public void onClick(View view)

 import android.support.v7.app.AlertDialog; public void onClick(View view) < AlertDialog.Builder builder = new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle); builder.setTitle("Dialog"); builder.setMessage("Покормить кота?"); builder.setPositiveButton("OK", null); builder.setNegativeButton("Cancel", null); builder.show(); > 

 @style/TitleDialogTextStyle  

 style bg-light">