The article directories

    • xml
    • Tabview custom item layout (tabIndicator)
    • Dynamic TAB data
    • ViewPager2 Adapter FragmentStateAdapter
    • The UI to invoke

xml

<com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout_tips" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginTop="44dp" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" app:layout_constraintLeft_toRightOf="@id/iv_back" app:layout_constraintTop_toTopOf="parent" app:tabIndicatorHeight="0dp" app:tabIndicatorFullWidth="true" app:tabIndicatorGravity="bottom" app:tabMinWidth="90dp" app:tabTextColor="#333333" app:tabSelectedTextColor="@color/black" app:tabIndicatorColor="#F45701" app:tabIconTintMode="src_in" app:tabMode="fixed"  app:tabGravity="center" app:tabBackground="@android:color/transparent" app:tabRippleColor="@android:color/transparent">  </com.google.android.material.tabs.TabLayout> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/viewPager2Msg" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintHeight_default="percent" app:layout_constraintTop_toBottomOf="@id/tab_layout_tips">Copy the code

Tabview custom item layout (tabIndicator)

<? The XML version = "1.0" encoding = "utf-8"? > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="90dp" android:layout_height="50dp"> <TextView android:id="@+id/text1" android:layout_width="wrap_content" Android :layout_centerInParent="true" Android :layout_centerInParent="true" android:layout_centerInParent="true" android:textColor="#ff333333" android:textSize="16sp"/> <RelativeLayout android:id="@+id/rl_tips" android:layout_width="16dp" android:layout_height="16dp" android:gravity="center" android:layout_marginTop="9dp" android:layout_toRightOf="@id/text1"> <ImageView android:id="@+id/iv_tips" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/re_tips_bg" android:scaleType="centerInside"/> <TextView android:id="@+id/text_tips" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textColor="#ffffffff" android:textSize="11sp" android:text="3"/> </RelativeLayout> <ImageView android:id="@+id/iv_indicator" android:layout_width="16dp" android:layout_height="2dp" android:background="#F45701" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"/> </RelativeLayout>Copy the code

Dynamic TAB data

Class DataGenerator {companion Object {private val textList = arrayOf(" reminder "," private ") Fun getTabView(context: Context, position:Int) : View { val view: View = LayoutInflater.from(context).inflate(R.layout.re_tab_item_layout, null) var text1 = view.findViewById<TextView>(R.id.text1) var text_tips = view.findViewById<TextView>(R.id.text_tips) text1.text = textList[position] return view } } }Copy the code

ViewPager2 Adapter FragmentStateAdapter

Add the adapter

class ReFragmentMsgAdapter(fragmentManager: FragmentManager,lifecycle:Lifecycle):FragmentStateAdapter(fragmentManager,lifecycle) {

    private val mFragments = mutableListOf<Fragment>()
    override fun getItemCount(): Int = mFragments.size
    override fun createFragment(position: Int): Fragment = mFragments[position]

    fun add(fragment:Fragment){
        mFragments.add(fragment)
    }
}
Copy the code

The UI to invoke

fragmentAdapter = ReFragmentMsgAdapter(supportFragmentManager,lifecycle) fragmentAdapter.add(ReTipsFragment()) fragmentAdapter.add(ReMsgFragment()) viewPager2Msg.adapter = fragmentAdapter val tabLayoutMediator = TabLayoutMediator(tab_layout_tips,viewPager2Msg) { tab, position -> if(position == 0) { tab.customView = DataGenerator.getTabView(this,0) tab.customView? .findViewById<ImageView>(R.id.iv_indicator)? .visibility = View.VISIBLE tab.customView? .findViewById<RelativeLayout>(R.id.rl_tips)? .visibility = View.VISIBLE tab.customView? .findViewById<TextView>(R.id.text1)? .setTextColor(Color.BLACK) }else{ tab.customView = DataGenerator.getTabView(this,1) tab.customView? .findViewById<ImageView>(R.id.iv_indicator)? .visibility = View.GONE tab.customView? .findViewById<RelativeLayout>(R.id.rl_tips)? .visibility = View.GONE tab.customView? .findViewById<TextView>(R.id.text1)? .setTextColor(Color.parseColor("#333333")) } } recoverItem() tabLayoutMediator.attach() tab_layout_tips.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { override fun onTabSelected(tab: TabLayout.Tab?) { recoverItem() chooseTab(tab) } override fun onTabUnselected(tab: TabLayout.Tab?) { } override fun onTabReselected(tab: TabLayout.Tab?) { } }) private fun recoverItem() { for (i in 0.. 1){ var ivIndicator = tab_layout_tips? .getTabAt(i)? .view? .findViewById<ImageView>(R.id.iv_indicator) var text1 = tab_layout_tips? .getTabAt(i)? .view? .findViewById<TextView>(R.id.text1) var rlTips = tab_layout_tips? .getTabAt(i)? .view? .findViewById<RelativeLayout>(R.id.rl_tips) rlTips? .visibility = View.GONE ivIndicator? .visibility = View.GONE text1? .setTextColor(Color.parseColor("#333333")) } } private fun chooseTab(tab: TabLayout.Tab?) { var ivIndicator = tab? .view? .findViewById<ImageView>(R.id.iv_indicator) var text1 = tab? .view? .findViewById<TextView>(R.id.text1) var rlTips = tab? .view? .findViewById<RelativeLayout>(R.id.rl_tips) var textTips = tab? .view? .findViewById<TextView>(R.id.text_tips) rlTips? .visibility = View.VISIBLE ivIndicator? .visibility = View.VISIBLE text1? .setTextColor(Color.BLACK) }Copy the code