Android Studio: Kotlin — урок про экран BottomSheet

Когда нужно показать пользователю дополнительные опции, не уводя его на отдельный экран, на помощь приходит BottomSheet. Это панель, которая выезжает снизу и органично вписывается в интерфейс, как, например, выбор способа оплаты в приложении доставки. Сегодня на занятии в Android Studio мы научимся создавать такую панель на языке Kotlin. Этот урок для начинающих покажет, как добавить BottomSheet в проект буквально в несколько шагов.


Что такое BottomSheet и каким он бывает

BottomSheet — это компонент из библиотеки Material Design, который представляет собой плавающий лист, закреплённый за нижним краем экрана. Он не перекрывает полностью основной контент, оставляя верхнюю часть видимой. Существует два основных типа: persistent (постоянный) — всегда виден снизу, и modal (модальный) — появляется поверх интерфейса и требует от пользователя действия, как диалог. Модальный вариант мы сегодня и рассмотрим, он проще в реализации и чаще встречается в приложениях.


Добавление библиотеки Material Components

BottomSheet входит в библиотеку Material Components. Обычно она уже подключена в современных проектах, но если нет, откройте build.gradle.kts уровня модуля app и добавьте строку:

dependencies {
    implementation("com.google.android.material:material:1.12.0")
}

После синхронизации Gradle можно сразу приступать к разметке.


Создание разметки для содержимого BottomSheet

Модальный BottomSheet обычно наследуется от BottomSheetDialogFragment и использует свой XML-файл для содержимого. Создайте файл res/layout/sheet_layout.xml и опишите в нём несколько кнопок или любой другой контент, который должен отображаться на панели.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="24dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Выберите действие"
        android:textSize="18sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btnShare"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Поделиться" />

    <Button
        android:id="@+id/btnCopy"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Копировать ссылку" />

    <Button
        android:id="@+id/btnReport"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Пожаловаться" />
</LinearLayout>

Создание класса BottomSheet

Создайте новый Kotlin-класс, унаследованный от BottomSheetDialogFragment. В методе onCreateView подключите разметку и настройте обработку нажатий на кнопки. Для передачи данных наружу удобно использовать колбэк.

class MyBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.sheet_layout, container, false)

        view.findViewById<Button>(R.id.btnShare).setOnClickListener {
            Toast.makeText(requireContext(), "Поделиться", Toast.LENGTH_SHORT).show()
            dismiss()
        }

        view.findViewById<Button>(R.id.btnCopy).setOnClickListener {
            Toast.makeText(requireContext(), "Ссылка скопирована", Toast.LENGTH_SHORT).show()
            dismiss()
        }

        view.findViewById<Button>(R.id.btnReport).setOnClickListener {
            Toast.makeText(requireContext(), "Жалоба отправлена", Toast.LENGTH_SHORT).show()
            dismiss()
        }

        return view
    }
}

Показываем BottomSheet из Activity

Чтобы открыть BottomSheet, достаточно создать экземпляр класса и вызвать метод show(). Это можно сделать по нажатию кнопки в основном интерфейсе.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btnShowSheet = findViewById<Button>(R.id.btnShowSheet)
        btnShowSheet.setOnClickListener {
            MyBottomSheet().show(supportFragmentManager, "my_bottom_sheet")
        }
    }
}

Тег "my_bottom_sheet" используется для идентификации фрагмента и может пригодиться, если нужно найти его позже.


Настройка поведения и стиля

Поведением BottomSheet управляют через метод setStyle и параметры темы. По умолчанию панель можно смахнуть вниз или закрыть касанием вне неё. Если нужно запретить закрытие, переопределите onCreateDialog и установите флаг setCancelable(false).

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val dialog = super.onCreateDialog(savedInstanceState)
    dialog.setCancelable(false)
    return dialog
}

Полезные советы

  • Не перегружайте панель. BottomSheet лучше всего подходит для 3–5 коротких действий. Длинные списки или сложные формы делают его неудобным.
  • Используйте peekHeight. Если нужен постоянный BottomSheet, а не модальный, рассмотрите BottomSheetBehavior с параметром peekHeight — он управляет высотой видимой части.
  • Проверяйте на разных устройствах. На планшетах BottomSheet может выглядеть иначе, чем на телефонах. Тестируйте вкладку на разных экранах.

Коротко о главном

Сегодняшний урок в Android Studio на Kotlin показал, как создать удобную нижнюю панель с помощью BottomSheet. Вы научились делать модальное окно, обрабатывать выбор пользователя и управлять закрытием. Теперь в вашем распоряжении есть стильный компонент Material Design, который подходит для дополнительных действий и не уводит пользователя от основного экрана. Попробуйте добавить в BottomSheet иконки или заменить кнопки на список — это придаст интерфейсу ещё больше законченности.

Добавлен:
Яндекс.Метрика