Как использовать нижние листы с библиотекой поддержки дизайна

Одно из самых значительных изменений в дизайне Android было представлено во время конференции Google I / O 2014 года — дизайн материалов . Несмотря на то, что Google представила набор рекомендаций для своей новой философии дизайна, разработчики отвечали за внедрение новых шаблонов с нуля.

Это привело ко многим сторонним библиотекам, которые достигли целей дизайна материалов с похожими, но разными реализациями. Чтобы облегчить некоторые трудности разработки материалов, Google представил библиотеку поддержки проектирования во время основного выступления на конференции Google I / O 2015 года .

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

1. Настройка нижнего листа

Для реализации нижнего листа у вас есть два варианта: представление контейнера с BottomSheetBehavior в файле макета или BottomSheetDialogFragment . Чтобы использовать любой из них, вам необходимо импортировать в ваш проект библиотеку поддержки проектирования с минимальной версией 23.2 . Вы можете сделать это в build.gradle , включив следующую строку в dependencies :

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

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

В файле макета есть несколько ключевых моментов, о которых вам нужно знать. Чтобы использовать виджет нижних листов, вы должны использовать контейнер CoordinatorLayout для представлений. Внизу файла вы заметили, что есть NestedScrollView содержащий TextView . Хотя любое представление контейнера можно использовать на нижнем листе, прокрутка может происходить надлежащим образом, только если вы используете контейнер, поддерживающий вложенную прокрутку, например NestedScrollView или RecyclerView .

Чтобы контейнер распознавался библиотекой поддержки проектирования как контейнер нижнего листа, необходимо включить атрибут layout_behavior и присвоить ему значение android.support.design.widget.BottomSheetBehavior . Вы можете видеть это, использованное выше в NestedScrollView .

Другим ключевым атрибутом, который следует отметить для контейнера нижнего листа, является layout_height . Какими бы ни были размеры вашего элемента контейнера, он контролирует отображение нижнего листа. Есть одна оговорка, о которой следует помнить с высотой нижнего листа. Если вы используете CoordinatorLayout для перемещения других объектов View , например, с помощью CollapsingToolbarLayout , то высота вашего нижнего листа изменится. Это может вызвать нежелательный эффект прыжка.

2. Отображение макета на основе нижнего листа

После того, как вы добавили контейнер вида и правильно настроили его в файле макета, вы можете открыть действие или Fragment который использует нижний лист. В примере проекта это MainActivity.java .

Чтобы ваш нижний лист отображался, вам нужно создать BottomSheetBehavior . Это создается путем получения ссылки на представление контейнера и вызова BottomSheetBehavior.from() для этого контейнера. В этом примере вы также ссылаетесь на три кнопки из макета и вызываете на них setOnClickListener() .

Теперь, когда вы создали BottomSheetBehavior , последнее, что вам нужно сделать, это показать свой нижний лист View . Вы можете сделать это, установив состояние вашего BottomSheetBehavior в STATE_EXPANDED , что мы делаем в примере приложения при нажатии верхней Button .

Когда это будет сделано, ваше приложение должно выглядеть так:

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

3. Подглядывать нижний лист

Возможно, вы заметили, что в различных приложениях и виджетах для Android от Google, таких как Place Picker из Places API , шаблон нижнего листа используется для отображения предварительного просмотра нижнего листа, который можно развернуть для получения дополнительной информации. Этого можно достичь с помощью нижнего листа библиотеки поддержки проектирования, установив свернутый размер представления с помощью setPeekHeight() . Если вы хотите показать более короткую версию нижнего листа, вы можете установить для BottomSheetBehavior значение STATE_COLLAPSED .

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

Вы можете заметить, что, когда вы пытаетесь перетащить нижний лист вниз, он сворачивается только до размера, который вы видите. Вы можете решить эту проблему, добавив BottomSheetCallback к BottomSheetBehavior , установив размер просмотра равным нулю, когда пользователь сворачивает лист. В примере приложения это добавляется в конце onCreate() .

4. Использование фрагмента нижнего листа

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

В setupDialog() вы можете накачать новый файл макета и получить BottomSheetBehavior представления контейнера в вашем Activity . Если у вас есть такое поведение, вы можете создать и связать с ним BottomSheetCallback чтобы отклонить Fragment когда лист скрыт.

Наконец, вы можете вызвать show() для экземпляра вашего Fragment чтобы отобразить его на нижнем листе.

Вывод

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