Новый способ отображения плавающих сообщений в Android

Введение и интеграция

Пришло время попрощаться со старыми-добрыми тост-сообщениями в Android и поприветствовать тосты нового поколения под названием Snackbars.

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

Snackbar был представлен в Material Design. Он доступен через библиотеку поддержки дизайна. Но по мере того, как разработка Android переходит от библиотек поддержки к AndroidX, Snackbar будет доступен нам через библиотеки дизайна материалов.

У нас может быть Snackbar в наших проектах AndroidX, интегрировав библиотеку материального дизайна, добавив следующую строку в build.gradle файл.

implementation 'com.google.android.material:material:1.0.0'

Сила закусок

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

Незначительные неудачи

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

Вместе с тем, Snackbar будет отображаться только тогда, когда связанный вид отображается на экране. Позвольте мне объяснить это ясно: если вы показываете Snackbar с представлением, связанным на экране с именем Activity1, то, если вы убиваете Activity1, Snackbar также скрывается, даже если время еще не закончилось. Считаю такой подход разумным в большинстве случаев.

Простая закусочная с некоторыми приемами

Отображение Snackbar так же просто, как отображение тоста. Посмотри:

В отличие от представления тостов, мы также можем настроить цвета панели закусок по умолчанию, как показано ниже:

Пришло время добавить простую кнопку действия на Snackbar. Посмотри:

Пользовательская панель закусок для сообщений об ошибках и успехах

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

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

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

Теперь увеличьте размер настраиваемого вида. Я считаю, что лучше раздуть настраиваемое представление через XML, чтобы я мог легко настроить его атрибуты или даже создать стиль.

Следующим шагом является создание класса, который расширяет BaseTransientBottomBar для создания равного поведения Snackbar. Если вы видите, что класс Snackbar по умолчанию также расширен на BaseTransientBottomBa.

public final class Snackbar extends BaseTransientBottomBar<Snackbar> {

Теперь мы создаем функцию в сопутствующем объекте и передаем поля, необходимые для отображения SimpleCustomSnackbar.

Параметры:

  1. вид: вид в текущем макете компонента для связи с панелью закусок.
  2. message: Сообщение для отображения в Snackbar
  3. duration: Snackbar имеет три продолжительности по умолчанию, которые мы можем использовать здесь.
  4. click-listener: этот параметр может иметь значение NULL, потому что мы создаем прослушиватель и отправляем функцию только тогда, когда нам нужно реализовать настраиваемую функциональность.
  5. i con: независимо от того, какой значок вы хотите показать слева от сообщения, и если его ноль, значок не будет отображаться
  6. a ction label: ярлык, который будет отображаться в правой части сообщения для просмотра действия.
  7. background-color: цвет фона для всей Snackbar.

А теперь взгляните на SimpleCustomSnackbar.

Здесь мы использовали функцию расширения kotlin findSuitableParent, чтобы найти лучший вид для связи с Snackbar, и он выглядит следующим образом:

Посмотрим, как это работает.

Чтобы отобразить сообщение об ошибке с SimpleCustomSnackbar, код будет следующим:

Теперь посмотрим, насколько успешной будет Snackbar.

Заключение

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

Ваше здоровье!

Спасибо за чтение.