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

原创 2015年07月10日 09:10:21

转载请注明出处: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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 打造万能圆点指示器

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

Android中ViewPager的简单使用(底部圆点)

原文地址:http://blog.csdn.net/tu_bingbing/article/details/8753769    http://blog.csdn.net/tib...

App引导页的实现带圆点指示器

今天把项目上用到的一些自定义控件给拆了,然后来写一些demo目的是强化这方面的知识,先看图 再来看代码。 首先编写attrs文件代码如下: resources> declare...

ViewPager底部圆点指示器

在APP的ViewPager引导页面中, 我们通常可以看到底部有小圆点显示当前是第几页, 我们来试一下这个效果是怎么实现的, 效果图如下: {% cq %} 代码是最为耐心、最能忍耐和最...

Android滚动页面位置指示器:CircleIndicator

Android滚动页面位置指示器:CircleIndicatorCircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器,指示当前页面在总的页面中的位置和前后位置关系,g...

[github高级控件] 带你走近 -> CircleIndicator指示器原点动画切换

分析github上CircleIndicator指示器切换动画,源码下载地址 思路: 1.画n个小圆点排列到布局中 2.再画一个moving小圆,结合view layer 分层呈现在画布中 3...

Android 具有动画的 Viewpager滑动CircleIndicator指示器

1.自定义属性:attrs.xml

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

一个炒鸡好用的 indicator 开源指示器

github 地址: https://github.com/ongakuer/CircleIndicator xml 布局文件

自定义颜色、大小渐变的圆点指示器

源码稍后补上---蛋疼的csdn 首先看布局文件activity_main.xml 布局很简单只有装图片的ViewPager--以及自定义的圆点指示器 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android通用圆点指示器——android-Universal-CircleIndicator
举报原因:
原因补充:

(最多只允许输入30个字)