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:tabRippleColor="@color/color_transparent"
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:tabIndicatorColortab指示器的颜色
app:tabIndicator自定义tab指示器的背景颜色，要想生效，需将app:tabIndicatorColor属性设为null
app:tabIndicatorFullWidthtab 指示器是否充满屏幕，默认为true
app:tabModetab 显示模式，有三种模式，fixed、auto、scrollable
app:tabTextColortab指示器未选中时文字颜色
app:tabSelectedTextColortab指示器选中时文字颜色
app:tabTextAppearancetab指示器文字自定义属性,比如文字大小，字体粗细等
app:tabUnboundedRippletab指示器按钮按下反馈效果
让我们分别看看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]
// 长按Tab提示取消
tab.view.setOnLongClickListener { true }
tab.view.tooltipText = null
}.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有着更多的用法值得我们去探究。入股不亏。如果喜欢，给点喜欢。
