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