Android通用圆点指示器——android-Universal-CircleIndicator

转载请注明出处：http://blog.csdn.net/footballclub/

前言

最近项目中需要加一个圆点指示器，在切换页面的时候使用，网上有开源的项目viewflow和viewpageIndicator,这两者都有很好的效果，但遗憾的是都有局限性，一个是只能用于viewflow，另一个只能用在viewpage上面，而我项目中的页面切换用的是自定义View，上面两个项目中的圆点指示器都不能拿来直接用，于是就借鉴viewflow做了一个简单易用的通用圆点指示器。

效果图

用法介绍

简单用法

@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        ......        gridview.setOnPageChangedListener(new OnPageChangedListener() {                        @Override            public void onPageChanged(PagedDragDropGrid sender, int newPageNumber) {                //当页面切换的时候调用此方法改变被选中的圆点                indicator.setCurrentPage(newPageNumber);            }        });        //设置总共的页数        indicator.initData(adapter.pageCount(), 0);        //设置当前的页面        indicator.setCurrentPage(0);        //注：如果需要在切换页面时同时改变pagecount，initData和setCurrentPage可以同时使用。    }

按照上面做了以后就能正常使用了，如果你想定制圆点的大小，圆点间的间距，选中圆点和未选中圆点的颜色，那么请继续往下看吧。

详细用法

可配置的属性：

<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>

属性在xml中的用法：

  <com.andwidget.xcircleindicator.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="@dimen/indicator_bottom_margin"        indicator:circleInterval="@dimen/circleInterval"        indicator:fillColor="#F96A0E"        indicator:radius="@dimen/radius"        indicator:strokeColor="#cecece" />

当然设置参数不会局限于xml配置，也可以在java代码中动态设置

/**     * Sets the fill color     *      * @param color     *            ARGB value for the text     */    public void setFillColor(int color) {        mPaintFill.setColor(color);        invalidate();    }    /**     * Sets the stroke color     *      * @param color     *            ARGB value for the text     */    public void setStrokeColor(int color) {        mPaintStroke.setColor(color);        invalidate();    }    /**     * Sets the circle interval     *      * @param circleInterval     *            unit px     */    public void setCircleInterval(int circleInterval) {        this.circleInterval = circleInterval;        invalidate();    }    /**     * Sets the circle radius     *      * @param circleInterval     *            unit px     */    public void setRadius(int radius) {        this.radius = radius;        invalidate();    }

可以看到，在改变参数以后都调用了view.invalidate()方法，invalidate()函数的主要作用是请求View树进行重绘，然后在我们自定义view中会依次回调onMeasure(),onLayout()和onDraw()。在我们需要在onMeasure中完成测量，并在onDraw中完成了最终的绘制。

@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;        // if (flowWidth != 0) {        // // Draw the filled circle according to the current scroll        // cx = (currentScroll * (2 * radius + radius)) / flowWidth;        // }        cx = (2 * radius + circleInterval) * currentPage;        // The flow width has been upadated yet. Draw the default position        canvas.drawCircle(getPaddingLeft() + radius + cx, getPaddingTop()                + radius, radius, mPaintFill);    }    /**     * Determines the width of this view     *      * @param measureSpec     *            A measureSpec packed into an int     * @return The width of the view, honoring constraints from measureSpec     */    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;    }    /**     * Determines the height of this view     *      * @param measureSpec     *            A measureSpec packed into an int     * @return The height of the view, honoring constraints from measureSpec     */    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;    }

以上就全部介绍完了，如果你对android-Universal-CircleIndicator感兴趣，可以在github上关注android-Universal-CircleIndicator

当然你也可以点此直接下载