Android自定义View--仿驾考宝典显示分数效果

其他 2018-05-06 19:05:43 阅读次数: 3

好久没有写自定义View相关的内容，好多东西都忘记干净了，乘着这有时间，赶紧复习下。渐渐发现，一些炫酷的view效果，通过需要自定义view和属性动画结合在一起，才能更容易的实现。

实现的效果图如下：

效果图

所用的知识有：
（1）自定义View中的 path ,主要用来绘制指示块。
（2）属性动画-ValueAnimator,并设置属性动画的监听器。
（3）根据属性动画是否结束的标志，决定是否绘制分数对应的描述文本内容。

实现步骤：

  1. 继承自View,在构造函数中获取自定义属性和初始化操作（初始化画笔）
private void obtainAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ScoreView);
        lineLength = typedArray.getDimension(R.styleable.ScoreView_lineLength, dp2Px(10));
        lineColor = typedArray.getColor(R.styleable.ScoreView_lineColor, Color.WHITE);
        typedArray.recycle();
    }

    private void init() {
        arrowPaint = createPaint(Color.WHITE, 0, Paint.Style.FILL, 0);
        arcPaint = createPaint(lineColor, dp2Px(1), Paint.Style.STROKE, 0);
        bgPaint = createPaint(lineColor, dp2Px(1), Paint.Style.FILL, 0);
        reachProgressPaint = createPaint(Color.WHITE, dp2Px(1), Paint.Style.FILL, 0);
        arcReachPaint = createPaint(Color.WHITE, dp2Px(1), Paint.Style.STROKE, 0);
        scoreTextPaint = createPaint(Color.WHITE, 0, Paint.Style.STROKE, dp2Px(26));
        descTextPaint = createPaint(Color.WHITE, 0, Paint.Style.STROKE, dp2Px(16));
    }

其中初始化画笔抽取到一个函数中：

private Paint createPaint(int color, int strokeWidth, Paint.Style style, float textSize) {
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(color);
        paint.setStrokeWidth(strokeWidth);
        paint.setStyle(style);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setTextSize(textSize);
        return paint;
    }
  1. 覆盖 onSizeChanged() ,得到控件的宽高，并决定要绘制区域的大小（控件默认设置了内边距）
 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;
        halfView = Math.min(viewWidth, viewHeight) / 2;   //宽度或高度中最小值的一半，即决定圆心的位置。
        radius = (Math.min(viewWidth, viewHeight) - 2 * DEFAULT_PADDING) / 2;  //绘制园的半径是宽高除去默认内边距
    }
  1. 核心绘制代码，覆盖onDraw()方法，根据动画是否结束的标志，决定是否绘制分数对应的文本。
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawArcBackground(canvas);
        drawArcProgress(canvas);
        drawScoreText(canvas);
        if (isAnimEnd) {
            drawDescText(canvas);
        }
    }

（1）绘制圆弧背景和灰色刻度背景。

 private void drawArcBackground(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        //绘制圆弧
        RectF rectF = new RectF(dp2Px(5) - radius, dp2Px(5) - radius, radius - dp2Px(5), radius - dp2Px(5));
        canvas.drawArc(rectF, 120, 300, false, arcPaint);
        //绘制刻度线
        canvas.rotate(30);
        for (int i = 0; i < 100; i++) {
            canvas.drawLine(0, radius - dp2Px(15), 0,
                    radius - dp2Px(15) - lineLength,
                    bgPaint);
            canvas.rotate(degree);
        }
        canvas.restore();
    }

（2） 绘制刻度，根据ValueAnimator进行动画的当前值curValue，来动态改变绘制指示块和已达进度圆弧，从而实现从0开始移动到设定值的动画效果。

private void drawArcProgress(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        //绘制圆弧
        RectF rectF = new RectF(dp2Px(5) - radius, dp2Px(5) - radius, radius - dp2Px(5), radius - dp2Px(5));
        canvas.drawArc(rectF, 120, curValue * degree, false, arcReachPaint);

        //绘制指示方块，方块是从0开始移动某一个位置的
        canvas.rotate(30 + degree * curValue);
        Path path = new Path();
        path.moveTo(dp2Px(5), radius);
        path.lineTo(dp2Px(5), radius - dp2Px(10));
        path.lineTo(0, radius - dp2Px(15));
        path.lineTo(-dp2Px(5), radius - dp2Px(10));
        path.lineTo(-dp2Px(5), radius);
        path.close();
        canvas.drawPath(path, arrowPaint);

        //绘制已经达到的刻度
        canvas.restore();
        canvas.save();
        canvas.translate(halfView, halfView);
        canvas.rotate(30);
        for (int i = 0; i < curValue; i++) {
            canvas.drawLine(0, radius - dp2Px(15), 0,
                    radius - dp2Px(15) - lineLength,
                    reachProgressPaint);
            canvas.rotate(degree);
        }
        canvas.restore();
    }

