ViewPager指示器

指示器框架：

• MagicIndicator

该框架对为VIewPage指示器进行了基础的封装，可调用内置的，以及自定义的，比较灵活多变

MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器

MagicIndicator系列之二 —— MagicIndicator使用指南

MagicIndicator系列之三 —— MagicIndicator原理浅析及扩展MagicIndicator的4种方式

使用步骤：

1.引入指示器框架

    //指示器框架
    implementation 'com.github.hackware1993:MagicIndicator:1.5.0'

2.在xml里声明

​    <net.lucode.hackware.magicindicator.MagicIndicator
        android:id="@+id/magic_home_page"
        android:layout_width="match_parent"
        android:layout_height="46dp"
        android:layout_gravity="center_horizontal"
        app:layout_constraintTop_toTopOf="parent" />

3.实例化，并绑定数据

    //ViewPage
    private ViewPager vpValueType;
    //指示器容器
    private MagicIndicator magicIndicator;
    //指示器样式
    private CommonNavigator commonNavigator;
    //指示器标题
    private List<String> navigatorValues;

初始化
vpValueType = (ViewPager) bindId(R.id.vp_value_type);
magicIndicator = (MagicIndicator) bindId(R.id.magic_home_page);
绑定
  navigatorValues = new ListUtils<String>().add("KITKAT", "NOUGAT", "DONUT", "你好陌生人", "大家好", "我是徐杰伦");
        viewPageAdapter = new HomeViewPageAdapter(getActivity().getSupportFragmentManager(), navigatorValues);
        vpValueType.setAdapter(viewPageAdapter);
        commonNavigator = new CommonNavigator(getContext());
        commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return navigatorValues == null ? 0 : navigatorValues.size();
            }

            @Override
            public IPagerTitleView getTitleView(Context context, final int index) {
                //标题带颜色渐变和缩放的效果
                SimplePagerTitleView simplePagerTitleView = new ScaleTransitionPagerTitleView(context);
                //显示的内容
                simplePagerTitleView.setText(navigatorValues.get(index));
                //未缩放的大小
                simplePagerTitleView.setTextSize(16);
                //未选中颜色
                simplePagerTitleView.setNormalColor(Color.parseColor("#616161"));
                //选中颜色
                simplePagerTitleView.setSelectedColor(Color.parseColor("#f57c00"));
                //添加点击事件
                simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        vpValueType.setCurrentItem(index);
                    }
                });
                return simplePagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                //指示器的直线
                LinePagerIndicator indicator = new LinePagerIndicator(context);
                indicator.setStartInterpolator(new AccelerateInterpolator());
                indicator.setEndInterpolator(new DecelerateInterpolator(1.6f));
                //设置直线宽度的模式
                indicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
                //相对于底部的偏移量
                indicator.setYOffset(UIUtil.dip2px(context, 6));
                //设置左右间距
                indicator.setXOffset(30);
//                indicator.setLineWidth(UIUtil.dip2px(context, 10));
                //直线的颜色
                indicator.setColors(Color.parseColor("#f57c00"));
                return indicator;
            }

//            @Override  设置各个title的间距
//            public float getTitleWeight(Context context, int index) {
//                if (index == 0) {
//                    return 2.0f;
//                } else if (index == 1) {
//                    return 1.2f;
//                } else {
//                    return 1.0f;
//                }
//            }
        });
        magicIndicator.setNavigator(commonNavigator);
        ViewPagerHelper.bind(magicIndicator, vpValueType);

工具类：
/**
 * 标题带颜色渐变和缩放的指示器标题
 * 博客: http://hackware.lucode.net
 * Created by hackware on 2016/6/26.
 */
public class ScaleTransitionPagerTitleView extends ColorTransitionPagerTitleView {
    //缩小的比例百分比0.1-1f
    private float mMinScale = 0.75f;

    public ScaleTransitionPagerTitleView(Context context) {
        super(context);
    }

    @Override
    public void onEnter(int index, int totalCount, float enterPercent, boolean leftToRight) {
        super.onEnter(index, totalCount, enterPercent, leftToRight);    // 实现颜色渐变
        setScaleX(mMinScale + (1.0f - mMinScale) * enterPercent);
        setScaleY(mMinScale + (1.0f - mMinScale) * enterPercent);
    }

    @Override
    public void onLeave(int index, int totalCount, float leavePercent, boolean leftToRight) {
        super.onLeave(index, totalCount, leavePercent, leftToRight);    // 实现颜色渐变
        setScaleX(1.0f + (mMinScale - 1.0f) * leavePercent);
        setScaleY(1.0f + (mMinScale - 1.0f) * leavePercent);
    }

    public float getMinScale() {
        return mMinScale;
    }

    public void setMinScale(float minScale) {
        mMinScale = minScale;
    }
}

不绑定ViewPage单独设置当前选项：

在设置当前viewPage的页面替换成以下语句
                simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        magicIndicator.onPageScrolled(index, 0, 0);
                        magicIndicator.onPageSelected(index);
                        magicIndicator.onPageScrollStateChanged(0);
                        commonNavigator.onPageScrolled(index, 0, 0);
                        commonNavigator.onPageSelected(index);
                        commonNavigator.onPageScrollStateChanged(0);
//                        vpValueType.setCurrentItem(index);
                    }
                });

常用属性：

设置横向居中显示：

MagicIndicator控件设置以下属性：
android:layout_gravity="center_horizontal"