自定义 View 之炫酷的成绩展示界面

作者 | Android_gen

地址 | http://www.jianshu.com/p/03022c1306fb

声明 | 本文是 Android_gen 原创，已获授权发布，未经原作者允许请勿转载

前言

前几天帮助我们移动组的一个小伙伴绘制界面，遇到了一个成绩展示界面，作为菜鸟的我顿时感觉天都塌陷下来了，就立马焉了，幸好我有我的绝招，当然是 baidu,google 了，终于皇天不负有心人，让我给找到了解决.的方法，自定义View来实现。先上 UI 妹子给的设计图，再看我写完之后的效果图。

截屏工具不是太好，将就看看吧！！！
看到这里，我们就要实现它了，待我一步一步的去搞定它吧！！！

思路

首先，我们得有自己的思路啊，就像写作文一样，先要弄清楚自己的中心思想，然后在一步一步的去完成它。

1.自定义属性，如进度条的宽度、颜色，字体的大小、颜色等。
2.测量宽度和高度
3.画出我们心目中的效果图（当然不是用笔在笔记本上画了），我们采用 Paint 在 Canvas 上来绘制界面。
4.设置进度，相当于画龙点睛的作用了，使我们画出的静态页面动起来。

好了，下面我们将围绕我们的思路来一步一步的去实现它了。

实现过程

1.自定义属性值

在 value 文件夹下面新建 attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="circle_progress_view">
        <!--进度条的宽度-->
        <attr name="progress_paint_width" format="dimension"></attr>
        <!--进度条颜色-->
        <attr name="progress_paint_color" format="color"></attr>
        <!--字体颜色-->
        <attr name="progress_text_color_top" format="color"></attr>
        <!--字体大小-->
        <attr name="progress_text_size_top" format="dimension"></attr>
        <!--字体颜色-->
        <attr name="progress_text_color_bottom" format="color"></attr>
        <!--字体大小-->
        <attr name="progress_text_size_bottom" format="dimension"></attr>
    </declare-styleable>
</resources>

然后在自定义属性的地方我们去获取并且设置他们的默认值。

       /**
         * 获取自定的属性
         */
        TypedArray typedArray = getContext()
                .obtainStyledAttributes(attrs, R.styleable.circle_progress_view);
        mPaintWidth = typedArray
                .getDimension(R.styleable.circle_progress_view_progress_paint_width,
                        dip2px(context, 10));
        mTextSizeTop = typedArray
                .getDimension(R.styleable.circle_progress_view_progress_text_size_top,
                        dip2px(context, 18));
        mPaintColor = typedArray.getColor(R.styleable.circle_progress_view_progress_paint_color,
                mPaintColor);
        mTextColorTop = typedArray.getColor(R.styleable.circle_progress_view_progress_text_color_top,
                mTextColorTop);
        mTextSizeBottom = typedArray
                .getDimension(R.styleable.circle_progress_view_progress_text_size_bottom,
                        dip2px(context, 18));
        mTextColorBottom = typedArray
                .getColor(R.styleable.circle_progress_view_progress_text_color_bottom,
                        mTextColorTop);
        typedArray.recycle();//释放
        mPaintOut = new Paint();
        mPaintOut.setAntiAlias(true);
        mPaintOut.setColor(getResources().getColor(R.color.paint_out));
        mPaintOut.setStrokeWidth(mPaintWidth);
        /**
         * 画笔样式
         *
         */
        mPaintOut.setStyle(Paint.Style.STROKE);
        /**
         * 笔刷的样式
         * Paint.Cap.ROUND 圆形
         * Paint.Cap.SQUARE 方型
         */
        mPaintOut.setStrokeCap(Paint.Cap.ROUND);
        mPaintCurrent = new Paint();
        mPaintCurrent.setAntiAlias(true);
        mPaintCurrent.setColor(mPaintColor);
        mPaintCurrent.setStrokeWidth(mPaintWidth);
        mPaintCurrent.setStyle(Paint.Style.STROKE);
        mPaintCurrent.setStrokeCap(Paint.Cap.ROUND);
        mPaintTextTop = new Paint();
        mPaintTextTop.setAntiAlias(true);
        mPaintTextTop.setColor(mTextColorTop);
        mPaintTextTop.setStyle(Paint.Style.STROKE);
        mPaintTextTop.setTextSize(mTextSizeTop);
        mPaintTextBottom = new Paint();
        mPaintTextBottom.setAntiAlias(true);
        mPaintTextBottom.setColor(mTextColorBottom);
        mPaintTextBottom.setStyle(Paint.Style.STROKE);
        mPaintTextBottom.setTextSize(mTextSizeBottom);

