自定义Indicator轮播图--binbinyang

先上效果图

说说大概思路
下面4个空心圆是画笔画出来的,

实心圆是一个 也是画笔画的,

然后结合viewpager

上自定义 控件代码

public class Indicator extends View {
    private int mBgColor = Color.BLUE;//背景色的圆的画笔
    private int mForeColor = Color.RED;//前景色的圆的画笔
    private int mNumber = 4;//Indicator数量
    private int mRadius = 10;//圆的半径
    private Paint mForePaint;//前景色圆的画笔
    private Paint mBgPaint;//背景色的画笔
    /**
     * 移动的偏移量
     **/
    private float mOffset;

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

    public Indicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Indicator);
        mNumber = typedArray.getInteger(R.styleable.Indicator_setNumber, mNumber);
    }

    /***
     * 设置偏移量的方法
     * @param position
     * @param positionOffset
     */
    public void setOffset(int position, float positionOffset) {
        position %= mNumber;
        mOffset = position * 3 * mRadius + positionOffset * 3 * mRadius;
        Log.e("mOffset ", mOffset + " ");
        //重绘
        invalidate();
    }

    private void initPaint() {
        mForePaint = new Paint();
        mForePaint.setAntiAlias(true);
        mForePaint.setStyle(Paint.Style.FILL);
        mForePaint.setColor(mForeColor);
        mForePaint.setStrokeWidth(2);
        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        mBgPaint.setStyle(Paint.Style.STROKE);
        mBgPaint.setColor(mBgColor);
        mBgPaint.setStrokeWidth(2);
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < mNumber; i++) {
            canvas.drawCircle(60 + i * mRadius * 3, 60, mRadius, mBgPaint);
        }

        //这里大于90,是因为前景色画笔mForePaint如果到了第4个的时候在往右滑动,是会出现可以滑动情况的.直接设置为0,就是回到第一个,从此循环
        if (mOffset > 90) {
            mOffset = 0;
        }
        canvas.drawCircle(60 + mOffset, 60, mRadius, mForePaint);
    }
}

public class MainActivity extends AppCompatActivity {
    private List<View> mViews = new ArrayList<>();
    private Indicator mIndicator;
    private int[] imagers = {R.mipmap.a1, R.mipmap.a2, R.mipmap.a3, R.mipmap.a4};
    ImageView mImagView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(new MyPagerAdapter());
        mViewPager.setOnPageChangeListener(new MyChangeListener());
        mIndicator = (Indicator) findViewById(R.id.indicator);
    }

    private class MyChangeListener implements ViewPager.OnPageChangeListener {
        //ViewPager的滚动的

        /***
         * @param position
         * @param positionOffset       偏移的百分比
         * @param positionOffsetPixels 偏移量
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.e("onPageScrolled", "positionOffset<< " + positionOffset + "  positionOffsetPixels<<<" + positionOffsetPixels);
            mIndicator.setOffset(position, positionOffset);
        }

        //ViewPager选中
        @Override
        public void onPageSelected(int position) {
        }

        //ViewPager滑动状态改变
        @Override
        public void onPageScrollStateChanged(int state) {
        }
    }

    private void initData() {
        for (   int i = 0; i < 4; i++) {
            View inflater = getLayoutInflater().inflate(R.layout.pager_item, null);
            mImagView = (ImageView) inflater.findViewById(R.id.iv_guide);
            mImagView.setImageResource(imagers[i]);
            mViews.add(inflater);
        }


    }

    class MyPagerAdapter extends PagerAdapter {
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            position %= 4;
            container.removeView(mViews.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container,   int   position) {
            position %= 4;
            View view = mViews.get(position);
            container.addView(view);
            return view;
        }
        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp">

    </android.support.v4.view.ViewPager>

    <com.yangbin.indicatordiy.Indicator
        android:id="@+id/indicator"
        android:layout_width="160dp"
        android:layout_height="60dp"
        android:layout_alignBottom="@+id/viewpager"
        android:layout_centerHorizontal="true"/>



</RelativeLayout>