前言
标题与ViewPage联动使用,是一个App经常要实现的交互过程,在当前有很多实现该该过程的框架,今天我们来学习一下其中最火的magicindicator
一、magicindicator能做什么
示例:废话不多说,如下图所示
二、如何配置使用magicindicator
1
在gadle里面配置依赖
implementation 'com.github.hackware1993:MagicIndicator:1.5.0'
配置好之后我们看一下magicindicator需要哪些步骤
1、找到magicindicator指示器,设置相关的颜色属性后,配置具体的指示器,通常我们配置的是CommonNavigator指示器
mMagicIndicator = this.findViewById(R.id.main_indicator);
mMagicIndicator.setBackgroundColor(this.getResources().getColor(R.color.main_color));
//创建indicator适配器
mAdapt = new IndicatorAdapt(this);
CommonNavigator commonNavigator=new CommonNavigator(this);
commonNavigator.setAdjustMode(true);//自我调节位置,实现自我平分
commonNavigator.setAdapter(mAdapt);
mMagicIndicator.setNavigator(commonNavigator);
可以看到,CommonNavigator中是需要具体的适配器,因此我们需要继承CommonNavigatorAdapter,在里面实现相关的方法。下面查看一下源码,并了解需要实现的抽象方法
public abstract int getCount();//返回indicator的数据个数
public abstract IPagerTitleView getTitleView(Context context, int index);//indicator标题的样式
public abstract IPagerIndicator getIndicator(Context context);//在标题的下面,直线指示器,选中之后出现的效果
通过了解源码的抽象方法后,我们设置一个自己的适配器
public class IndicatorAdapt extends CommonNavigatorAdapter {
private final String[] mtitles;//存放indicator的标题
private OnIndicatorTapClickListener mListener=null;
public IndicatorAdapt(Context context) {
mtitles = context.getResources().getStringArray(R.array.indicator_title);
}
@Override
public int getCount() {
if(mtitles!=null){
return mtitles.length;
}
return 0;
}
@Override
public IPagerTitleView getTitleView(Context context, final int index) {
// ColorTransitionPagerTitleView 设置两种颜色过渡的指示器
ColorTransitionPagerTitleView colorTransitionPagerTitleView =new ColorTransitionPagerTitleView(context);
colorTransitionPagerTitleView.setNormalColor(Color.parseColor("#aaffffff"));//普通状态
colorTransitionPagerTitleView.setSelectedColor(Color.parseColor("#ffffff"));//选中时状态
colorTransitionPagerTitleView.setTextSize(18);
colorTransitionPagerTitleView.setText(mtitles[index]);
colorTransitionPagerTitleView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// mViewPager.setCurrentItem(index);
if (mListener != null) {
mListener.onTabClick(index);
}
}
});
return colorTransitionPagerTitleView;
}
//LinePagerIndicator 当标题被选中时,标题下方出现一条直线
@Override
public IPagerIndicator getIndicator(Context context) {
LinePagerIndicator linePagerIndicator = new LinePagerIndicator(context);
linePagerIndicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
linePagerIndicator.setColors(Color.WHITE);
return linePagerIndicator;
}
//为了与ViewPage进行连动,需要设置一个接口,通知使用者实现被点击事件的处理
public void setOnIndicatorTapClickListener(OnIndicatorTapClickListener listener){
this.mListener = listener;
}
public interface OnIndicatorTapClickListener{
void onTabClick(int index);
}
}
别忘了设置indicator的点击事件,点击后要能够跳转到相应的ViewPage界面
mAdapt.setOnIndicatorTapClickListener(new IndicatorAdapt.OnIndicatorTapClickListener() {
@Override
public void onTabClick(int index) {
if(contentPager!=null){
contentPager.setCurrentItem(index);
}
}
});
通过以上步骤,我们我们已经成功配置指示器了,但是还不能和ViewPage进行联动,下面我们来配置ViewPage
2.配置ViewPage相关
FragmentManager supportFragmentManager=getSupportFragmentManager();
MainContentAdapter viewPagerAdapt=new MainContentAdapter(supportFragmentManager);
contentPager.setAdapter(viewPagerAdapt);
//MainContentAdapter继承FragmentPagerAdapter并重写里面的抽象方法,在本次中,我们假设ViewPage有三个fragment
public class MainContentAdapter extends FragmentPagerAdapter {
public MainContentAdapter(FragmentManager fm) {
super(fm);
}
@NonNull
@Override
public Fragment getItem(int position) {
return FragmentCreator.getFragment(position);
}//滑动时要返回相应的fragment
@Override
public int getCount() {
return FragmentCreator.PAGE_COUNT;
}
}
FragmentCreator是自定义要返回的fragment,读者可以自行的去设置
public class FragmentCreator {
public final static int INDEX_RECOMMEND=0;
public final static int INDEX_SUBSCRIPTION=1;
public final static int INDEX_HISTORY=2;
public final static int PAGE_COUNT=3;
private static Map<Integer, BaseFragment>sCache=new HashMap<>();//作为缓存,加载一次后就无须加载了
//自定义BaseFragment继承自fragment
public static BaseFragment getFragment(int index){
BaseFragment baseFragment=sCache.get(index);
if(baseFragment!=null){
return baseFragment;
}
switch (index){
case INDEX_RECOMMEND:
baseFragment=new RecommendFragment();
break;
case INDEX_SUBSCRIPTION:
baseFragment=new SubscriptionFragment();
break;
case INDEX_HISTORY:
baseFragment=new HistoryFragment();
break;
}
sCache.put(index,baseFragment);
return baseFragment;
}
}
最后通过绑定ViewPage和Indicator即可
ViewPagerHelper.bind(mMagicIndicator,contentPager);
注意:当运用ViewPage的时候,需要将该Activity设置为继承FragmentActivity,方便后续调用
总结
运用magicindicator可以方便我们去实现indicator与ViewPage的联动,合理的运用可以方便我们开发。