View Pager (VP) and TabLayout #2

Для VP мы можем подключить Tabs, то есть такие вкладки-маячки, которые показывают сколько слайдов включает в себя VP и какой сейчас слайд активен. Существует несколько вариантов реализаций Tabs. Мы начнём со стандартных Tabs

Для этого нам нужно загрузить две иконки из стандартной библиотеки Android. Иконки будут в виде линий – одна оранжевая для активного Tab, а другая белая для неактивных Tabs

После этого мы в папке drawable создадим файл tabs.xml, который будет включать вот этот код

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/line_active"
        android:state_selected="true"/>
    <item android:drawable="@drawable/line"/>
</selector>

То есть в этом файле мы установили оранжевую линию для активной Tab, а белую для не активных.

Далее мы переходим в xml файл нашего Activity и под виджетом View Pager2 размещаем виджет TabLayout

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabSlider"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/slider"
    android:layout_marginTop="3dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:tabPaddingTop="15dp"
    app:tabPaddingBottom="8dp"
    app:tabMode="fixed"
    app:tabBackground="@drawable/tabs"
    android:background="@color/black"/>

После этого мы переходим в класс нашего Activity и создаём объект для наших Tabs

Давайте остановимся на трех атрибутах TabLayout

app:tabMode=”fixed” – устанавливает вкладки в фиксированном положении. Если бы у нас их было много, то тогда бы мы указали значение scrollable и вкладки можно было бы прокручивать
app:tabBackground=”@drawable/tabs” – устанавливает правило отображение иконок для вкладок
android:background=”@color/black” – задает фон для секции с вкладками

val tabLayoutMediator = binding?.tabSlider?.let {
    binding?.slider?.let { it1 ->
        TabLayoutMediator(it,
                it1,
            TabLayoutMediator.TabConfigurationStrategy { tab, position -> })
    }
}
tabLayoutMediator?.attach()

В созданный объект мы помещаем виджеты TabLayout и ViewPager2 из xml шаблона. Кроме того мы вызываем класс для связки ViewPager2 и TabLayout. Класс TabLayoutMediator принимает три параметра: ViewPager2, TabLayout и реализацию интерфейса TabConfigurationStrategy, которая с помощью метода onConfigureTab() получает отдельную вкладку в виде объекта Tab и номер страницы и позволяет настроить вид вкладки, например, установить заголовок и иконку вкладки.

После создания объекта TabLayoutMediator необходимо вызывать у него метод attach(). Этот метод позволяет выделить активную вкладку. Но под капотом происходит следующее он удаляет все вкладки и их состояние, а затем их пересоздаёт

Теперь наши вкладки начнут функционировать

Код из урока

tabs.xml – xml шаблон иконок для Tabs

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/line_active"
        android:state_selected="true"/>
    <item android:drawable="@drawable/line"/>
</selector>

activity_main.xml – xml шаблон нашего Activity

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        tools:context=".MainActivity">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/slider"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_margin="10dp"
            tools:ignore="MissingConstraints" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabSlider"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/slider"
            android:layout_marginTop="3dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:tabPaddingTop="15dp"
            app:tabPaddingBottom="8dp"
            app:tabMode="fixed"
            app:tabBackground="@drawable/tabs"
            android:background="@color/black"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

MainActivity.kt – класс нашего Activity

class MainActivity : AppCompatActivity() {

    var binding: ActivityMainBinding? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)


        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding?.slider?.adapter = SliderAdapter(this)

        val tabLayoutMediator = binding?.tabSlider?.let {
            binding?.slider?.let { it1 ->
                TabLayoutMediator(it,
                        it1,
                    TabLayoutMediator.TabConfigurationStrategy { tab, position -> })
            }
        }
        tabLayoutMediator?.attach()
        

    }
}