Android Studio: уроки на Kotlin. Создание вкладок с ViewPager2

Многие приложения в телефоне состоят из нескольких разделов, которые удобно перелистывать движением пальца. Мессенджеры, погодные виджеты, настройки — везде используются вкладки. Сегодня на занятии в Android Studio мы разберёмся, как сделать такое перелистывание с помощью связки ViewPager2 и TabLayout. Язык Kotlin позволит написать всё коротко и понятно, а сам урок построен так, чтобы даже новичок справился за полчаса.


Что такое ViewPager2 и зачем он нужен

ViewPager2 — это компонент, который показывает один экран и позволяет переключаться на соседний жестом влево или вправо. Он пришёл на смену старому ViewPager и стал удобнее: поддерживает вертикальную прокрутку, анимации и лучше работает с фрагментами. Вместе с TabLayout (полоска с названиями вкладок) получается классический интерфейс, знакомый каждому пользователю.


Подключаем библиотеки

Откройте build.gradle.kts уровня модуля и добавьте зависимость для ViewPager2. Сама библиотека входит в AndroidX и не требует дополнительных репозиториев.

dependencies {
    implementation("androidx.viewpager2:viewpager2:1.1.0")
}

TabLayout доступен в Material Components, который уже есть в проекте по умолчанию. После синхронизации Gradle можно приступать к разметке.


Готовим разметку экрана

Откройте activity_main.xml и разместите в нём два элемента: TabLayout сверху и ViewPager2 под ним, занимающий всё оставшееся место.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/tabLayout"
    app:layout_constraintBottom_toBottomOf="parent" />

Создаём фрагменты для вкладок

Каждая вкладка — это отдельный Fragment. Создайте два класса: FirstFragment и SecondFragment. Внутри каждого достаточно показать простой текст, чтобы было видно, что экраны разные.

class FirstFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_first, container, false)
    }
}

Для файла разметки fragment_first.xml используйте LinearLayout с TextView по центру. Аналогично сделайте SecondFragment.


Адаптер для ViewPager2

Адаптер связывает список фрагментов с ViewPager2. Он наследует FragmentStateAdapter и переопределяет два метода: количество элементов и создание фрагмента по позиции.

class TabsAdapter(fragmentActivity: FragmentActivity) :
    FragmentStateAdapter(fragmentActivity) {

    override fun getItemCount(): Int = 2

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> FirstFragment()
            1 -> SecondFragment()
            else -> FirstFragment()
        }
    }
}

Связываем TabLayout и ViewPager2

В MainActivity.kt в методе onCreate найдите оба элемента, присвойте ViewPager2 адаптер и подключите TabLayout через специальный медиатор. Он синхронизирует названия вкладок с фрагментами.

val tabLayout = findViewById<TabLayout>(R.id.tabLayout)
val viewPager = findViewById<ViewPager2>(R.id.viewPager)

viewPager.adapter = TabsAdapter(this)

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
    tab.text = when (position) {
        0 -> "Первая"
        1 -> "Вторая"
        else -> ""
    }
}.attach()

Запускаем и смотрим результат

Нажмите зелёный треугольник. На экране появятся две вкладки: «Первая» и «Вторая». Их можно переключать касанием по заголовкам или пролистыванием. Всё работает плавно, без дополнительного кода.


Несколько советов для начинающих

  • Не создавайте десятки фрагментов в адаптере. Если у вас больше трёх-четырёх вкладок, лучше подумать о динамическом списке.
  • Используйте ViewModel для данных. Фрагменты внутри ViewPager2 могут пересоздаваться, и данные должны храниться вне них.
  • Не забывайте про offscreen limit. По умолчанию ViewPager2 загружает одну соседнюю вкладку. Если вам нужно загрузить больше, установите viewPager.offscreenPageLimit = 2.

Чему мы научились

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

Добавлен: