Android 打造万能圆点指示器

1.首先自定义圆点的属性，动态显示，比较方便修改圆点的颜色,取名为：attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="XCircleIndicator">
        <!-- 被选中圆点的颜色 -->
        <attr name="fillColor" format="color" />
        <!-- 未选中圆点的颜色 -->
        <attr name="strokeColor" format="color" />
        <!-- 圆点的大小 -->
        <attr name="radius" format="dimension" />
        <!-- 圆点间间距的大小 -->
        <attr name="circleInterval" format="dimension" />
    </declare-styleable>
</resources>

2.自定义Xcircleindicator继承自View
/**
* @author 作者名 易皇星
* @email 邮箱名 15095887072@163.com
* @time 2016-4-11 2016-05
* @TODO 缘分是本书，翻得不经意会错过，读得太认真会流泪！
*/

public class Xcircleindicator extends View {
    private int radius = 4;
    private final Paint mPaintStroke = new Paint(Paint.ANTI_ALIAS_FLAG);
    private final Paint mPaintFill = new Paint(Paint.ANTI_ALIAS_FLAG);
    private int currentScroll = 0;
    private int flowWidth = 0;
    private int pageTotalCount = 1;
    private int currentPage = 0;
    private int circleInterval = radius;


    public Xcircleindicator(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        initColors(0xFFFFFFFF, 0xFFFFFFFF);
    }


    public Xcircleindicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        // Retrieve styles attributs
                TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.XCircleIndicator);

                try {
                    // Retrieve the colors to be used for this view and apply them.
                    int fillColor = a.getColor(R.styleable.XCircleIndicator_fillColor,
                            0xFFFFFFFF);
                    int strokeColor = a.getColor(
                            R.styleable.XCircleIndicator_strokeColor, 0xFFFFFFFF);
                    // Retrieve the radius
                    radius = (int) a.getDimension(R.styleable.XCircleIndicator_radius,
                            radius);
                    circleInterval = (int) a.getDimension(
                            R.styleable.XCircleIndicator_circleInterval, radius);

                    initColors(fillColor, strokeColor);
                } catch (Exception e) {
                    e.printStackTrace();
                } finally {
                    a.recycle();
                }

    }
//设置当前应显示圆点的总数
    public void initData(int count, int contentWidth) {
        this.pageTotalCount = count;
        this.flowWidth = contentWidth;
        invalidate();
    }
//设置当前圆点
    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
        invalidate();
    }


    public void setPageTotalCount(int pageTotalCount) {
        this.pageTotalCount = pageTotalCount;
        invalidate();
    }

    private void initColors(int fillColor, int strokeColor) {
        mPaintStroke.setStyle(Style.STROKE);
        mPaintStroke.setColor(strokeColor);
        mPaintFill.setStyle(Style.FILL);
        mPaintFill.setColor(fillColor);
    }

//设置 被选中圆点的颜色
    public void setFillColor(int color) {
        mPaintFill.setColor(color);
        invalidate();
    }

//设置  未选中圆点的颜色
    public void setStrokeColor(int color) {
        mPaintStroke.setColor(color);
        invalidate();
    }
// 圆点间间距的大小
    public void setCircleInterval(int circleInterval) {
        this.circleInterval = circleInterval;
        invalidate();
    }
// 圆点的大小 
    public void setRadius(int radius) {
        this.radius = radius;
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(measureWidth(widthMeasureSpec),
                measureHeight(heightMeasureSpec));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Draw stroked circles
        for (int iLoop = 0; iLoop < pageTotalCount; iLoop++) {
            canvas.drawCircle(getPaddingLeft() + radius
                    + (iLoop * (2 * radius + circleInterval)), getPaddingTop()
                    + radius, radius, mPaintStroke);
        }
        int cx = 0;
        cx = (2 * radius + circleInterval) * currentPage;
        canvas.drawCircle(getPaddingLeft() + radius + cx, getPaddingTop()
                + radius, radius, mPaintFill);
    }

    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        // We were told how big to be
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else { // Calculate the width according the views count
            result = getPaddingLeft() + getPaddingRight()
                    + (pageTotalCount * 2 * radius) + (pageTotalCount - 1)
                    * circleInterval;
            // Respect AT_MOST value if that was what is called for by
            // measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }


    private int measureHeight(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        // We were told how big to be
        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        }
        // Measure the height
        else {
            result = 2 * radius + getPaddingTop() + getPaddingBottom();
            // Respect AT_MOST value if that was what is called for by
            // measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    public void onScrolled(int h, int v, int oldh, int oldv) {
        currentScroll = h;
        invalidate();
    }





}

3.看看activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:indicator="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <com.example.circleindicator.Xcircleindicator
        android:id="@+id/Xcircleindicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        indicator:circleInterval="10dp"
        indicator:fillColor="#F96A0E"         
        indicator:radius="5dp"
        indicator:strokeColor="#cecece" />

</RelativeLayout>

4.Maintivity

public class MainActivity extends Activity {
    private Xcircleindicator mXcircleindicator;
    List<View>  lisViews=new ArrayList<View>();
    private ViewPager mPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mXcircleindicator=(Xcircleindicator) findViewById(R.id.Xcircleindicator);
        mPager=(ViewPager) findViewById(R.id.ViewPager);
        //添加数据
        lisViews.add(LayoutInflater.from(this).inflate(R.layout.viewpaer_item_one, null));
        lisViews.add(LayoutInflater.from(this).inflate(R.layout.viewpaer_item_two, null));
        lisViews.add(LayoutInflater.from(this).inflate(R.layout.viewpaer_item_three, null));

        ViewPagerAdapter mAdapter=new ViewPagerAdapter(lisViews);
        mPager.setAdapter(mAdapter);

        //设置总共的页数
        mXcircleindicator.initData(lisViews.size(), 0);
                //设置当前的页面
        mXcircleindicator.setCurrentPage(0);
        mPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                mXcircleindicator.setCurrentPage(arg0);

            }

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


            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub

            }
        });
    }

class ViewPagerAdapter extends PagerAdapter{
        private List<View>  lisViews;


       public ViewPagerAdapter(List<View>  lisViews) {
        this.lisViews=lisViews;
    }

    @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return lisViews.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
             return arg0==arg1;//官方提示这样写  
        }


        @Override
        public void destroyItem(View container, int position, Object object) {
            // TODO Auto-generated method stub
             ((ViewPager) container).removeView(lisViews.get(position));//删除页卡  
        }
      //这个方法用来实例化页卡         
        @Override
        public Object instantiateItem(View container, int position) {
              ((ViewGroup) container).addView(lisViews.get(position), 0);//添加页卡  
              return lisViews.get(position);  
        }

}

}

5.效果图：