image

ViewPager2 已发布过一段时间，已经步入正式版本，今天我们就来聊聊ViewPager的一些简单用法，以及与TabLayout的搭配使用。话不多说，进入正题。

首先我们来看一下，本次教程的最终效果。如图。

image

首先要想要使用ViewPager2 ,需要手动添加如下依赖至项目的gradle文件下。

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

依赖添加完毕之后，就可以在布局文件中使用。举个栗子：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/rl_tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="ViewPager简单用法"
            android:textColor="@color/black"
            android:textSize="20dp" />

    </RelativeLayout>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/rl_tool_bar"
        app:tabIndicator="@drawable/tab_indicator_shape"
        app:tabIndicatorColor="@null"
        app:tabIndicatorFullWidth="false"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/black"
        app:tabTextAppearance="@style/tab_text"
        app:tabTextColor="#888888"
        app:tabUnboundedRipple="@null" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tl_tab" />

</androidx.constraintlayout.widget.ConstraintLayout>

TabLayout 属性介绍

app:tabIndicatorColor tab指示器的颜色
app:tabIndicator 自定义tab指示器的背景颜色，要想生效，需将app:tabIndicatorColor 属性设为null
app:tabIndicatorFullWidth tab 指示器是否充满屏幕，默认为true
app:tabMode tab 显示模式，有三种模式，fixed、auto、scrollable
app:tabTextColor tab指示器未选中时文字颜色
app:tabSelectedTextColor tab指示器选中时文字颜色
app:tabTextAppearance tab指示器文字自定义属性,比如文字大小，字体粗细等
app:tabUnboundedRipple tab指示器按钮按下反馈效果

让我们分别看看app:tabIndicator以及app:tabTextAppearance属性如何赋值。
1、app:tabIndicator

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#03A9F4" />
    <corners android:radius="2dp" />
    <!--  设置指示器高度，宽度，宽度在 app:tabIndicatorFullWidth="false"时生效  -->
    <size android:height="3dp" />
</shape>

2、app:tabTextAppearance

 <style name="tab_text" parent="android:TextAppearance">
        <item name="android:textSize">20dp</item>
    </style>

ViewPager2与TabLayout关联

ViewPager2与TabLayout不同于ViewPager,此处需使用TabLayoutMediator。举个栗子。

    private lateinit var binding: ActivityMainBinding
    private lateinit var adapter: ViewPagerFragmentStateAdapter
    private val tabTileList = arrayOf("春天", "夏天的风")
  // 将tabLayout 与 viewPager绑定
    TabLayoutMediator(binding.tlTab, binding.vpContainer) { tab, position ->
            tab.text = tabTileList[position]
        }.attach()

ViewPager2 适配器介绍

ViewPager2 中建议使用FragmentStateAdapter。

class ViewPagerFragmentStateAdapter(
    fragmentManager: FragmentManager,
    lifecycle: Lifecycle
) :
    FragmentStateAdapter(fragmentManager, lifecycle) {
    private var mDataList = mutableListOf<Fragment>()
    override fun createFragment(position: Int): Fragment {
        return mDataList[position]
    }

    override fun getItemCount(): Int {
        return mDataList.size
    }

    fun addFragment(fragmennt: Fragment) {
        mDataList.add(fragmennt)
    }
}

ViewPager2 滑动水波纹去除

ViewPager不可使用android:overScrollMode="never" 属性去除水波纹，因为其滑动实现是通过内部RecycleView 实现。我们需要做的是设置其内部recyleview 滑动模式。

    try {
            val field = binding.vpContainer.javaClass.getDeclaredField("mRecyclerView")
            field.isAccessible = true
            val recycleView = field.get(binding.vpContainer) as RecyclerView
            recycleView.overScrollMode = View.OVER_SCROLL_NEVER
        } catch (ex: Exception) {
            Log.d(TAG, "$ex")
        }

TabLayout Tab选中时文字需加粗

通过源码，了解到其内部封装了TextView,通过app:tabTextAppearance属性设置的文字属性，tab选中和未选中样式一致，乏善可陈。所以另辟蹊径，通过SpannableString来达到目的。举个栗子。

     // 设置选中tab标题加粗
        binding.tlTab.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                tab?.apply {
                    val selectTab = text.toString().trim()
                    val spannedString = SpannableString(selectTab)
                    val styleSpan = StyleSpan(Typeface.NORMAL)
                    spannedString.setSpan(
                        styleSpan,
                        0,
                        selectTab.length,
                        Spanned.SPAN_INCLUSIVE_INCLUSIVE
                    )
                    tab.text = spannedString
                }
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                tab?.apply {
                    val unselectTab = text.toString().trim()
                    val spannedString = SpannableString(unselectTab)
                    val styleSpan = StyleSpan(Typeface.NORMAL)
                    spannedString.setSpan(
                        styleSpan,
                        0,
                        unselectTab.length,
                        Spanned.SPAN_INCLUSIVE_INCLUSIVE
                    )
                    tab.text = spannedString
                }
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                // do nothing
            }
        })
        val selectTab = tabTileList[0]
        val spannedString = SpannableString(selectTab)
        val styleSpan = StyleSpan(Typeface.NORMAL)
        spannedString.setSpan(
            styleSpan,
            0,
            selectTab.length,
            Spanned.SPAN_INCLUSIVE_INCLUSIVE
        )
        binding.tlTab.getTabAt(0)?.text = spannedString

写在最后

ViewPager2 较ViewPage做了很多优化，例如支持上下滑动，缓存优化等。ViewPager2有着更多的用法值得我们去探究。入股不亏。如果喜欢，给点喜欢。