Android自定义View数字圆环(一)
来源:互联网 发布:蹭网器淘宝叫什么 编辑:程序博客网 时间:2024/05/29 02:15
先看下最终的效果
开始实现
新建一个DoughnutView继承View
public class DoughnutView extends View { }
先重写onMeasure
方法,为什么要重写onMeasure
方法可以看我的上一篇文章,点这里
/** * 当布局为wrap_content时设置默认长宽 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec)); } private int measure(int origin) { int result = DEFAULT_MIN_WIDTH; int specMode = MeasureSpec.getMode(origin); int specSize = MeasureSpec.getSize(origin); if (specMode == MeasureSpec.EXACTLY) { result = specSize; } else { if (specMode == MeasureSpec.AT_MOST) { result = Math.min(result, specSize); } } return result; }
下面就是最重要的重写onDraw
方法,大致流程如下
画白色圆环(背景),记得改下Activity背景色不然白色圆环看不出来。
//画背景白色圆环 initPaint(); float doughnutWidth = Math.min(width, height) / 2 * 0.15f; paint.setStrokeWidth(doughnutWidth); paint.setStyle(Paint.Style.STROKE); paint.setColor(Color.WHITE); paint.setAntiAlias(true); RectF rectF = new RectF((width > height ? Math.abs(width - height) / 2 : 0) + doughnutWidth / 2, (height > width ? Math.abs(height - width) / 2 : 0) + doughnutWidth / 2, width - (width > height ? Math.abs(width - height) / 2 : 0) - doughnutWidth / 2, height - (height > width ? Math.abs(height - width) / 2 : 0) - doughnutWidth / 2); canvas.drawArc(rectF, 0, 360, false, paint);
画彩色圆环
使用
SweepGradient
来实现圆环渐变的效果,这里有个判断当设置的颜色数组只有一个颜色的时候,直接'setColor',有多个颜色才使用SweepGradient
实现渐变色。这样就能既支持渐变色又支持单色。这里还有一点要注意,
SweepGradient
默认是从3点钟位置开始渐变的,为了能让它从12点钟位置开始渐变所以将画布旋转了-90°。//画彩色圆环 initPaint(); canvas.rotate(-90, width / 2, height / 2); paint.setStrokeWidth(doughnutWidth); paint.setStyle(Paint.Style.STROKE); if (doughnutColors.length > 1) { paint.setShader(new SweepGradient(width / 2, height / 2, doughnutColors, null)); } else { paint.setColor(doughnutColors[0]); } canvas.drawArc(rectF, 0, currentValue, false, paint);
画中间数值的白色背景(只是为了让数值显示更明显一些)
//画中间数值的背景 int fontSize = 50; initPaint(); paint.setStyle(Paint.Style.FILL); paint.setColor(Color.WHITE); canvas.drawCircle(width / 2, height / 2, fontSize * 2, paint);}
画中间数值
//画中间数值 canvas.rotate(90, width / 2, height / 2); initPaint(); paint.setColor(ColorUtils.getCurrentColor(currentValue / 360f, doughnutColors)); paint.setTextSize(fontSize); paint.setTextAlign(Paint.Align.CENTER); float baseLine = height / 2 - (paint.getFontMetrics().descent + paint.getFontMetrics().ascent) / 2; canvas.drawText((int) (currentValue / 360f * 100) + "%", width / 2, baseLine, paint);
这里有两点比较坑:
数值的颜色
要实现的效果是让数值的颜色是跟彩色圆环终点的颜色是一样的。寻寻觅觅很久也没有找到获取
SweepGradient
渲染到某一个角度时颜色的方法=_=最终花了差不多半天时间写了个颜色渐变算法,代码如下:
/** * 颜色渐变算法 * 获取某个百分比下的渐变颜色值 * * @param percent * @param colors * @return */ public static int getCurrentColor(float percent, int[] colors) { float[][] f = new float[colors.length][3]; for (int i = 0; i < colors.length; i++) { f[i][0] = (colors[i] & 0xff0000) >> 16; f[i][1] = (colors[i] & 0x00ff00) >> 8; f[i][2] = (colors[i] & 0x0000ff); } float[] result = new float[3]; for (int i = 0; i < 3; i++) { for (int j = 0; j < f.length; j++) { if (f.length == 1 || percent == j / (f.length - 1f)) { result = f[j]; } else { if (percent > j / (f.length - 1f) && percent < (j + 1f) / (f.length - 1)) { result[i] = f[j][i] - (f[j][i] - f[j + 1][i]) * (percent - j / (f.length - 1f)) * (f.length - 1f); } } } } return Color.rgb((int) result[0], (int) result[1], (int) result[2]); }
数值居中对齐问题
drawText
是根据baseLine来定位的。具体可以看下下面两篇文章的分析:文章一、文章二。数字跟文字字母的居中方式可能还略有不同。
动画效果的实现
先上代码:
public void setValue(float value) {ValueAnimator valueAnimator = ValueAnimator.ofFloat(currentValue, value);valueAnimator.setDuration(300);valueAnimator.setInterpolator(new Interpolator() { @Override public float getInterpolation(float v) { return 1-(1-v)*(1-v)*(1-v); }});valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { currentValue = (float) valueAnimator.getAnimatedValue(); invalidate(); }});valueAnimator.start();}
使用ValueAnimator
来实现动画效果。还可以设置不同的插值器来实现不同的动画效果:
valueAnimator.setInterpolator(new AccelerateInterpolator());//加速 valueAnimator.setInterpolator(new DecelerateInterpolator());//减速 valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());//加速减速 valueAnimator.setInterpolator(new LinearInterpolator());//云速
常用插值器介绍可以看这篇文章。
当然也可以自己实现一个简单的插值器:
valueAnimator.setInterpolator(new Interpolator() { @Override public float getInterpolation(float v) { return 1-(1-v)*(1-v)*(1-v); }});
全部测试代码下载地址:
https://github.com/hellsam/DoughnutDemo_Android
阅读全文
0 0
- Android自定义View数字圆环(一)
- Android自定义View数字圆环(二)
- Android 自定义数字圆环
- Android自定义View:圆环带数字百分比的进度条
- Android自定义View --- 绘制圆环
- Android--view自定义--圆环等待
- Android自定义view 圆环进度条
- Android自定义view三圆环
- Android开发,自定义View(三)-----圆环交替 等待效果
- android--笔记--自定义View绘制圆环
- Android自定义View圆环带文字进度条
- Android 自定义圆形进度条(圆环刻度)View
- Android——自定义圆环View
- Android自定义View底部连续圆环效果
- Android 自定义View 圆环交替 等待效果
- android 自定义View--圆环颜色选择器
- Android 自定义View--圆环交替等待效果
- Android自定义View — 圆环统计图表
- C#的运算符优先级
- 通过查看端口状态查看mongodb是否已经启动
- 原生JS实现AJAX及其原理
- 宏,枚举,常量的区别
- 渗透日记2:通过cmd上传文件的方法-vbs脚本
- Android自定义View数字圆环(一)
- Java多线程系列--“基础篇”10之 线程优先级和守护线程
- ofbiz学习——对模板使用装饰器screen widget
- 项目中下载的图片本地系统相册无法显示
- Codeforces Round #436 (Div. 2)解题报告
- httpd
- 蓝牙核心技术概述(二):蓝牙使用场景
- Android ViewPager一次性加载全部页卡,并且滑动时不被销毁
- HDU1009