首先看哈效果:
下面是两个布局,一个主布局,一个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
//}
}