参考:https://blog.csdn.net/lixinxiaos/article/details/105975927
magicIndicator:https://github.com/hackware1993/MagicIndicator
1、创建Fragment
创建自己的fragment,以下是推荐的初始化方式,基本上复制到fragment去即可
//静态内部类,通过这种方式activity初始化fragment时可以传入参数
companion object {
private const val TYPE = "TYPE"
fun newInstance(type: Int): CircleFollowFragment {
val args = Bundle()
args.putInt(TYPE, type)
val fragment = CircleFollowFragment()
fragment.arguments = args
return fragment
}
}
2、布局
一上一下放在LinearLayout中即可
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="@+id/mi_indicator"
android:paddingHorizontal="15dp"
android:layout_width="match_parent"
android:layout_height="54dp"
/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
/>
3、编写CommonNavigatorAdapter
这个导航栏适配器可以让我们自定义导航栏tab的布局,这是一个内部类放在activity中或单独写
inner class NavigatorAdapter : CommonNavigatorAdapter(){
override fun getCount(): Int {
if(mTitles == null){
return 0
}else{
return mTitles.size
}
}
override fun getTitleView(context: Context?, index: Int): IPagerTitleView {
var commonPagerTitleView = CommonPagerTitleView(me)
//设置自定义布局文件以及view的赋值
commonPagerTitleView.setContentView(R.layout.tab_circle_index)
val tvTitle = commonPagerTitleView.findViewById<TextView>(R.id.tv_title)
val ivLine = commonPagerTitleView.findViewById<ImageView>(R.id.iv_line)
//绑定标题名称
when(index){
0 -> {
tvTitle.text = mTitles[0]
}
1 -> {
tvTitle.text = mTitles[1]
}
}
//tab切换监听
commonPagerTitleView.onPagerTitleChangeListener = object : CommonPagerTitleView.OnPagerTitleChangeListener{
override fun onSelected(index: Int, totalCount: Int) {
//改变字体大小
tvTitle.textSize = 17f
tvTitle.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
//添加下划线
Glide.with(me).load(R.mipmap.icon_circle_tab)
.into(ivLine)
}
override fun onDeselected(index: Int, totalCount: Int) {
//改变字体大小
tvTitle.textSize = 17f
tvTitle.typeface = Typeface.defaultFromStyle(Typeface.NORMAL)
//去除下划线
Glide.with(me).load("")
.into(ivLine)
}
override fun onLeave(
index: Int,
totalCount: Int,
leavePercent: Float,
leftToRight: Boolean
) {
}
override fun onEnter(
index: Int,
totalCount: Int,
enterPercent: Float,
leftToRight: Boolean
) {
}
}
//tab单个item点击事件监听
commonPagerTitleView.setOnClickListener(View.OnClickListener {
//切换viewPager
viewPager.currentItem = index
})
return commonPagerTitleView
}
override fun getIndicator(context: Context?) : IPagerIndicator? { //tab指示器回调
return null
}
}
4、初始化ViewPager
该内部类放入到activity中即可
private inner class MyPagerAdapter(fm: FragmentManager?) : FragmentPagerAdapter(fm!!) {
//fragment的数量
override fun getCount(): Int {
return mFragments.size
}
//自己设置的标题
override fun getPageTitle(position: Int): CharSequence? {
return mTitles[position]
}
//返回fragment
override fun getItem(position: Int): Fragment {
return mFragments[position]
}
}
给viewPager的adapter赋值
viewPager.adapter = MyPagerAdapter(supportFragmentManager)
5、初始化MagicIndcator
该方法放入到activity中即可
private fun initIndicator(){
//初始化Indicator
var commonNavigator = CommonNavigator(me)
commonNavigator.adapter = NavigatorAdapter()
//绑定指示器到viewPager
miIndicator.navigator = commonNavigator
ViewPagerHelper.bind(miIndicator,viewPager)
viewPager.currentItem = 0
}
网友评论