2.测量

测量是在 onMeasure（int widthMeasureSpec， int heightMeasureSpec）方法里面来执行的

onMeasure() 方法的作用就是测量 View 需要多大的空间，就是宽和高，本文中因为我们要绘制一个圆，所以我们需要一个正方形，那么我们就指定宽度和高度一致。

int width = MeasureSpec.getSize( widthMeasureSpec );
int height= MeasureSpec.getSize( heightMeasureSpec );
int size = width > height ? height : width;
setMeasuredDimension( size , size);

3.绘制出想要的效果图（背景弧和展示弧，展示字体）

（1）绘制操作是在 onDraw（Canvas canvas）方法中来执行的。

（2）绘制弧我们用 drawArc(RectF oval, float startAngle, floatsweepAngle,

boolean useCenter,Paint paint)方法

oval :指定圆弧的外轮廓矩形区域。
 startAngle: 圆弧起始角度，单位为度。从180°为起始点
 sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。
 useCenter:  如果为True时，在绘制圆弧时将圆心包括在内，
             通常用来绘制扇形。如果false会将圆弧的两端用直线连接
 paint: 绘制圆弧的画板属性，如颜色，是否填充等
 public void drawArc(RectF oval, float startAngle, floatsweepAngle,
                                 boolean useCenter,Paint paint)

（3）我们先确定圆弧的外轮廓矩形区域的大小

RectF rectF = new RectF(mPaintWidth / 2,
                mPaintWidth / 2,
                getWidth() - mPaintWidth / 2,
                getHeight() - mPaintWidth / 2);

准备工作已经做完了，下面就让我们愉快的里绘制圆弧吧！！！

3.1背景弧

因为我们绘制的是一段弧线，故让它从 135°开始，顺时针绘制到270°时停止，正好就是我们需要的那段弧线。

canvas.drawArc(rectF, 135, 270, false, mPaintOut);

3.2 当前进度弧

//获取当前的进度所对应的角度
 float currentAngle = mCurrent * sweepAngle / totalScore;
 canvas.drawArc(rectF, startAngle, currentAngle, false, mPaintCurrent);

3.3 两段文字

在绘制文字之前，我们需要搞清楚绘制文字的一些知识，先看看drawText(String text, float x, float y,Paint paint) 方法吧

// 参数分别为 (文本 基线x 基线y 画笔)

canvas.drawText(String text,  float x, float y,Paint paint);

看到这里想必很多人都会问，基线是个神马东东，刚开始我也不太懂，直到我看了这位大神的一篇文章我才恍然大悟了http://blog.csdn.net/harvic880925/article/details/50423762 不懂得小伙伴可以移步到这里去看看，搞清楚基线是个什么鬼之后就好办了。

首先，我们要把文字放到我们绘制的圆弧的中心位置，即确认基线的 X和 Y 的坐标值。

X值：外轮廓矩形的宽度的一半减去文字宽度的一半。

Y值：外轮廓矩形的高度的一半减去文字高度的一半。

上代码：

        String text1 = mCurrent + "分";
        String text2 = "本次考试成绩";
        /**
         * 半径
         */
        float radius = (getWidth() - mPaintWidth) / 2;
        /**
         * 圆心和弦的距离
         */
        float dis = (float) Math.sqrt((radius * radius) / 2);
        /**
         * 绘制顶部文字
         */
        //测量文字的宽度
        float textWidth1 = mPaintTextTop.measureText(text1, 0, text1.length());
        //测量文字的高度
        float textHeight1 = (float) getTxtHeight(mPaintTextTop);
        float textHeight2 = (float) getTxtHeight(mPaintTextBottom);
        /**
         * 基线x的坐标即为：
         * view宽度的一半减去文字宽度的一半
         */
        float dx1 = getWidth() / 2 - textWidth1 / 2;
        /**
         * 基线y的坐标为：
         * view高度的一半减去文字高度的一半
         */
        float dy1 = getHeight() / 2 - textHeight1 / 2 + dis - textHeight2;
        /**
         * 绘制底部文字
         */
        float textWidth2 = mPaintTextBottom.measureText(text2, 0, text2.length());
        float dx2 = getWidth() / 2 - textWidth2 / 2;
        float dy2 = getHeight() / 2 - textHeight2 / 2 + dis;
        canvas.drawText(text1, dx1, dy1, mPaintTextTop);
        canvas.drawText(text2, dx2, dy2, mPaintTextBottom);

