magicindicator的使用详解

前言

标题与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的联动，合理的运用可以方便我们开发。