Android Universal dot indicator-android-Universal-CircleIndicator, android dot indicator

Android Universal dot indicator-android-Universal-CircleIndicator, android dot indicator

Reprinted please indicate the source: http://blog.csdn.net/footballclub/

Preface

Recently, a dot indicator needs to be added to the project. When switching pages, the open-source project viewflow and viewpageIndicator are available on the Internet, both of which have good results, but unfortunately, they all have limitations. One is that they can only be used for viewflow and the other can only be used for viewpage. In my project, page switching uses custom views, the dot indicators in the above two projects cannot be used directly, so viewflow is used as a simple and easy-to-use General dot indicator.

Usage Introduction

@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState );...... gridview. setOnPageChangedListener (new OnPageChangedListener () {@ Override public void onPageChanged (PagedDragDropGrid sender, int newPageNumber) {// call this method to change the selected indicator when switching pages. setCurrentPage (newPageNumber) ;}}); // set the total number of pages, indicator. initData (adapter. pageCount (), 0); // set the indicator of the current page. set CurrentPage (0); // Note: If you need to change pagecount when switching the page, both initData and setCurrentPage can be used. }

After following the above steps, you can use it normally. If you want to customize the dot size, the spacing between the dots, and the color of the selected and unselected dots, please continue.

Detailed usage

Configurable attributes:

<Declare-styleable name = "XCircleIndicator"> <! -- The color of the selected dot --> <attr name = "fillColor" format = "color"/> <! -- The color of the unselected dot --> <attr name = "strokeColor" format = "color"/> <! -- The dot size --> <attr name = "radius" format = "dimension"/> <! -- The size of the spacing between dots --> <attr name = "circleInterval" format = "dimension"/> </declare-styleable>

Usage of attributes in 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" />

Of course, setting parameters is not limited to xml configuration, but can also be dynamically set in java code.

/**     * 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();    }

You can see that view is called after the parameter is changed. invalidate () method. The main function of invalidate () is to request the View tree for re-painting, and then callback onMeasure (), onLayout () in the Custom view in sequence () and onDraw (). We need to complete the measurement in onMeasure and complete the final drawing in 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;    }

All of the above are described. If you are interested in android-Universal-CircleIndicator, you can follow android-Universal-CircleIndicator on github.

You can also click here to download

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.