Android design support library v28

Русские Блоги

Подробное описание новых компонентов в Android Design Support Library v28

1. Введение

Недавно Google выпустила последнюю версию библиотеки поддержки дизайна 28.0.0-alpha3, в которую добавлены некоторые очень полезные компоненты. В этой статье они подробно описаны, давайте взглянем!

Если вы не разбираетесь в материальном дизайне, можете нажать на эту статью«Введение в библиотеку поддержки дизайна»Узнать о.

Ввести зависимые библиотеки

Добавьте зависимость к файлу buil.gradle в корневом каталоге приложения:

2.MaterialButton

Компонент MaterialButton наследуется от Button, поэтому можно использовать большинство атрибутов Button, а закругленные углы, границу, значок и другие атрибуты кнопки можно настроить более удобно. См. Эффект:

Соответствующий файл макета:

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

Справочная таблица атрибутов MaterialButton:

Атрибуты	Введение
app:backgroundTint	Раскраска фона кнопки
app:backgroundTintMode	Режим окраски фона кнопки
app:icon	Значок кнопки (слева от текста, положение не может быть установлено)
app:iconSize	Размер значка кнопки
app:iconPadding	Отступ значка кнопки
app:iconTint	Раскраска значка кнопки
app:iconTintMode	Режим раскраски значков кнопок
app:additionalPaddingStartForIcon	Левое внутреннее поле значка кнопки
app:additionalPaddingEndForIcon	Правое внутреннее поле значка кнопки
app:strokeColor	Цвет границы кнопки
app:strokeWidth	Ширина границы кнопки
app:cornerRadius	Кнопка круглая угловая
app:rippleColor	Цвет эффекта пульсации воды при нажатии кнопки

Эффект режима затенения

3.Chip & ChipGroup

До появления компонентов Chip мы всегда реализовывали эффекты пользовательского интерфейса, такие как теги ключевых слов, с помощью настраиваемых элементов управления, таких как»Android Flow Layout FlowLayout реализует теги ключевых слов»Эффект достигнут, теперь компонент Chip & ChipGroup может его поддерживать, очень хорошо, посмотрите эффект:

Соответствующий файл макета:

Необходимо установить функцию одиночного или множественного выбораandroid:checkable=»true»Это возможно, официальный метод настройкиapp:checkable=“true”, Будет сообщено об ошибке, но она не будет найдена, это может быть ошибка, проверьте еще раз, когда будет выпущена официальная версия.

Компонент Chip не поддерживает щелчок по умолчанию, для этого необходимо установить ** android: clickable = «true» **.

Справочная таблица атрибутов ChipGroup:

Атрибуты	Введение
app:chipSpacing	Расстояние между стружками в горизонтальном и вертикальном направлении
app:chipSpacingHorizontal	Расстояние между стружками в горизонтальном направлении
app:chipSpacingVertical	Расстояние между стружками в вертикальном направлении
app:singleLine	Отображать ли чип в одной строке, по умолчанию — false
app:singleSelection	Независимо от того, является ли это режим одиночного выбора, значение по умолчанию — false.

Справочная таблица по атрибутам чипа:

Атрибуты	Введение
app:chipBackgroundColor	Цвет фона чипа
app:chipCornerRadius	Угол скругления стружки
app:chipStrokeColor	Цвет границы чипа
app:chipStrokeWidth	Ширина границы чипа
app:rippleColor	Чип нажмите цвет эффекта водной ряби
app:chipIconEnabled	Отображать ли значок на чипе, по умолчанию true
app:chipIcon	Значок чипа (слева от текста, положение не может быть установлено)
app:chipIconSize	Размер значка чипа
app:closeIconEnabled	Отображать ли кнопку закрытия чипа, по умолчанию — false
app:closeIcon	Значок кнопки закрытия чипа
app:closeIconTint	Раскраска кнопки закрытия чипа
app:closeIconSize	Размер кнопки закрытия чипа
app:checkedIconEnabled	Отображать ли значок выбранного чипа, по умолчанию — true
app:checkedIcon	Значок выбранного чипа
app:chipStartPadding	Левое поле чипа
app:chipEndPadding	Правый внутренний край скола
app:iconStartPadding	Значок чипа левое внутреннее поле
app:iconEndPadding	Значок чипа правое внутреннее поле
app:textStartPadding	Левое внутреннее поле для текста фишки
app:textEndPadding	Правое внутреннее поле текста чипа
app:closeIconStartPadding	Значок закрытия чипа, левое внутреннее поле
app:closeIconEndPadding	Значок закрытия чипа правое внутреннее поле

