Android bottomsheetdialogfragment vs bottomsheetdialog

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

BottomSheet нижнее всплывающее окно

Что касается предыдущих заметок, у меня есть общее представление о CoordinatorLayout и AppbarLayout, особенно о панели инструментов и элементах управления, размещенных в AppbarLayout, и я сделаю несколько персонализированных интерфейсов.

Но этого недостаточно. Теперь давайте вернемся к поведению и посмотрим, какое поведение на уровне системы оставил нам Google.

BottomSheetBehavior

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

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

Привязать BottomSheetBehavior к всплывающему макету в файле макета

Есть два ключевых атрибута:

Свойство peekHeight устанавливает высоту bottomSheet при его сложении. Если оно равно 0, это означает, что оно полностью сложено (скрыто). Если оно не равно 0, макет будет отображаться на определенной высоте в нижней части экрана.

Это предложение является ядром, связать его поведение.

Посмотрите на реальный share_layout, извлекаемый , который на самом деле является простым GridLayout.

Тогда посмотрите, как реализовать это в коде.

Давайте посмотрим на визуализации:

Появляется вид снизу, и он выглядит довольно хорошо. Но есть несколько особенностей, на которые следует обратить внимание:

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

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

Добавлено: 5 состояний BottomSheetBehavior:

• STATE_EXPANDED расширенное состояние, показывающее полный макет
• STATE_COLLAPSED свернутое состояние, свернутое до высоты, указанной в peekHeight
• Состояние STATE_DRAGGING при перетаскивании
• STATE_HIDDEN скрытое состояние
• Состояние выпуска STATE_SETTLING

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

BottomSheetDialog

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

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

Эффект: Как вы можете видеть, когда диалоговое окно всплывает, основной интерфейс тускнеет, щелкните за пределами диалогового окна, и диалоговое окно исчезнет.

BottomSheetDialogFragment

У Google есть слабое место для Fragment. Во всплывающем окне внизу не забываем добавить функцию Fragment Dialog.

Использование BottomSheetDialogFragment также относительно просто, но связать фрагмент немного сложнее.

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

Звоните туда, где вам это нужно.

Эффект похож на BottomSheetDialog.

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

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

1. Поскольку вы используете RecyclerView, вы должны подготовить макет строки для него

В результате получается примерно следующее:

1. Создайте новый класс сущности ShareBean.java

Ну, основные приготовления сделаны,

1. Или создайте новый класс, унаследуйте BottomSheetDialogFragment и реализуйте следующие методы.

Учитывая пространство, мы помещаем данные инициализации в этот класс и делаем внутренние вызовы.

Точно так же мы помещаем соответствующий адаптер RecyclerView в класс, чтобы сформировать внутренний класс.

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

Видно, что эффект BottomSheetDialogFragment аналогичен эффекту BottomSheetDialog, поэтому в случае простых логических требований попробуйте использовать BottomSheetDialog.

BottomSheetDialog и BottomSheetDialogFragment также немного сложны. Оба всплывают, что означает, что они все всплывают. В отличие от примера BottomSheetBehavior, peekHeight может быть установлен.

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

BottomSheetDialogFragment — это даже больше ямы, высота также установлена ​​белой или все всплывающие.

SwipeDismissBehavior

Возможность такого поведения относительно мала, давайте кратко расскажем о ней.

Как следует из названия, SwipeDismissBehavior используется для достижения скользящего удаления. FloatingActionButton поставляется с этой функцией, но он очень жесткий и не похож на следование пальцам. Давайте посмотрим.

Давайте сделаем пример, чтобы испытать это сами:

Создайте макет и поместите TextView в CoordinatorLayout.

Эффект, видно, что он все еще очень резкий, не следуйте за ним. Посмотрите, будет ли Google обновлять этот эффект в будущем.

Установите направление скольжения «ЛЮБОЙ» здесь, на самом деле найдено

• Проведите пальцем слева направо, текст проведен вправо,
• Проведите пальцем справа налево, и текст также проведен вправо

Объясните, что SwipeDirection относится к направлению движения пальца, а не к направлению скольжения вида.

В общем, SwipeDismissBehavior в настоящее время не практичен.

подводить итоги:

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

Источник

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

Использование BottomsheetDialogFragment в разработке Android

Использование BottomsheetDialogFragment для разработки под Android

BottomSheetDialogFragment наследует от AppCompatDialogFragment, официальная интерпретация — модальная нижняя таблица, является версией DialogFragment, она использует BottomSheetDialog вместо плавающего диалога. BottomSheetDialogFragment имеет следующие преимущества перед другими диалоговыми окнами:

