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 邮箱名 [e-mail]
* @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.效果图：