TabLayout+ViewPager2
当我们需要更改TabLayout的tabIndicator的时候可以自定义 app:tabIndicator="@drawable/tab_indicator"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:shape="rectangle"
tools:ignore="ResourceName">
<item
android:width="26dp"
android:height="3dp"
android:gravity="center">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#ffff823f"
android:startColor="#ffff823f"
android:type="linear" />
<corners
android:radius="@dimen/dp_2" />
</shape>
</item>
</layer-list>
xml使用如下
// app:tabIndicator 设置自定义的指示器
/ /app:tabTextAppearance 修改默认的字体大小
//app:tabIndicatorColor 可以设置指示器颜色
<com.google.android.material.tabs.TabLayout
android:id="@+id/mTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicator="@drawable/tab_indicator"
app:tabIndicatorColor="#ffff823f"
app:tabMode="scrollable"
app:tabRippleColor="@android:color/transparent"
app:tabSelectedTextColor="@color/white"
app:tabTextAppearance="@style/TabLayoutTextSize"
app:tabTextColor="@color/white" />
如果需要tablayout+viewPage2同时更改选中tab的字体 加粗
/**
* tablayout+viewPage2
* @param activity FragmentActivity
* @param tabLayout TabLayout
* @param viewPager2 ViewPager2
* @param mListFragment ArrayList<FrameLayout>
* @param mTabTitle ArrayList<String>
* @param textColor Int 字体颜色
*/
fun initTabLayout(
activity: FragmentActivity, tabLayout:TabLayout,
viewPager2:ViewPager2,
mListFragment: ArrayList<Fragment>,
mTabTitle: ArrayList<String>,
@ColorRes textColor:Int=0,
isBold:Boolean=true
) {
tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
override fun onTabSelected(tab: TabLayout.Tab) {
val textView = TextView(activity)
if (textColor!=0){
textView.setTextColor(ContextCompat.getColor(activity, textColor))
textView.gravity = Gravity.CENTER
}
if (isBold){
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
textView.typeface = Typeface.defaultFromStyle(Typeface.BOLD)//加粗
}
textView.text = tab.text
tab.customView = textView
}
override fun onTabUnselected(tab: TabLayout.Tab) {
if (textColor!=0){
tab.customView = null
}
}
override fun onTabReselected(tab: TabLayout.Tab) {}
})
viewPager2.offscreenPageLimit = mListFragment.size
viewPager2.orientation = ViewPager2.ORIENTATION_HORIZONTAL;
viewPager2.adapter = MyViewPage2Adapter(activity, mListFragment)
viewPager2.isUserInputEnabled=true//禁止滑动
//TabLayout与ViewPager2联动
TabLayoutMediator(tabLayout, viewPager2,
TabLayoutMediator.TabConfigurationStrategy { tab, position ->
tab.text = mTabTitle[position]
}).attach()
}
如上图:
但是在使用com.google.android.material:material:1.2.1的时候 指示器滑动正常
当把material升级1.4.0的时候 滑动的时候指示器会多次一个并且快速的隐藏,并且出现一个闪烁效果体验不好,解决办法把版本更改回1.2.1就可以了(暂时没有看1.2.1和1.4.0源码的区别,空了去研究下怎么回事)
网友评论