Android ViewPager Indicator 一个图片

一、效果

切换方式：

目前有四种切换方式
1、直接切换

直接切换.gif
2、渐变
渐变.gif
3、滑动
滑动.gif
4、滚动
滚动.gif

四种形状：

圆形、正方形、菱形、三角形（若选择菱形滚动模式因动效半径问题，默认效果为滑动）

二、用法

1、在项目中app的build.gralde中添加

implementation 'com.chz.view:guide:1.2'

2、在需要用到指示器的父布局文件下
注意
合理设置指示器数量、尺寸、间距

    <com.chz.guide.view.GuideView
        android:id="@+id/circle_change_guide"
        android:layout_width="wrap_content"//参数被屏蔽，失效
        android:layout_height="wrap_content"//参数被屏蔽，失效
        app:changeMode="change"//切换模式，不声明默认为'改变'
        app:distanceSize="50dp"//指示器之间的距离（大于等于0）
        app:focusColor="#FF0000"//选中指示器颜色
        app:guideShape="circle"//指示器形状，不声明默认为'圆形'
        app:indexCount="4"//指示器数量（大于等于0）
        app:indexSize="50dp"//指示器尺寸（大于0）
        app:normalColor="#0000FF"//非选中指示器颜色
    />

3、在你的Activity或者Fragment中

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circle_alpha);
        //找到Viewpager控件
        viewPager = findViewById(R.id.circle_alpha_vp);
        //找到指示器控件
        guideView = findViewById(R.id.circle_alpha_guide);
        //Viewpager适配器初始化
        PagerAdapter adapter = new GuideAdapter(this);
        //设置适配器
        viewPager.setAdapter(adapter);
        //调用GuideView的addOnPageChangeListener方法，将Viewpager作为参数传进去
        guideView.addOnPageChangeListener(viewPager);
        //主动设置当前ViewPager position
        guideView.updatePosition(position);
    }

三、源码解读

1、架构

两个重点：形状、切换效果

代码架构.png

2、自定义的GuideView

1.自定义View xml资源文件
形状和切换模式使用枚举来表示，并且为了避免魔鬼数字，均为两位数

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="indexSize" format="dimension" />
    <attr name="distanceSize" format="dimension" />
    <attr name="indexCount" format="integer" />
    <attr name="focusColor" format="color" />
    <attr name="normalColor" format="color" />
    <attr name="guideShape">
        <enum name="circle" value="11" />
        <enum name="square" value="22" />
        <enum name="diamond" value="33" />
        <enum name="triangle" value="44" />
    </attr>
    <attr name="changeMode">
        <enum name="change" value="11" />
        <enum name="alpha" value="22" />
        <enum name="slide" value="33" />
        <enum name="scroll" value="44" />
    </attr>
    <declare-styleable name="GuideView">
        <attr name="indexSize" />
        <attr name="distanceSize" />
        <attr name="indexCount" />
        <attr name="focusColor" />
        <attr name="normalColor" />
        <attr name="guideShape" />
        <attr name="changeMode" />
    </declare-styleable>
</resources>

2.GuideView类
GuideView仅作为一个承载容器，负责形状基础参数的初始化和边界合法性判断

 public GuideView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
       ······
        initShape();
        //指示器参数初始化
        shape.baseInit(changeMode, indexShape,normalColor, focusColor, indexSize,
                distanceSize, indexCount, scrollCount);
    }
//判断指示器控件是否超出父容器边界
    private void checkViewSize() {
         ······
    }

在GuideView中初始化控件尺寸
宽度=指示器宽度*指示器数量+指示器间距*指示器间距数量
高度分两种情况
滚动模式下：
正方形的最大高度为对角线长度，三角形最大高度为边长，剩余两种形状高度与非滚动模式下相同。
非滚动模式下：
圆形、正方形、菱形的高都为指示器宽度，而形状为三角形，控件的高则为当前正三角形的高。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        viewWidth = (int) (indexCount * (indexSize + distanceSize) - distanceSize);
        viewHeight = (int) indexSize;
        switch (indexShape) {
            case SHAPE_CIRCLE:
                break;
            case SHAPE_SQUARE:
                if (changeMode == MODE_SCROLL) {
                    viewHeight = (int) (indexSize / Math.cos(45 *PI));
                }
                break;
            case SHAPE_DIAMOND:
                break;
            case SHAPE_TRIANGLE:
                if (changeMode != MODE_SCROLL) {
                    viewHeight = (int) (indexSize / 2 * Math.tan(60 * PI));
                }
                break;
            default:
                break;
        }
        setMeasuredDimension(viewWidth, viewHeight);
    }

3.GuideShape类
GuideShape是一个抽象类，实现了ViewPager的滑动监听方法，负责所有形状的公共参数初始化，形状切换状态也实现的ViewPager滑动监听方法中实现。

public abstract class GuideShape implements ViewPager.OnPageChangeListener {
    ······
    public void baseInit(int mode, int shape, int normalColor, int focusColor
            , float indexSize, float distanceSize, int indexCount, int scrollCount) {
        ······
        normalPaint = new Paint();
        focusPaint = new Paint();
        normalPaint.setAntiAlias(true);
        focusPaint.setAntiAlias(true);
        normalPaint.setColor(mNormalColor);
        focusPaint.setColor(mFocusColor);
        if (mMode == GuideView.MODE_ALPHA) {
            focusPaintNormal = new Paint();
            focusPaintNormal.setAntiAlias(true);
            focusPaintNormal.setColor(mFocusColor);
            focusPaintNormal.setAlpha(0);
        }
        initPaintTools();
    }

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        switch (mMode) {
            case GuideView.MODE_CHANGE:
                ······    
                break;
            case GuideView.MODE_ALPHA:
                ······ 
                break;
            case GuideView.MODE_SLIDE:
                ······ 
                break;
            case GuideView.MODE_SCROLL:
                ······ 
                break;
        }
    }

    public void onPageSelected(int position) {
    }

    public void onPageScrollStateChanged(int state) {
        ······ 
    }

3.Circle、Triangle、Square、Diamond类
对应形状的绘制实现、刷新等。

四、版本更新

Version 1.2

1、新增“滚动”模式
2、优化响应模式

Version 1.1

1、优化重绘机制
2、自适应父布局

Version 1.0

Release notes 初始化提交

四、其他

github
望诸君多多指教！