4.MaterialCardView

По сравнению с обычным CardView, вы можете установить стиль границы, чтобы увидеть эффект:

Соответствующий файл макета:

Справочная таблица атрибутов MaterialCardView:

Атрибуты	Введение
app:strokeColor	Цвет границы MaterialCardView
app:strokeWidth	Ширина границы MaterialCardView

5.BottomAppBar

Компонент BottomAppBar обычно используется вместе с компонентом FloatingActionButton, но не очень часто используется в процессе разработки. Посмотрите на эффект:

Соответствующий файл макета:

Корневой макет должен использовать CoordinatorLayout, а FloatingActionButton привязан к BottomAppBar через свойство layout_anchor.

Справочная таблица по свойству BottomAppBar:

Атрибуты	Введение
app:backgroundTint	BottomAppBar окраска фона
app:fabAlignmentMode	Положение FAB (по центру или справа), по умолчанию справа
app:fabAttached	Привязать ли FAB, по умолчанию true
app:fabCradleMargin	Расстояние между BottomAppBar и FAB, по умолчанию 5dp
app:fabCradleRoundedCornerRadius	Угол скругления между BottomAppBar и FAB, по умолчанию 8dp.
app:fabCradleVerticalOffset	Вертикальное смещение FAB в BottomAppBar, по умолчанию 0dp

6. Напишите в конце

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

Код загружен на GitHub, добро пожаловать в Star and Fork!

Источник

Обзор нововведений Android Design Support Library v28

И снова здравствуйте.

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

Недавно была анонсирована 28 версия Android Support Library. В текущей альфа-версии у нас появился доступ к набору новых интересных компонентов. В этой статье я хочу взглянуть на дополнения, которые были внесены в библиотеку Support Library в виде компонентов Material View.

MaterialButton — это виджет, который можно использовать для отображения кнопки в материальном стиле в пользовательском интерфейсе приложений. Этот класс наследуется от класса AppCompatButton, который вы, вероятно, уже используете в своих проектах, но в чем отличия? По умолчанию эта кнопка уже будет оформлена с материальным внешним видом без необходимости настраивать ее самостоятельно, используя флаг стиля. Мы можем использовать класс MaterialButton таким, какой он есть, ведь у него уже будет материальный внешний вид, который нам и нужен — рассматривайте его как более удобный класс.

Мы можем добавить эту кнопку в наш layout-файл следующим образом:

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

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

• app:icon — Используется для определения отображаемого изображения в начале кнопки

• app:iconTint — Используется для изменения цвета иконки, определенной в атрибуте app:icon
• app:iconTintMode — Определяет режим, который будет использоваться для изменения цвета иконки

• app:iconPadding — Отступ, который будет применяться к иконке, определенной в атрибуте app:icon

• app:additionalPaddingLeftForIcon — Определяет отступ, который будет применяться слева от иконки, определенной в атрибуте app:icon

• app:additionalPaddingRightForIcon — Определяет отступ, который будет применяться справа от иконки, определенной в атрибуте app:icon

• app:rippleColor — Цвет эффекта пульсации кнопки
• app:backgroundTint — Используется для применения оттенка к фону кнопки. Если вы хотите изменить цвет фона кнопки, используйте этот атрибут вместо background, чтобы не нарушать стиль кнопок
• app:backgroundTintMode — Используется для определения режима, который будет применятся для изменения оттенка фона