（3） 绘制分数文本。

private void drawScoreText(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        String scoreText = curValue + "分";
        float textLength = scoreTextPaint.measureText(scoreText);
        canvas.drawText(scoreText, -textLength / 2, 0, scoreTextPaint);
        canvas.restore();
    }

（4） 动画结束时，绘制最终分数对应的提示信息，该信息只有在动画结束后，才会显示出来。

private void drawDescText(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        String desc = "";
        if (curValue >= 90) {
            desc = "车神";
        } else {
            desc = "马路杀手";
        }
        float descLength = descTextPaint.measureText(desc);
        canvas.drawText(desc, -descLength / 2, dp2Px(30), descTextPaint);
        canvas.restore();
        isAnimEnd = false; // isAnimEnd置为false,防止再次点击start时，就显示动画结束时才能显示的内容
    }

（5）提供对外设置最大值的接口，决定最后的分数。

 /**
     * 对外提供的接口，用于设置进度的最大值
     *
     * @param value
     */
    public void setMaxValue(int value) {
        if (valueAnimator == null) {
            valueAnimator = ValueAnimator.ofInt(0, value);
        }
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setDuration(30 * value);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                curValue = (int) animation.getAnimatedValue();
                Log.i("debug", "curValue=" + curValue);
                invalidate();
            }
        });
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                isAnimEnd = true;  //标记动画结束
                Log.i("debug", "onAnimationEnd");
                Log.i("debug", "onAnimationEnd curValue = " + curValue);
                invalidate();
            }
        });
        valueAnimator.start();
    }

完整代码：

public class ScoreView extends View {

    private final int DEFAULT_PADDING = dp2Px(5);

    private final int DEFAULT_WIDTH = dp2Px(200);   //默认宽度为200dp

    private final int DEFAULT_HEIGHT = dp2Px(200);  //默认高度为200dp

    private int viewWidth;  //View宽度

    private int viewHeight;   //View高度

    private int halfView;  //view宽度或高度的一半

    private int radius;   //绘制圆形区域的半径

    private Paint bgPaint;

    private Paint arrowPaint;  //指示块画笔

    private Paint arcPaint;  //圆弧画笔

    private Paint arcReachPaint;  //圆弧画笔

    private Paint reachProgressPaint;  //已达刻度

    private Paint scoreTextPaint;   //绘制分数文本

    private Paint descTextPaint;   //绘制描述文本

    private float degree = 3f;  //相邻刻度之间夹角大小为3度,角度制，不是弧度制

    private float lineLength;

    private int lineColor;

    private int curValue;   //动画进行的当前值

    private ValueAnimator valueAnimator;

    private boolean isAnimEnd = false;

    public ScoreView(Context context) {
        this(context, null);
    }

    public ScoreView(Context context, AttributeSet attrs) {
        super(context, attrs);
        obtainAttrs(context, attrs);
        init();
    }

