自定义一个指示器（轮播图指示器）

需求需要实现效果如下

image.png

具体代码

    <declare-styleable name="IndicatorView">
        <attr name="radius" format="dimension" /><!--圆角度数-->
        <attr name="big_color" format="color" /> <!--底色-->
        <attr name="small_color" format="color" /><!--指示器颜色-->
    </declare-styleable>

 <xxxx.xxxx.xxx.IndicatorView
        android:id="@+id/indicatorview" 
        android:layout_width="128dp"
        android:layout_gravity="center_horizontal"
        app:big_color="@color/indicator_bg"
        app:small_color="@color/blue"
        app:radius="@dimen/dp_two"
        android:layout_height="4dp" />

public class IndicatorView extends View {
    private String TAG = getClass().getSimpleName();

    private int indicationSize = -1;
    private int curIndex = -1;
    private Paint mPaint;

    private int radius = 0;
    private int big_color = Color.GRAY;
    private int small_color = Color.BLUE;

    public IndicatorView(Context context) {
        super(context);
        init(null);
    }

    public IndicatorView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }

    public IndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs) {

        mPaint = new Paint();

        if (attrs != null) {
            TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.IndicatorView);
            radius = ta.getDimensionPixelOffset(R.styleable.IndicatorView_radius, 0);
            big_color = ta.getColor(R.styleable.IndicatorView_big_color, Color.GRAY);
            small_color = ta.getColor(R.styleable.IndicatorView_small_color, Color.BLUE);
        }

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = canvas.getWidth();
        int hight = canvas.getHeight();
        Log.e(TAG, "-----width------" + width);
        Log.e(TAG, "-----hight------" + hight);
        //画圆角矩形
        mPaint.setStyle(Paint.Style.FILL);//充满
        mPaint.setColor(big_color);
        mPaint.setAntiAlias(true);// 设置画笔的锯齿效果
        RectF oval3 = new RectF(0, 0, width, hight);// 设置个新的长方形
        canvas.drawRoundRect(oval3
                , radius
                , radius
                , mPaint);//第二个参数是x半径，第三个参数是y半径
        if (indicationSize == -1) {
            return;
        }
        if (curIndex == -1) {
            return;
        }
        int itemW = width / indicationSize;
        int index = curIndex ;

        mPaint.setColor(small_color);
        int left = index * itemW;
        Log.e(TAG, " index " + index + " left " + left);
        RectF rectF = new RectF(left, 0, left + itemW, hight);
        canvas.drawRoundRect(rectF
                , radius
                , radius
                , mPaint);//第二个参数是x半径，第三个参数是y半径

    }

    public void setMaxSize(int size) {
        indicationSize = size;
    }

    public void setCurIndex(int index) {
        curIndex = index;
        postInvalidate();
    }


}

使用方法

IndicatorView indicatorView = view.findViewById(R.id.indicatorview);
        indicatorView.setMaxSize(3);
        indicatorView.setCurIndex(1);

通过改变当前下标改变位置，也可以监听viewpager的变化改变

效果图

image.png