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.TabLayout
        android: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.ViewPager
        android: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">
    <TextView
        android: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" />
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:paddingTop="@dimen/dp_5">
        <TextView
            android: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 = 0
        listFragment.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 = fm
    override 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
    //}

}