自定义实现ViewPager圆形指示器

其实我这个就是实现四个点的效果，通过滑动viewpager来选中当前的点进行变色

类似这种效果图，颜色可以自己修改还有大小

不多说直接上代码

自定义属性xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PagePointView">
        <attr name="circleInterval" format="dimension"/>
        <attr name="circleSizi" format="dimension"/>
        <attr name="circleNumber" format="integer"/>
        <attr name="selectIndex" format="integer"/>
        <attr name="circleSelectColor" format="color"/>
        <attr name="circleUnSelectColor" format="color"/>
    </declare-styleable>
</resources>

代码

public class PagePointView extends View {
    private Paint mPaint;
    private int mCircleInterval;//设置圆和点圆之间的间隔
    private int mCircleRadius;//设置圆的大小
    private int mCircleNumber;//设置圆的个数
    private int mSelectIndex = 1;//设置选中的圆
    private int mScreenWidht;
    private int mScreenHeight;
    private int mWidht;
    private int mHeight;
    private int mSelectColor;
    private int mUnSelectColor;


    public void setmCircleNumber(int mCircleNumber) {
        this.mCircleNumber = mCircleNumber;
    }

    public void setIndex(int selectIndex) {
        if (selectIndex > mCircleNumber) {
            this.mSelectIndex = mCircleNumber;
        } else {
            this.mSelectIndex = selectIndex;
        }
        postInvalidate();
    }

    public void setmSelectColor(int mSelectColor) {
        this.mSelectColor = mSelectColor;
    }

    public void setmUnSelectColor(int mUnSelectColor) {
        this.mUnSelectColor = mUnSelectColor;
    }

    public PagePointView(Context context) {
        this(context, null);
    }

    public PagePointView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PagePointView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStrokeWidth(20);
        mPaint.setStyle(Paint.Style.FILL);
        mScreenWidht = context.getResources().getDisplayMetrics().widthPixels;
        mScreenHeight = context.getResources().getDisplayMetrics().heightPixels;

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.PagePointView, defStyleAttr, 0);
        int count = ta.getIndexCount();
        for (int i = 0; i < count; i++) {
            int index = ta.getIndex(i);
            switch (index) {
                case R.styleable.PagePointView_circleInterval:
                    mCircleInterval = ta.getDimensionPixelSize(index, (int) TypedValue.applyDimension
                            (TypedValue.COMPLEX_UNIT_PX, 12, context.getResources().getDisplayMetrics()));
                    break;
                case R.styleable.PagePointView_circleNumber:
                    mCircleNumber = ta.getInt(index, 4);
                    break;
                case R.styleable.PagePointView_circleSizi:
                    mCircleRadius = ta.getDimensionPixelOffset(index, (int) TypedValue.applyDimension
                            (TypedValue.COMPLEX_UNIT_DIP, 12, context.getResources().getDisplayMetrics()));
                    break;
                case R.styleable.PagePointView_selectIndex:
                    mSelectIndex = ta.getInt(index, 1);
                    break;
                case R.styleable.PagePointView_circleSelectColor:
                    mSelectColor = ta.getColor(index, Color.WHITE);
                    break;
                case R.styleable.PagePointView_circleUnSelectColor:
                    mUnSelectColor = ta.getColor(index, Color.BLACK);
                    break;
            }
        }
        ta.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int wMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSize = MeasureSpec.getSize(widthMeasureSpec);
        int hMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSize = MeasureSpec.getSize(heightMeasureSpec);
        int viewWidht = 0;
        int viewHeight = 0;
        switch (wMode) {
            case MeasureSpec.EXACTLY:
                viewWidht = wSize;
                break;
            case MeasureSpec.AT_MOST:
                viewWidht = mCircleInterval + getPaddingLeft() + getPaddingRight() + mCircleRadius * 2;
                break;
            case MeasureSpec.UNSPECIFIED:
                viewWidht = wSize;
                break;
        }
        switch (hMode) {
            case MeasureSpec.EXACTLY:
                viewHeight = wSize;
                break;
            case MeasureSpec.AT_MOST:
                viewHeight = getPaddingBottom() + getPaddingTop() +  mCircleRadius * 2;
                break;
            case MeasureSpec.UNSPECIFIED:
                viewHeight = wSize;
                break;
        }
        setMeasuredDimension(resolveSize(viewWidht, widthMeasureSpec), resolveSize(viewHeight, heightMeasureSpec));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidht = w;
        mHeight = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int mViewWidht;
        for (int i = 1; i <= mCircleNumber; i++) {
            if (mSelectIndex == i) {
                mPaint.setColor(mSelectColor);
                canvas.drawCircle((2 * i - 1) * mCircleRadius + mCircleInterval * (i - 1), mCircleRadius, mCircleRadius, mPaint);
                continue;
            }
            mPaint.setColor(mUnSelectColor);
            canvas.drawCircle((2 * i - 1) * mCircleRadius + mCircleInterval * (i - 1), mCircleRadius, mCircleRadius, mPaint);
        }
    }


}

使用注意：必须在使用的布局xml文件的最外层布局中加上chipChildren=“false”否则只会显示选中的点

使用在viewpager的监听中设置选中的点位置

private class PageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrollStateChanged(int position) {

        }

        @Override
        public void onPageScrolled(int position, float arg1, int arg2) {

        }

        @Override
        public void onPageSelected(int position) {
            // 设置底部小点选中状态
            pagePoint.setIndex(position+1);
        }

    }

可以将上面代码封装到自定义PagePointView中这里没有做过多操作，赖，我的原则能用就行封装后面在做