TabLayout+ViewPager+Fragment自定义tab添加小红点（kotlin事例）

首先看哈效果：

下面是两个布局，一个主布局，一个tab的布局

主布局很简单tablayout+viewpager：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/app_base_color"><android.support.design.widget.TabLayoutandroid:id="@+id/mTabLayout"android:layout_width="match_parent"android:layout_height="44dp"android:layout_marginBottom="@dimen/titlebar_bottom"app:tabBackground="@color/color_ffffff"app:tabGravity="fill"app:tabIndicatorFullWidth="false"app:tabIndicatorColor="@color/app_theme"app:tabMode="scrollable"app:tabSelectedTextColor="@color/color_000000"app:tabTextColor="@color/color_666666"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPagerandroid:id="@+id/mViewPager"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
</LinearLayout>

tab的布局如下，这里加入的小红点：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="match_parent"><TextViewandroid:id="@+id/tvTabTitle"android:layout_width="wrap_content"android:layout_height="match_parent"android:paddingLeft="@dimen/dp_8"android:paddingRight="@dimen/dp_8"android:layout_gravity="center"android:gravity="center"android:textColor="@color/color_333333"android:textSize="15sp" /><FrameLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:paddingTop="@dimen/dp_5"><TextViewandroid:id="@+id/tabRed"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="5"android:layout_gravity="center"android:gravity="center"android:textSize="@dimen/dp_10"android:textColor="@color/color_ffffff"android:background="@drawable/shape_red_oval_drawable" /></FrameLayout>
</FrameLayout>

主要关联代码：

var listFragment:MutableList<Pair<String,Fragment>> = mutableListOf("全部" to BureauFragment(),"待开局" to BureauFragment(),"已开局" to BureauFragment(),"已结束" to BureauFragment(),"已拒绝" to BureauFragment())//关键在于先关联viewpager，后修改tab布局（注意在绑定了viewpager后tablayout的tab已经被设置了，所以做修改操作就好了）mViewPager.adapter = TabPagerAdapter(supportFragmentManager,listFragment)mTabLayout.setupWithViewPager(mViewPager)mViewPager.currentItem = 0listFragment.forEachIndexed { i, pair ->//设置自定义显示小红点的布局var tab = mTabLayout.getTabAt(i)tab?.setCustomView(R.layout.item_tab_layout)var tvTabTitle = tab?.customView?.find<TextView>(R.id.tvTabTitle)tvTabTitle?.text = pair.first}

来看看TabPagerAdapter适配器

/*** Author:xqt* Email:zzq1573@gmail.com* Date: 2019/1/5* Description:tablayout+viewpager+fragment*/
class  TabPagerAdapter<T:Fragment>(fm: FragmentManager, list: MutableList<Pair<String, T>>): FragmentPagerAdapter(fm) {private var flist = list//private var fm = fmoverride fun getItem(p0: Int): Fragment {return flist[p0].second}override fun getCount() = flist.size//如果不需要自定义tab的话这里就关联的每个tab的文字，当然这里需要自定义list可以自行简化下//override fun getPageTitle(position: Int): CharSequence? {//    return flist[position].first//}}