• 0
  • Contact Me: alexbashy9001@gmail.com

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()


}
}

Leave a Reply

Your email address will not be published. Required fields are marked *