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

Последнее обновление: 17.10.2021

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

Для добавления заголовков мы можем использовать встроенный виджет 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(). Все остальное остается без изменений. Запустим проект на выполнение и увидим интерактивные вкладки-заголовки поверх страниц.

Вид приложения при трех вкладках:

Вкладки в Android и TabLayoutMediator и TabLayout
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850