    private void obtainAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ScoreView);
        lineLength = typedArray.getDimension(R.styleable.ScoreView_lineLength, dp2Px(10));
        lineColor = typedArray.getColor(R.styleable.ScoreView_lineColor, Color.WHITE);
        typedArray.recycle();
    }

    private void init() {
        arrowPaint = createPaint(Color.WHITE, 0, Paint.Style.FILL, 0);
        arcPaint = createPaint(lineColor, dp2Px(1), Paint.Style.STROKE, 0);
        bgPaint = createPaint(lineColor, dp2Px(1), Paint.Style.FILL, 0);
        reachProgressPaint = createPaint(Color.WHITE, dp2Px(1), Paint.Style.FILL, 0);
        arcReachPaint = createPaint(Color.WHITE, dp2Px(1), Paint.Style.STROKE, 0);
        scoreTextPaint = createPaint(Color.WHITE, 0, Paint.Style.STROKE, dp2Px(26));
        descTextPaint = createPaint(Color.WHITE, 0, Paint.Style.STROKE, dp2Px(16));
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(measureSize(widthMeasureSpec, DEFAULT_WIDTH), measureSize(heightMeasureSpec, DEFAULT_HEIGHT));
    }

    private int measureSize(int measureSpec, int defaultSize) {
        int measureSize = defaultSize;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            measureSize = size;
        } else {
            if (mode == MeasureSpec.AT_MOST) {
                measureSize = Math.min(defaultSize, size);
            }
        }
        return measureSize;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        viewWidth = w;
        viewHeight = h;
        halfView = Math.min(viewWidth, viewHeight) / 2;   //宽度或高度中最小值的一半，即圆形的位置
        radius = (Math.min(viewWidth, viewHeight) - 2 * DEFAULT_PADDING) / 2;  //半径是宽高除去默认内边距的
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawArcBackground(canvas);
        drawArcProgress(canvas);
        drawScoreText(canvas);
        if (isAnimEnd) {
            drawDescText(canvas);
        }
    }

    private void drawScoreText(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        String scoreText = curValue + "分";
        float textLength = scoreTextPaint.measureText(scoreText);
        canvas.drawText(scoreText, -textLength / 2, 0, scoreTextPaint);
        canvas.restore();
    }

    /**
     * 绘制文本
     *
     * @param canvas
     */
    private void drawDescText(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        String desc = "";
        if (curValue >= 90) {
            desc = "车神";
        } else {
            desc = "马路杀手";
        }
        float descLength = descTextPaint.measureText(desc);
        canvas.drawText(desc, -descLength / 2, dp2Px(30), descTextPaint);
        canvas.restore();
        isAnimEnd = false; // isAnimEnd置为false,防止再次点击start时，就显示动画结束时才能显示的内容
    }

    /**
     * 绘制进度
     *
     * @param canvas
     */
    private void drawArcProgress(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        //绘制圆弧
        RectF rectF = new RectF(dp2Px(5) - radius, dp2Px(5) - radius, radius - dp2Px(5), radius - dp2Px(5));
        canvas.drawArc(rectF, 120, curValue * degree, false, arcReachPaint);

        //绘制指示方块，方块是从0开始移动某一个位置的
        canvas.rotate(30 + degree * curValue);
        Path path = new Path();
        path.moveTo(dp2Px(5), radius);
        path.lineTo(dp2Px(5), radius - dp2Px(10));
        path.lineTo(0, radius - dp2Px(15));
        path.lineTo(-dp2Px(5), radius - dp2Px(10));
        path.lineTo(-dp2Px(5), radius);
        path.close();
        canvas.drawPath(path, arrowPaint);

        //绘制已经达到的刻度
        canvas.restore();
        canvas.save();
        canvas.translate(halfView, halfView);
        canvas.rotate(30);
        for (int i = 0; i < curValue; i++) {
            canvas.drawLine(0, radius - dp2Px(15), 0,
                    radius - dp2Px(15) - lineLength,
                    reachProgressPaint);
            canvas.rotate(degree);
        }
        canvas.restore();
    }

    /**
     * 绘制背景
     *
     * @param canvas
     */
    private void drawArcBackground(Canvas canvas) {
        canvas.save();
        canvas.translate(halfView, halfView);
        //绘制圆弧
        RectF rectF = new RectF(dp2Px(5) - radius, dp2Px(5) - radius, radius - dp2Px(5), radius - dp2Px(5));
        canvas.drawArc(rectF, 120, 300, false, arcPaint);
        //绘制刻度线
        canvas.rotate(30);
        for (int i = 0; i < 100; i++) {
            canvas.drawLine(0, radius - dp2Px(15), 0,
                    radius - dp2Px(15) - lineLength,
                    bgPaint);
            canvas.rotate(degree);
        }
        canvas.restore();
    }

    /**
     * 创建画笔
     *
     * @param color
     * @param strokeWidth
     * @param style
     * @param textSize
     * @return
     */
    private Paint createPaint(int color, int strokeWidth, Paint.Style style, float textSize) {
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(color);
        paint.setStrokeWidth(strokeWidth);
        paint.setStyle(style);
        paint.setStrokeJoin(Paint.Join.ROUND);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setTextSize(textSize);
        return paint;
    }

    /**
     * dp转换成px
     *
     * @param dpValue
     * @return
     */
    private int dp2Px(int dpValue) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpValue, getResources().getDisplayMetrics());
    }


    /**
     * 对外提供的接口，用于设置进度的最大值
     *
     * @param value
     */
    public void setMaxValue(int value) {
        if (valueAnimator == null) {
            valueAnimator = ValueAnimator.ofInt(0, value);
        }
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setDuration(30 * value);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                curValue = (int) animation.getAnimatedValue();
                Log.i("debug", "curValue=" + curValue);
                invalidate();
            }
        });
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                isAnimEnd = true;  //标记动画结束
                Log.i("debug", "onAnimationEnd");
                Log.i("debug", "onAnimationEnd curValue = " + curValue);
                invalidate();
            }
        });
        valueAnimator.start();
    }


}

猜你喜欢

转载自blog.csdn.net/xingxtao/article/details/53486833
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022