Android自定义View之酷炫数字圆环

先看下最终的效果

一、开始实现
新建一个DoughnutView继承View

  public class DoughnutView extends View {

  }

先重写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方法,大致流程如下
1、画白色圆环(背景),记得改下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);

2、画彩色圆环

使用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);

3、画中间数值的白色背景(只是为了让数值显示更明显一些)

 //画中间数值的背景
 int fontSize = 50;
 initPaint();
 paint.setStyle(Paint.Style.FILL);
 paint.setColor(Color.WHITE);
 canvas.drawCircle(width / 2, height / 2, fontSize * 2, paint);}

4、画中间数值

 //画中间数值
 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);

这里有两点比较坑:

1、数值的颜色

要实现的效果是让数值的颜色是跟彩色圆环终点的颜色是一样的。寻寻觅觅很久也没有找到获取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]);
 }

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);
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • Android自定义View实现折线图效果

    下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo

  • Android自定义View实现广告信息上下滚动效果

    先看看效果: 实现代码: public class ScrollBanner extends LinearLayout { private TextView mBannerTV1; private TextView mBannerTV2; private Handler handler; private boolean isShow; private int startY1, endY1, startY2, endY2; private Runnable runnable; private Li

  • Android 自定义View的使用介绍

    在项目开发中,可能系统自带的一些widget不能满足我们的需求,这时就需要自定义View. 通过查看系统中的常用widget如Button,TextView,EditText,他们都继承自View,所以我们在继承自定义View的时候也自然的需要继承View.1.首先新建一个类LView继承自View 复制代码 代码如下: public class LView extends View { private Paint paint; public LView(Context context) {  

  • Android实现在xml文件中引用自定义View的方法分析

    本文实例讲述了Android实现在xml文件中引用自定义View的方法.分享给大家供大家参考,具体如下: 在xml中引用自定义view 方法一: <view class="com.test.copytext.CopyText" android:layout_width="fill_parent" android:layout_height="wrap_content" /> 方法二: <view class="com.

  • Android自定义view制作绚丽的验证码

    废话不多说了,先给大家展示下自定义view效果图,如果大家觉得还不错的话,请继续往下阅读. 怎么样,这种验证码是不是很常见呢,下面我们就自己动手实现这种效果,自己动手,丰衣足食,哈哈~ 一. 自定义view的步骤 自定义view一直被认为android进阶通向高手的必经之路,其实自定义view好简单,自定义view真正难的是如何绘制出高难度的图形,这需要有好的数学功底(后悔没有好好学数学了~),因为绘制图形经常要计算坐标点及类似的几何变换等等.自定义view通常只需要以下几个步骤: 写一个类继承

  • Android自定义View实现拖动选择按钮

    本文为大家分享了Android实现拖动选择按钮的具体代码,供大家参考,具体内容如下 效果图 View代码 第一步:自定义属性 <declare-styleable name="DragView"> <attr name="icon_drag" format="reference"/> <attr name="color_circle" format="color"/> &

  • Android自定义View实现照片裁剪框与照片裁剪功能

    本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩

  • Android自定义view实现阻尼效果的加载动画

    效果: 需要知识: 1. 二次贝塞尔曲线 2. 动画知识 3. 基础自定义view知识 先来解释下什么叫阻尼运动 阻尼振动是指,由于振动系统受到摩擦和介质阻力或其他能耗而使振幅随时间逐渐衰减的振动,又称减幅振动.衰减振动.[1] 不论是弹簧振子还是单摆由于外界的摩擦和介质阻力总是存在,在振动过程中要不断克服外界阻力做功,消耗能量,振幅就会逐渐减小,经过一段时间,振动就会完全停下来.这种振幅随时间减小的振动称为阻尼振动.因为振幅与振动的能量有关,阻尼振动也就是能量不断减少的振动.阻尼振动是非简谐运

  • Android自定义View之继承TextView绘制背景

    本文实例为大家分享了TextView绘制背景的方法,供大家参考,具体内容如下 效果: 实现流程: 1.初始化:对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); mPaintIn.setStyle(Paint.Style.FILL); mPaintIn.setColor(getResources().getColor(R.color.colorPrimary)); mPain

  • Android 自定义View实现单击和双击事件的方法

    自定义View, 1. 自定义一个Runnable线程TouchEventCountThread ,  用来统计500ms内的点击次数 2. 在MyView中的 onTouchEvent 中调用 上面的线程 3. 自定义一个Handler, 在TouchEventHandler 中 处理 统计到的点击事件, 单击, 双击, 三击, 都可以处理 核心代码如下: public class MyView extends View { ...... // 统计500ms内的点击次数 TouchEvent

  • Android自定义View之自定义评价打分控件RatingBar实现自定义星星大小和间距

    在Android开发中,我们经常会用到对商家或者商品的评价,运用星星进行打分.然而在Android系统中自带的打分控件,RatingBar特别不好用,间距和大小无法改变.所以,我就自定义了一个特别好用的打分控件.在项目中可以直接使用,特别简单.下面直接上图: 效果图 实现原理 其实就是自定义View继承LinearLayout ,然后里面动态加了五个ImageView. 实现代码,有详细的注释 在attrs中声明的可以在xml中设置的变量 <declare-styleable name="

  • Android自定义View实现带数字的进度条实例代码

    第一步.效果展示 图1.蓝色的进度条 图2.红色的进度条 图3.多条颜色不同的进度条 图4.多条颜色不同的进度条 第二步.自定义ProgressBar实现带数字的进度条 0.项目结构 如上图所示:library项目为自定义的带数字的进度条NumberProgressBar的具体实现,demo项目为示例项目以工程依赖的方式引用library项目,然后使用自定义的带数字的进度条NumberProgressBar来做展示 如上图所示:自定义的带数字的进度条的library项目的结构图 如上图所示:de

随机推荐