• app:strokeColor — Цвет обводки кнопки
• app:strokeWidth — Ширина обводки кнопки

• app:cornerRadius — Используется для определения радиуса сглаживания углов кнопки

Компонент Chip позволяет отображать чипы в нашем layout. По сути, чип — это некоторый текст на закругленном фоне. Его цель заключается в отображении пользователю некой формы текстового набора, который может или не может быть выбран. Например, чипы могут использоваться для отображения списка выбираемых предложений для пользователя на основе текущего контекста в вашем приложении.

Мы можем добавить Chip в наш layout, используя, например, атрибут app:chipText , чтобы установить текст, который будет отображаться на чипе:

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

• app:checkable — Используется для объявления, может ли чип быть помечен как выбран/не выбран. Если отключено, выбор чипа ведет себя так же, как и с кнопкой
• app:chipIcon — Используется для отображения иконки в чипе

• app:closeIcon — Используется для отображения иконки удаления в чипе

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

То же самое применимо и если мы хотим слушать взаимодействия с иконкой удаления. Для этого мы можем использовать функцию setOnCloseIconClickListener для регистрации событий удаления:

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

Если мы хотим использовать ChipGroup, нам просто нужно обернуть наши ChipView в родительский компонент ChipGroup:

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

• app:chipSpacing — Добавляет расстояние как по горизонтали, так и по вертикали
• app:chipSpacingHorizontal — добавляет расстояние по горизонтали
• app:chipSpacingVertical — добавляет расстояние по вертикали

Мы также можем объявить наши дочерние Chip View отображаемыми на одной строке внутри контейнера ChipGroup, используя атрибут app:singleLine :

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

Material Card View

Вероятно, в наших приложениях мы уже использовали компонент CardView в какой-то момент. В библиотеке Support Library теперь есть компонент, называемый MaterialCardView , который предоставляет нам стилизованную под материальный дизайн реализацию из коробки.

CardView можно добавить к вашему layout вот так:

Вы можете дополнительно стилизовать CardView, используя два его атрибута:

• app:strokeColor — Цвет, который будет использоваться для обводки (должен быть установлен для отображения обводки)
• app:strokeWidth — Ширина обводки

Вместе с двумя этими атрибутами, вы также можете стилизовать CardView с использованием первоначально доступных атрибутов, таких как app:cardBackgroundColor и т. д.

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

Вы можете добавить BottomAppBar в свой layout-файл так:

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

Когда дело доходит до стилизации BottomAppBar, есть несколько атрибутов, которые вы можете использовать.

• app:fabAttached — указывает, был ли FAB прикреплен к BottomAppBar. Вы можете подключить FAB с помощью app:layout_anchor в компоненте FAB, который вы хотите подключить, используя идентификатор BottomAppBar. Если FAB прикреплен, он будет вставлен в BottomAppBar, в противном случае FAB останется выше BottomAppBar.

• app:fabAlignmentMode — Объявляет позицию FAB, который был прикреплен к BottomAppBar. Это может быть либо конец:

либо центр:

• app:fabCradleVerticalOffset — Объявляет вертикальное смещение, которое будет использоваться для прикрепленного FAB. По умолчанию это 0dp

Установка значения dp позволит FAB перемещаться вверх по вертикали:

• app:backgroundTint — Используется для изменения оттенка фона представления. Если вы хотите установить цвет фона в представлении, тогда вам нужно использовать атрибут android:background . Это обеспечит сохранение стабильности представления.

На мой взгляд, это изящные дополнения к библиотеке Support Library. Я с нетерпением жду возможности использовать компоненты в материальном стиле прямо из коробки и я также рад найти случай, где может использоваться BottomAppBar. Я уверен, что требуется некоторое время, чтобы версия Support Library стала стабильной. Как обычно, я хотел бы услышать ваши мысли или комментарии об этих новых компонентах!

Ждём ваши комментарии и вопросы, которые можно оставить тут или можете зайти к Варваре на день открытых дверей.

Источник