(Min SDK 21)
Общий подход
Гранулярность
Я думаю, что это достаточно детальный подход, чтобы отделить внешний вид текста от фона.Это дает возможность комбинировать разные фоны с разным текстом.Он также соответствует двум настройкам стиля, предоставленным Button и организации Material Design.Следовательно, он решает вопрос, как он предназначен для использования.
Цена заключается в том, что каждый Button нуждается в обеих настройках:
- Текст кнопки:
android:textAppearance - Фон кнопки:
style
Чтобы даже снизить эту цену styles_material.xml фактически требует продвинутого подхода.Каждая кнопка style уже содержит внешний вид текста по умолчанию.Так что в обычном случае мне нужно только нажать кнопку style.
<Button
style="?defaultButtonStyle"
Я следую этому шаблону для собственного стиля кнопок, так как вопрос касается предполагаемого использования.Если я хочу изменить значение по умолчанию, я добавляю альтернативный внешний вид текста, устанавливая его на android:textAppearance.
<Button
style="?defaultButtonStyle"
android:textAppearance="?smallButtonTextAppearance"
Для очень специальных кнопок я все еще могу настроить стиль на уровне файла макета.Это самый низкий уровень детализации.
Подсказка: Имейте в виду, что android:textAppearance имеет очень низкий приоритет.Если вы установите текстовый атрибут где-то в теме (или стиле), вы перезапишете один и тот же атрибут во всех android:textAppearance.Он работает с такой же силой, как аннотация "важный" в CSS, что может быть довольно ловушкой.
Гибкая тема
Без
Если я наденуне планирую использовать разные темы, я могу установить стили непосредственно в макетах.
<Button
style="@style/My.DefaultButtonStyle"
android:textAppearance="@style/My.SmallButtonTextAppearance"
...
С
Если вы хотите иметь возможность обмениваться темами, я сначала сопоставляю все типы стилей с атрибутами.Затем я устанавливаю стили косвенно, используя атрибуты.Это дает мне возможность подключать другие стили для других тем без необходимости дублирования макетов.
<Button
style="?defaultButtonStyle"
android:textAppearance="?smallButtonTextAppearance"
...
Лично я предпочитаю не использовать или смешивать данные атрибуты, но полностью определять свой собственный набор атрибутов для адресации.мой дизайн.Таким образом, уровни лука остаются чисто разделенными.
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<!-- button text appearance -->
<attr name="defaultButtonTextAppearance" format="reference" />
<attr name="smallButtonTextAppearance" format="reference" />
<!-- button backgrounds -->
<attr name="defaultButtonStyle" format="reference" />
<attr name="alarmButtonStyle" format="reference" />
В темах атрибуты сопоставляются со стилями, специфичными для темы.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="OtherTheme" parent="Theme.AppCompat">
<!-- button text appearance -->
<item name="defaultButtonTextAppearance">@style/OtherTheme.DefaultButtonTextAppearance</item>
...
<!-- button backgrounds -->
<item name="defaultButtonStyle">@style/OtherTheme.DefaultButtonStyle</item>
...
Текст кнопки
Если я отыскиваю стили к источникам, я прихожу кфайл data/res/values/styles_material.xml, который определяет корень всех появлений текста кнопки.TextAppearance.Material.Button наследуется от TextAppearance.Material, но четыре соответствующих атрибута для кнопок перезаписываются.
<style name="TextAppearance.Material">
<item name="textColor">?attr/textColorPrimary</item>
<item name="textColorHint">?attr/textColorHint</item>
<item name="textColorHighlight">?attr/textColorHighlight</item>
<item name="textColorLink">?attr/textColorLink</item>
<item name="textSize">@dimen/text_size_body_1_material</item>
<item name="fontFamily">@string/font_family_body_1_material</item>
<item name="lineSpacingMultiplier">@dimen/text_line_spacing_multiplier_material</item>
</style>
<style name="TextAppearance.Material.Button">
<item name="textSize">@dimen/text_size_button_material</item>
<item name="fontFamily">@string/font_family_button_material</item>
<item name="textAllCaps">true</item>
<item name="textColor">?attr/textColorPrimary</item>
</style>
Он может быть перезаписан моими собственными унаследованными стилями.Это также показывает, что было бы легко написать собственный стиль отображения текста без использования наследования вообще.
Цвет
Понимание системы управления цветом текста в Android - это их самая запутанная часть, потому что системадовольно мощный.Здесь приходит некоторое просветление.
В приведенном выше TextAppearance.Material.Button я считаю, что цвет текста определяется атрибутом ?textColorPrimary.Этот атрибут снова основан на атрибуте ?android:colorForeground.
Атрибут ?android:colorForeground является центральным переключателем для установки цветов текста.По умолчанию все цвета текста рассчитываются на основе этого параметра, а также цвета кнопок.Например, для неактивных кнопок, для основного текста и т. Д. Рассчитываются разные степени серых или непрозрачных вариантов.
Вместо того, чтобы касаться десятков разных мест, рекомендуется установить здесь общий цвет текста по умолчанию инасколько это возможно, положитесь на стандартную систему вычисления цвета Android.Отрегулируйте его в деталях.
<item name="android:colorForeground">@color/orange_700</item>
По умолчанию этот параметр установлен на @color/foreground_material_dark.
Подсказка 1: Если вы отредактируете настройку с помощью Android Studio Theme Editor, она, возможно, изменит значение @color/foreground_material_dark.Для меня не очень хорошая идея изменить значение материальной темноты, потому что это не моя сфера.Лучше использовать ссылку, как показано ранее.
Подсказка 2: Theme Editor является подходящим инструментом для обнаружения связей системы атрибутов цвета.Это отношения показывают,когда вы экспериментально пытаетесь редактировать различные атрибуты с помощью редактора.
Если я хочу, чтобы цвет текста кнопки отличался от общего цвета текста, я устанавливаю его на уровне стиля оформления текста.
Подсказка 3: Использование ?android:colorForeground не работает из поля
ниже API 26. Обходной путь см. Здесь.
Размер текста
Размер текста - это фактор внешнего вида текста, который я обычно хочу адаптировать к своему собственному дизайну в рамках своих настроенных стилей отображения текста.
<style name="My.SmallButtonTextAppearance" parent="My.DefaultButtonTextAppearance">
<item name="android:textSize">16sp</item>
</style>
TextAppearance.Material.Button принимает размер текста по умолчанию из ресурса @dimen/text_size_button_material.Не существует системы с центральной настройкой размера текста, сопоставимой с системой настройки цвета текста.
Все заглавные буквы
В корневом стиле TextAppearance.Material.Button для всех заглавных букв установлено значение true.Нет даже ресурса, ценность взята из.Это просто жестко запрограммировано.
<item name="textAllCaps">true</item>
Есть большая вероятность, я хочу установить его в false в моих пользовательских стилях кнопок.
<item name="android:textAllCaps">false</item>
Семейство шрифтов
Как и в случае с цветами текста, семейство шрифтов обычно представляет собой систему с общей центральной природой.Как это управляется для кнопок?Корневой стиль TextAppearance.Material.Button использует строковый ресурс @string/font_family_button_material.
<item name="fontFamily">@string/font_family_button_material</item>
В файле data/res/values/donttranslate_material.xml это значение равно sans-serif-medium, а в файле data/res/values-watch/donttranslate_material.xml значение равноsans-serif-condensed.
<string name="font_family_button_material">sans-serif-medium</string>
<string name="font_family_button_material">sans-serif-condensed</string>
Эти настройки sans-serif сопоставляются с выбранным семейством шрифтов в настройке шрифтов.Обычно sans-serif подходит для текста кнопки.Для дальнейшей настройки шрифтов я указываю на этот вопрос .
Стиль кнопок
Помимо использования цвета для фона, можно применить файл ресурсов xml, чтобы указатьфон с причудливыми углами, цветовыми градиентами или другими графическими эффектами, также поддерживающими различные фоны для разных состояний кнопки .
На эту часть сильно повлиял мой дизайн.Обычно я использую свой собственный фон.
С другой стороны, существует богатая система предопределенных файлов ресурсов фонов кнопок в дизайне материала.Я хотел бы дать краткий обзор здесь, но это выходит за рамки моих навыков и кажется настолько большим, что стоит отдельной темы.
style для фона не должно содержать настроек для width, height или margins, поскольку это относится к окружающему макету.С другой стороны, padding принадлежит фону style.
Стили кнопок Material Design
В файле data/res/values/styles_material.xml я нахожу девять стилей кнопок, от которых я могу наследовать.Если я напишу свое собственное, не следует забывать устанавливать внешний вид текста по умолчанию.
Корневым элементом является Widget.Material.Button.По умолчанию это текстовый вид ?textAppearanceButton.Следовательно, установка этого атрибута является опцией для непосредственного использования стилей кнопок дизайна материала без наследования, но при этом имеет настроенный внешний вид текста по умолчанию.
<!-- Bordered ink button -->
<style name="Widget.Material.Button">
<item name="background">@drawable/btn_default_material</item>
<item name="textAppearance">?attr/textAppearanceButton</item>
<item name="minHeight">48dip</item>
<item name="minWidth">88dip</item>
<item name="stateListAnimator">@anim/button_state_list_anim_material</item>
<item name="focusable">true</item>
<item name="clickable">true</item>
<item name="gravity">center_vertical|center_horizontal</item>
</style>
Атрибут ?colorAccent используется для установки цвета Widget.AppCompat.Button.Colored.См. Android Studio Theme Editor.См. @drawable/btn_colored_material.
Обратите внимание, что внешний вид текста по умолчанию Widget.AppCompat.Button.Colored варьируется и не устанавливается настраиваемым атрибутом.
<!-- Colored bordered ink button -->
<style name="Widget.Material.Button.Colored">
<item name="background">@drawable/btn_colored_material</item>
<item name="textAppearance">@style/TextAppearance.Material.Widget.Button.Colored</item>
</style>
<!-- Small bordered ink button -->
<style name="Widget.Material.Button.Small">
<item name="minHeight">48dip</item>
<item name="minWidth">48dip</item>
</style>
<!-- Borderless ink button -->
<style name="Widget.Material.Button.Borderless">
<item name="background">@drawable/btn_borderless_material</item>
<item name="stateListAnimator">@null</item>
</style>
Обратите внимание, что внешний вид текста по умолчанию Widget.Material.Button.Borderless.Coloredизменяется и не устанавливается настраиваемым атрибутом.
<!-- Colored borderless ink button -->
<style name="Widget.Material.Button.Borderless.Colored">
<item name="textAppearance">@style/TextAppearance.Material.Widget.Button.Borderless.Colored</item>
</style>
Обратите внимание, что Widget.Material.Button.ButtonBar.AlertDialog наследуется от Widget.Material.Button.Borderless.Colored.Применяются те же ограничения к внешнему виду текста по умолчанию.
<!-- Alert dialog button bar button -->
<style name="Widget.Material.Button.ButtonBar.AlertDialog" parent="Widget.Material.Button.Borderless.Colored">
<item name="minWidth">64dp</item>
<item name="minHeight">@dimen/alert_dialog_button_bar_height</item>
</style>
<!-- Small borderless ink button -->
<style name="Widget.Material.Button.Borderless.Small">
<item name="minHeight">48dip</item>
<item name="minWidth">48dip</item>
</style>
<style name="Widget.Material.Button.Inset">
<item name="background">@drawable/button_inset</item>
</style>
<style name="Widget.Material.Button.Toggle">
<item name="background">@drawable/btn_toggle_material</item>
<item name="textOn">@string/capital_on</item>
<item name="textOff">@string/capital_off</item>
</style>
Лично я бы либо использовал один из этих предопределенных стилей кнопок, либо унаследовал свой собственный от Widget.Material.Button.Это позволяет сохранить низкую иерархию наследования и легко читаемый код.Это спасает меня не более трех строк кода, если я наследую от другого стиля, в то время как код становится менее поддерживаемым.
Существуют исключения из этого практического правила.Например, @drawable/btn_borderless_material является приватным.Поэтому я должен либо наследовать от Widget.Material.Button.Colored, либо создать копию файла.
Приложение
Смежные вопросы
Атрибуты
Цвета
Шрифты