• 0
  • Contact Me: alexbashy9001@gmail.com

View Pager (VP) and TabLayout Upgrade #3

Иногда очень важно бывает настроить для каждой из Tabs разные иконки и добавить заголовок

Для начала нам нужно в TabLayout в xml шаблоне добавить эти атрибуты

app:tabIndicatorHeight="3dp" - устанавливаем толщину линии подчеркивания заголовка активной вкладки
app:tabIndicatorColor="@android:color/holo_orange_dark" - устанавливаем цвет линии подчеркивания заголовка активной вкладки
app:tabTextColor="@android:color/white" - устанавливаем цвет заголовка не активных вкладок
app:tabSelectedTextColor="@android:color/holo_orange_dark" - устанавливаем цвет заголовка активной вкладки
app:tabIconTint="@color/white" - устанавливаем цвет иконок для вкладок
app:tabRippleColor="@android:color/holo_orange_dark" - устанавливаем цвет эффекта при тапе по вкладкам

Кроме того нам нужно удалить атрибут, который устанавливал активные и неактивные иконки для вкладок из предыдущего примера:

app:tabBackground="@drawable/tabs"

Также нам нужно поменять значение в атрибуте tabMode на scrollable. Это нужно для того что бы заголовок вкладок отображался полностью, а в случае большого количества вкладок мы могли из прокручивать

app:tabMode="scrollable"

После этого мы переходим в класс нашего Activity и вставляем в … TabLayoutMediator.TabConfigurationStrategy { tab, position ->… условие по установке иконки и заголовка для каждой вкладки. Опять же нумерация вкладок начинается с индекса 0

when (position) {
0 -> {
tab.setIcon(R.drawable.play)
tab.text = getString(R.string.badBoys)
}
1 -> {
tab.setIcon(R.drawable.play_two)
tab.text = getString(R.string.avengers)
}
2 -> {
tab.setIcon(R.drawable.play_three)
tab.text = getString(R.string.alita)
}
}

То есть первая вкладка будет иметь вот такую иконку и заголовок

tab.setIcon(R.drawable.play)
tab.text = getString(R.string.badBoys)

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

Код из урока

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="scrollable"
app:tabIndicatorHeight="3dp"
app:tabIndicatorColor="@android:color/holo_orange_dark"
app:tabTextColor="@android:color/white"
app:tabSelectedTextColor="@android:color/holo_orange_dark"
app:tabIconTint="@color/white"
app:tabRippleColor="@android:color/holo_orange_dark"
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 ->

when (position) {
0 -> {
tab.setIcon(R.drawable.play)
tab.text = getString(R.string.badBoys)
}
1 -> {
tab.setIcon(R.drawable.play_two)
tab.text = getString(R.string.avengers)
}
2 -> {
tab.setIcon(R.drawable.play_three)
tab.text = getString(R.string.alita)
}
}

})
}
}
tabLayoutMediator?.attach()

}
}

Leave a Reply

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