这样我们才是把文字给放到圆弧的中心位置，可是效果图上面的底部文字是在弦上的，所以我们还的计算圆心到弦的距离（这里就要运用初中数学知识了，赶紧恶补知识吧！）
（1）确定圆的半径，由以上可知，半径为外轮廓矩形的宽度的一半（我们是在一个正方形中来绘制圆弧的）。

（2）由于我们切掉的弧的角度为90°，则可以根据勾股定理来计算出圆心和弦的距离，这样我们就可以规定文字的位置了。

文字一的位置：半径加上计算出的距离减去文字二的高度在减去文字一高度的一半。
文字二的位置：半径加上计算出的距离减去文字二高度的一半。

如上，我们就让文字按照我们计算好的位置显示了。

4.添加动画效果

       /**
         * 进度条从0到指定数字的动画
         * 除了startAnimator1()方法中用的ValueAnimator.ofInt()，我们还有
         * ofFloat()、ofObject()这些生成器的方法;
         * 我们可以通过ofObject()去实现自定义的数值生成器
         */
        ValueAnimator animator = ValueAnimator.ofFloat(0, currentScore);
        animator.setDuration(speed);
        /**
         *  Interpolators  插值器，用来控制具体数值的变化规律
         *  LinearInterpolator  线性
         */
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                /**
                 * 通过这样一个监听事件，我们就可以获取
                 * 到ValueAnimator每一步所产生的值。
                 *
                 * 通过调用getAnimatedValue()获取到每个时间因子所产生的Value。
                 * */
                float current = (float) valueAnimator.getAnimatedValue();
                view.setmCurrent((int) current);
            }
        });
        animator.start();

到这里，所有的绘制工作已经完成，来欣赏一下我们的劳动成果吧，哈哈哈。

activity_layout.xml

<com.gifts.circleprogressproject.ProgressView
        android:id="@+id/circleProgress"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        app:progress_paint_width="30dp"
        app:progress_text_color_bottom="#000000"
        app:progress_text_color_top="@color/paint_current"
        app:progress_text_size_bottom="20dp"
        app:progress_text_size_top="40dp">
</com.gifts.circleprogressproject.ProgressView>

MainActivity.java

private void initView() {
        view.setTotalScore(totalScore);
        /**
         * 进度条从0到指定数字的动画
         * 除了startAnimator1()方法中用的ValueAnimator.ofInt()，我们还有
         * ofFloat()、ofObject()这些生成器的方法;
         * 我们可以通过ofObject()去实现自定义的数值生成器
         */
        ValueAnimator animator = ValueAnimator.ofFloat(0, currentScore);
        animator.setDuration(speed);
        /**
         *  Interpolators  插值器，用来控制具体数值的变化规律
         *  LinearInterpolator  线性
         */
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                /**
                 * 通过这样一个监听事件，我们就可以获取
                 * 到ValueAnimator每一步所产生的值。
                 *
                 * 通过调用getAnimatedValue()获取到每个时间因子所产生的Value。
                 * */
                float current = (float) valueAnimator.getAnimatedValue();
                view.setmCurrent((int) current);
            }
        });
        animator.start();
    }

地址

GitHub传送门：

https://github.com/liuxinggen/CircleProgressProject

与之相关

1 自定义 Drawable 实现灵动的红鲤鱼动画（上篇）

2 [Android] 自定义 View 之仿 QQ 讨论组头像

3 自定义圆环百分占比 view （label 文字支持自动换行和设置显示行数）

END