1) Создание проекта
2) Создание BottomSheet
3) Обработка нажатий
4) Магия дизайна
5) Шрифты
В данной статье поговорим о создании нижней панели (BottomSheet) на платформе Android.
BottomSheet, позволяет отображать дополнительный контент выдвигая снизу панель.
Создание проекта
1. Создадим пустой проект и назовем его например HelloBottom.
2. В папке с макетами есть страница, activity_main (res/layout). В нем мы должны поменяем главный layout ConstraintLayout, на CoordinatorLayout.
3. Теперь добавим в наш CoordinatorLayout, новый ConstraintLayout. Он будет содержать в себе основные элементы не относящиеся к нижней панели. Так же укажем высоту и длину, как match_parent.
4. Создадим необходимый дизайн-компонент, для нашей нижней панели. В папке со стилями (res/drawable) создадим файл, и назовем его style_auth_sheet.
5. Пропишем для в файле стиль.
Создание BottomSheet
1. Возвращаемся к файлу с макетом (activity_main), и добавим ниже компонент LinearLayout, который и будет нашим BottonSheet (нижней панелью). ! Для большего удобства, можно указать главному компоненту background черного цвета, чтобы была видена нижняя панель.
2. Теперь как мы видим на скриншоте выше, у нас создался компонент LinearLayout. Но он странно выглядит и не находится внизу. Чтобы превратить LinearLayout в тот самый BottonSheet (нижнюю панель), необходимо прописать:
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:behavior_peekHeight="40dp"
layout_behavior - в него мы указываем что нам необходимо наследовать класс того самого BottomSheet, для превращения этого компонента в нижнюю панель.
behavior_peekHeight - параметр, который указывает на сколько нижняя панель должна выглядывать снизу.
3. Добавим кнопку в нашу нижнюю панель, а так же добавим параметр android:gravity = "center" в LinearLayout, для размещения наших элементов внутри нижней панели по центру.
4. Компилируем проект и запускаем его. Как видно на видео, мы можем свайпами вверх или вниз, выдвигать нашу нижнюю панель и скрыть ее.
Обработка нажатий
Теперь поработаем с обработкой состояний.
1. В макете activity_main, создадим кнопку в ConstraintLayout, для открытия нижней панели.
2. В java файле прикрепленный к данному макету (MainActivity), создадим глобальные переменные и сделаем обработку для нажатия.
Кнопка openButton - позволяет при нажатии открывать нижнюю панель.
Кнопка closeButton - позволяет при нажатии скрывать нижнюю панель.
bottomSheet - позволяет проинициализировать нашу нижнюю панель для написания java скрипта к ней.
В нашем случае функция setState - помогает поменять состояние нижней панели.
Состояния:
STATE_COLLAPSED - Нижний лист скрывается вниз. Если указан параметр behavior_peekHeight, то панель выглядывает снизу.
STATE_EXPANDED - Нижний лист виден на максимальной высоте.
STATE_HIDDEN - Нижний лист больше не виден и может быть повторно показан только программно.
STATE_HALF_EXPANDED - Нижний лист разворачивается наполовину, и он может перетаскиваться пользователем.
Параметры для обработки действий пользователя:
STATE_DRAGGING - Пользователь активно перетаскивает нижний лист вверх или вниз.
STATE_SETTLING - Нижний лист устанавливается на определенную высоту после жеста перетаскивания/смахивания. Это будет высота просмотра, расширенная высота или 0, если действие пользователя вызвало скрытие нижнего листа.
3. Компилируем и запускаем. Как видим, при нажатии на кнопки, наша нижняя панель может открываться и скрываться.
4. Так же BottomSheet, поддерживает обработку действий при их совершении.
5. Добавим ниже код который сможет обрабатываться при совершении какого либо действия.
Как видно, если указать case и какое ни будь состояние, то при его совершении будет выполняться прописанный вами код.
Магия дизайна
1. В папке drawable (res/drawable), создадим файл style_btn, и пропишем там дизайн для кнопки.
2. Все кнопки которые мы создавали, поменять их на androidx.appcompat.widget.AppCompatButton (Иначе стиль может не примениться).
3. Назначим у всех кнопок параметр android:background="@drawable/style_btn".
4. Меняем LinearLayout для нижней панели на androidx.constraintlayout.widget.ConstraintLayout. У кнопки, находящейся в нижней панели, меняем положение.
5. Добавляем TextView(заголовок) и TextView(текст) и пропишем им стиль.
Шрифты
У вас может возникнуть ошибка с параметром fontFamily, так как вам необходимо добавить их непосредственно в проект. Для этого:
1. Сменить режим на Design (Есть кнопка в правом верхнем углу).
2. Нажать на TextView(Заголовок).
3. В поиске атрибутов ввести "font", найти параметр fontFamily, и в выпадающем списке нажать на More Fonts...
4. В появившемся окошке ввести "inter", указать стиль шрифта "SemiBold" и обязательно установить галочку на параметр "Add font to project" (Благодаря ней стиль шрифта добавиться в папку с проектом, и не будет ошибок при переносе проекта на другой компьютер).
5. Компилируем и запускаем. Теперь нижняя панель стала немного красивее.
