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

Что такое нижний лист?

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

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

Зачем нам нужны нижние листы?

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

Какие типы нижних листов доступны?

В зависимости от требований доступны три различных типа нижних листов. Это:

Стандартные нижние листы

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

Модальные нижние листы

BottomSheetDialogFragment - это тонкий слой поверх стандартной библиотеки поддержки Fragment, который отображает ваш фрагмент как модальный нижний лист, по сути действуя как диалог. Это была лучшая альтернатива текущим встроенным меню или простым диалогам. Эти диалоговые окна нижнего листа накладываются на основное содержимое, и их необходимо закрыть для взаимодействия с основным содержимым. Наложение размытия будет отображаться над нижним листом и основным содержимым. Если коснуться содержимого вне диалогового окна, то нижний лист закрывается. Модальные нижние листы можно перетаскивать вертикально и отклонять, полностью сдвигая их вниз.

Расширение нижних листов

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

Реализация

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

Шаг 1

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

Шаг 2

Создайте файл макета, который должен был отображаться как нижний лист.

Вы можете добавить стиль элемента в styles.xml

На этом мы закончили оформление нижнего листа.

Шаг 3

Теперь расширите класс с помощью BottomSheetDialogFragment и переопределите метод onCreateView, чтобы предоставить макет.

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

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

Шаг 4

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

Шаг 5

Последний шаг - показать диалог в действии.

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

Бонус

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

Резюме

Вот и все, мы закончили. Это была реализация BottomSheetDialog.

использованная литература

Документы по дизайну материалов на нижних листах

Если интересно, ознакомьтесь с моими постами о серии Kotlin.

Вы можете найти меня в Medium и LinkedIn…

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