Мой предыдущий пост в блоге посвящен настройке проекта Android с помощью Jetpack Compose и отображению текста. Этот пост посвящен отображению значков для строки действий твита.

Но сначала быстрый обход. Контент твита находится между строкой информации о пользователе и строкой действия. Это содержимое заключено в элемент Text вместе с примененным элементом TextStyle. Поскольку этот компонуемый элемент не содержится в Row, к нему также необходимо применить заполнение напрямую.

Далее нужно отобразить содержимое в предварительном просмотре, чтобы убедиться, что оно выглядит правильно. Это упрощается за счет объединения составных элементов UserInfoRow и TweetContent в другой составной функции. Строка действия также будет добавлена ​​к этой новой составной функции.

Обновление функции @Preview отображает текущее представление на панели предварительного просмотра в Android Studio.

Показать строку действия

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

  • Комментарий
  • Ретвитнуть
  • Нравится
  • доля

Каждое из этих действий отображает изображение и реагирует на события щелчка. Действия «Ретвитнуть» и «Нравится» также имеют выбранное состояние для изменения их внешнего вида.

Каждое действие требует отдельной функции создания. Другая функция объединяет все эти действия в ряд. Чтобы что-то отображалось в предварительном просмотре, Button используется в качестве заполнителя для каждого действия.

Добавление ActionRow в TweetView отображает кнопки действий в предварительном просмотре.

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

Я нашел подходящие иконки для комментариев, ретвитов и акций. Я использую mode comment для действия комментирования, loop для действия ретвита и share для действия общего доступа. Я также установил белый цвет для этих векторных ресурсов. Белые активы легче подкрасить в нужный цвет.

Удивительно, но я не смог найти значок сердца, чтобы использовать подобное действие. Быстрый поиск на StackOverflow выдал эту страницу. В первом ответе есть векторный путь, который идеально подходит для моего варианта использования (спасибо, Уддхав Гаутам!). Моя единственная модификация устанавливает fillColor в белый цвет.

Функции действий должны загружать и отображать эти векторные активы. Каждая функция может загрузить свой значок с помощью функции vectorResource(). Компоненты Button можно удалить, так как они больше не нужны.

Когда изображения загружены, элементам действия нужно место для рисования их значка. В настоящее время нет такого составного элемента, как ImageButton, но значки можно рисовать вручную. Существует функция DrawVector(), которая обрабатывает векторные активы, но ее нужно во что-то вовлечь. Существует компонуемый объект под названием Container, который подходит для этого варианта использования.

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

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

Подкрасьте значки

Эти значки работают, но их трудно, если вообще возможно, увидеть на светлом фоне. Атрибут tintColor функции DrawVector обеспечивает простой способ указать цвет значка.

Разместите элементы строки действий

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

Row нужны два атрибута, чтобы добавить место. Во-первых, ему нужен модификатор LayoutWidth.Fill, чтобы занять всю ширину представления. Это приводит к вопросу. В строке действия уже есть модификатор LayoutPadding, так как же добавить еще один?

Решение можно найти, заглянув в файл Modifier.kt. В комментарии вверху файла есть строчка:

* Modifier elements may be combined using `+` Order is significant; modifier elements to the left
* are applied before modifier elements to the right.

Несколько модификаторов можно комбинировать с помощью оператора +. Добавление модификатора LayoutWidth.Fill заставляет строку занимать всю ширину.

Как только строка имеет соответствующий размер, предоставление параметра Arrangement сообщает строке, как расположить дочерние элементы. Значение по умолчанию — Arrangement.Begin, которое помещает все элементы в начало строки без заполнения. Другими параметрами, которые не добавляют отступы, являются Arrangement.Center и Arrangement.End.

Центральное расположение

Завершить аранжировку

Есть еще три варианта размещения, обеспечивающие интервалы между элементами: SpaceEvenly, SpaceBetween и SpaceAround.

Комментарии к коду в Flex.kt описывают, что делает каждый из них.

SpaceEvenly Расположение

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

Пространство между расположением

Разместите дочерние элементы так, чтобы они были равномерно распределены по главной оси, без свободного пространства перед первым дочерним элементом или после последнего дочернего элемента.

SpaceAround Расположение

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

Я предпочитаю версию SpaceAround. Строка выглядит лучше с пробелом перед значком комментария и после значка общего доступа, но не с полным объемом пространства, которое использует SpaceEvenly.

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