1. иметь свой жизненный цикл;
2. Всю страницу можно сложить, развернуть и уничтожить;
3. Настраиваемые стили можно использовать гибко.

Наследование классов

Анализ исходного кода

Родительским классом BottomSheetDialogFragment является AppCompatDialogFragment, который переопределяет метод onCreateDialog () и возвращает экземпляр BottomSheetDialog. Форма темы диалога происходит из метода getTheme (), а getTheme () является открытым методом DialogFragment.
Введите исходный код BottomSheetDialog, загрузка диалога происходит в setContentView ():


и в методе onStart:

Следовательно, переопределение этого метода может определить начальное состояние BottomSheetDialog.

Макет, стиль

Под пакетом дизайна мы находим design_bottom_sheet_dialog.xml следующим образом:

Как видно из вышесказанного, контейнер для загрузки диалогового окна — это «design_bottom_sheet», который определяет стиль.

Мы можем настроить стиль BottomSheetDialog, настроив следующую тему: bottomSheetStyle, Ctrl + щелчок, чтобы ввести стиль, а затем выполнить поиск «bottomSheetStyle» в открытом файле. Отображение выглядит следующим образом:

Как видно из рисунка, он указан в «@ style / Widget.Design.BottomSheet.Modal», продолжайте ввод и обнаружите, что он содержит следующие атрибуты:

Очевидно, что атрибут background определяет цвет фона диалогового окна, поэтому мы можем переопределить эти атрибуты следующим образом (note parent = ”android: Widget”):

Инкапсуляция базового класса

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

При его использовании просто переписайте метод onViewCreated (представление @NonNull, @Nullable Bundle saveInstanceState) и введите свой собственный диалоговый интерфейс:

Это может быть закрыто Поведением:

Установите смещение сверху, когда оно полностью развернуто:

Эффект предварительного просмотра

Полностью расширен без верхнего смещения:

Полностью расширен с верхним смещением 200:

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

Источник

BottomSheetDialogFragment с анимацией при смене состояния и sticky button

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

На данной гифке показано, что мы увидим в конце туториала:

Что нужно знать:

Как создать проект и запустить его

Поверхностное понимание что такое BottomSheetDialogFragment и BottomSheetBehavior

Поверхностное понимание что такое LayoutParams

ViewBinding(можно обойтись без него и использовать обычные findViewById)

Первый этап

На первом этапе мы сделаем смену контента в BottomSheetDialogFragment, визуализировав это fading эффектом.

Создадим в папке drawable файл под именем bottom_sheet_background.xml, в котором опишем background для нашего фрагмента, выставив цвет фона и закруглённые углы

Далее опишем стиль для нашего фрагмента в файле styles.xml в папке values

Создадим файл bottom_sheet_layout.xml с разметкой для нашего фрагмента, в комментариях в xml расписано назначение каждого элемента.

В разметке мы имеем одну ViewGroup, которая будет в обоих стейтах и не будет изменяться, и две отдельных ViewGroup для состояний collapsed и expanded.

При вытягивании фрагмента первая будет исчезать и в определённый момент будет заменена второй.

Мы можем перейти к созданию самого фрагмента.

Создадим класс BottomFragment, унаследовав его от BottomSheetDialogFragment

Полный код BottomFragment

Обратим внимание на ключевые моменты

Мы получаем BottomSheetBehavior, выставляем ему peekHeight и вешаем на него слушателя

В методе onSlide() в зависимости от оффсета мы меняем прозрачность наших двух layout и в определённый момент меняем их видимость

Коэффициент 0.5 можно заменить на какой-либо другой и тогда исчезание и появление будет происходить раньше или позже

Вызовем наш фрагмент. Чтобы сделать это быстрее и не добавлять новые кнопки и слушатели, сделаем это прямо из метода onCreate() в MainActivity

Можем запускать наш проект. Мы увидим вот такое поведение:

Второй этап

На данном этапе мы добавим sticky кнопку внизу нашего фрагмента. Для этого мы программно добавим view к нашему экрану.

Сперва создадим layout файл button.xml с кнопкой

Далее программно добавим кнопку к нашему фрагменту, вставив этот код между установкой behavior.state и добавлением коллбека behavior.addBottomSheetCallback

Мы программно надуваем и добавляем наш layout с кнопкой к родительскому layout

Вместо кнопки мы можем начинить наш layout любыми другими view

Запустив проект мы увидим следующее:

Полный финальный код

Заключение

Данное решение не претендует на истинно верное.

Вероятно, есть более красивые способы сделать это, я буду рад узнать о таких!

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

Спасибо за внимание! Буду рад замечаниям и предложениями.

Источник