Заголовки сторінок і TabLayout

У минулій темі ми розглянули, як створити функціональність перегортання сторінок. Тепер підемо далі і додамо до сторінок заголовки, за допомогою яких ми можемо додатково переміщатися по сторінках.

Для додавання заголовків ми можемо використовувати вбудований віджет TabLayout, який створює деяку подобу вкладки над сторінкою.

Використовуємо TabLayout. Для цього візьмемо проект із минулої теми. І насамперед нам треба додати в проєкт підтримку для цього віджета. Для цього у файлі build.gradle додамо залежність:

implementation "com.google.android.material:material:1.4.0"

Далі змінимо файл activity_main.xml:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/pager"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
         
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tab_layout"/>
         
</androidx.constraintlayout.widget.ConstraintLayout>

У цьому випадку над елементом ViewPager2 розташовується елемент TabLayout, який визначає заголовок для певної сторінки у ViewPager2.

Потім необхідно зв'язати ViewPager2 і TabLayout. Для цього застосовується клас TabLayoutMediator. Отже, змінимо код MainActivity, щоб зв'язати ViewPager2 і TabLayout:

package com.example.viewpagerapp;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;
 
import android.os.Bundle;
 
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager2 pager = findViewById(R.id.pager);
        FragmentStateAdapter pageAdapter = new MyAdapter(this);
        pager.setAdapter(pageAdapter);
 
        TabLayout tabLayout = findViewById(R.id.tab_layout);
        TabLayoutMediator tabLayoutMediator= new TabLayoutMediator(tabLayout, pager, new TabLayoutMediator.TabConfigurationStrategy(){
 
            @Override
            public void onConfigureTab(TabLayout.Tab tab, int position) {
                tab.setText("Страница " + (position + 1));
            }
        });
        tabLayoutMediator.attach();
    }
}

Конструктор TabLayoutMediator приймає три параметри: об'єкти ViewPager2 і TabLayout та реалізацію інтерфейсу TabConfigurationStrategy, яка за допомогою методу onConfigureTab() отримує окрему вкладку у вигляді об'єкта Tab та номер сторінки і дає змогу налаштувати вигляд вкладки, наприклад, встановити заголовок вкладки.

Після створення об'єкта TabLayoutMediator необхідно викликати в нього метод attach(). Все інше залишається без змін. Запустимо проєкт на виконання і побачимо інтерактивні вкладки-заголовки поверх сторінок.

Вигляд програми за трьох вкладок: