源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Android自定义View之酷炫圆环(二)

  • 时间:2022-10-17 19:32 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Android自定义View之酷炫圆环(二)
先看下最终的效果 静态: [img]http://files.jb51.net/file_images/article/201601/2016111101914928.jpg?2016011101925[/img] 动态: [img]http://files.jb51.net/file_images/article/201601/2016111101853203.gif?201601110192[/img] [b]一、开始实现[/b] 新建一个DoughnutProgress继承View
  public class DoughnutProgress extends View {

  }

先给出一些常量、变量以及公共方法的代码,方便理解后面的代码    
private static final int DEFAULT_MIN_WIDTH = 400; //View默认最小宽度
  private static final int RED = 230, GREEN = 85, BLUE = 35; //基础颜色,这里是橙红色
  private static final int MIN_ALPHA = 30; //最小不透明度
  private static final int MAX_ALPHA = 255; //最大不透明度
  private static final float doughnutRaduisPercent = 0.65f; //圆环外圆半径占View最大半径的百分比
  private static final float doughnutWidthPercent = 0.12f; //圆环宽度占View最大半径的百分比
  private static final float MIDDLE_WAVE_RADUIS_PERCENT = 0.9f; //第二个圆出现时,第一个圆的半径百分比
  private static final float WAVE_WIDTH = 5f; //波纹圆环宽度

  //圆环颜色
  private static int[] doughnutColors = new int[]{
      Color.argb(MAX_ALPHA, RED, GREEN, BLUE),
      Color.argb(MIN_ALPHA, RED, GREEN, BLUE),
      Color.argb(MIN_ALPHA, RED, GREEN, BLUE)};

  private Paint paint = new Paint(); //画笔
  private float width; //自定义view的宽度
  private float height; //自定义view的高度
  private float currentAngle = 0f; //当前旋转角度
  private float raduis; //自定义view的最大半径
  private float firstWaveRaduis;
  private float secondWaveRaduis;

  //
  private void resetParams() {
    width = getWidth();
    height = getHeight();
    raduis = Math.min(width, height)/2;
  }

  private void initPaint() {
    paint.reset();
    paint.setAntiAlias(true);
  }

重写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方法,大致流程如下 在开始绘制之前,先初始化width、height、raduis, 以及将View的中心作为原点
  resetParams();

  //将画布中心设为原点(0,0), 方便后面计算坐标
  canvas.translate(width / 2, height / 2);

[b]实现静态的渐变圆环 1、画渐变圆环[/b]
  float doughnutWidth = raduis * doughnutWidthPercent;//圆环宽度
   //圆环外接矩形
   RectF rectF = new RectF(
   -raduis * doughnutRaduisPercent, 
   -raduis * doughnutRaduisPercent, 
   raduis * doughnutRaduisPercent, 
   raduis * doughnutRaduisPercent);
   initPaint();
   paint.setStrokeWidth(doughnutWidth);
   paint.setStyle(Paint.Style.STROKE);
   paint.setShader(new SweepGradient(0, 0, doughnutColors, null));
   canvas.drawArc(rectF, 0, 360, false, paint);
通过修改doughnutColors可以实现不同的渐变效果 [b]2、画圆环旋转头部的圆[/b]
  //画旋转头部圆
   initPaint();
   paint.setStyle(Paint.Style.FILL);
   paint.setColor(Color.argb(MAX_ALPHA, RED, GREEN, BLUE));
   canvas.drawCircle(raduis * doughnutRaduisPercent, 0, doughnutWidth / 2, paint);
此时运行代码得到效果如下图: [img]http://files.jb51.net/file_images/article/201601/2016111102125385.jpg?2016011102136[/img] 我们还可以在绘制圆环之前通过旋转画布得到不同初始状态 [b]    canvas.rotate(-45, 0, 0);[/b] [img]http://files.jb51.net/file_images/article/201601/2016111102156100.jpg?201601110228[/img] [b]    canvas.rotate(-180, 0, 0);[/b] [b][img]http://files.jb51.net/file_images/article/201601/2016111102247764.jpg?2016011102257[/img] [/b] 此时聪明的你应该已经想到怎么让这个圆环旋转起来了吧^_^ 对!正如你所想的,就是通过canvas.rotate方法不停地旋转画布(这个“地”是这么用的吧o(╯□╰)o) [b]让圆环旋转起来[/b] 在绘制圆环之前加上下面的代码:
  //转起来
  canvas.rotate(-currentAngle, 0, 0);
  if (currentAngle >= 360f){
    currentAngle = currentAngle - 360f;
  } else{
    currentAngle = currentAngle + 2f;
  }
然后再让一个线程循环刷新就好了
private Thread thread = new Thread(){
  @Override
  public void run() {
    while(true){
      try {
        Thread.sleep(10);
      } catch (InterruptedException e) {
        e.printStackTrace();
      }
      postInvalidate();
    }
  }
};
试试!转起来了吗O(∩_∩)O~ 下面是比较有意思的部分,实现类似水波涟漪的效果 分析水波涟漪效果的实现原理(画了张草图方便理解): [img]http://files.jb51.net/file_images/article/201601/2016111102416651.jpg?2016011102429[/img] 假设淡黄色背景区域为整个View的大小 黑色圆圈为View内的最大圆(半径为R3) 橙色圆环代表渐变圆环 红色圆圈代表圆环的外圆(半径为R1) 紫色圆圈是干啥子的,待会儿再介绍~(半径为R2) 通过观察实现的最终效果,可以发现有个圆的半径从R1逐渐增大R3,不透明度逐渐减小到0。 那是不是这样周而复始就可以实现最终的效果了呢? 没那么简单。。。 仔细观察发现,第二个圆不是等到第一个圆的半径增大到R3才开始出现的,而是在将要消失的时候就出现了,有一段时间是两个圆同时存在的。 那么我们就假设当第一个圆的半径增大到R2,第二个圆开始出现。 开始想象两个圆的循环运行模型~~~ 我的方案是: 绘制两个圆,每个圆的半径都从R1增大到R1+2x(R2-R1),不透明度还是从R1到R3的过程中逐渐变为0,也就是当圆的半径大于R3时,不透明度就为0了(不可见了),将第一个圆半径初始值设为R1,第二个圆半径初始值设为R2。这样两个圆半径同时逐渐增大,当半径大于 R1+2x(R2-R1)时又重新回到R1大小继续增大,就实现了类似水波涟漪的效果了。
  //实现类似水波涟漪效果
  initPaint();
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(5);
  secondWaveRaduis = calculateWaveRaduis(secondWaveRaduis);
  firstWaveRaduis = calculateWaveRaduis(secondWaveRaduis + raduis*(MIDDLE_WAVE_RADUIS_PERCENT - doughnutRaduisPercent) - raduis*doughnutWidthPercent/2);
  paint.setColor(Color.argb(calculateWaveAlpha(secondWaveRaduis), RED, GREEN, BLUE));
  canvas.drawCircle(0, 0, secondWaveRaduis, paint); //画第二个圆(初始半径较小的)

  initPaint();
  paint.setStyle(Paint.Style.STROKE);
  paint.setStrokeWidth(5);
  paint.setColor(Color.argb(calculateWaveAlpha(firstWaveRaduis), RED, GREEN, BLUE));
  canvas.drawCircle(0, 0, firstWaveRaduis, paint); //画第一个圆(初始半径较大的)


  /**
   * 计算波纹圆的半径
   * @param waveRaduis
   * @return
   */
  private float calculateWaveRaduis(float waveRaduis){
    if(waveRaduis < raduis*doughnutRaduisPercent + raduis*doughnutWidthPercent/2){
      waveRaduis = raduis*doughnutRaduisPercent + raduis*doughnutWidthPercent/2;
    }
    if(waveRaduis > raduis*MIDDLE_WAVE_RADUIS_PERCENT + raduis*(MIDDLE_WAVE_RADUIS_PERCENT - doughnutRaduisPercent) - raduis*doughnutWidthPercent/2){
      waveRaduis = waveRaduis - (raduis*MIDDLE_WAVE_RADUIS_PERCENT + raduis*(MIDDLE_WAVE_RADUIS_PERCENT - doughnutRaduisPercent) - raduis*doughnutWidthPercent/2) + raduis*doughnutWidthPercent/2 + raduis*doughnutRaduisPercent;
    }
      waveRaduis += 0.6f;
    return waveRaduis;
  }

  /**
   * 根据波纹圆的半径计算不透明度
   * @param waveRaduis
   * @return
   */
  private int calculateWaveAlpha(float waveRaduis){
    float percent = (waveRaduis-raduis*doughnutRaduisPercent-raduis*doughnutWidthPercent/2)/(raduis-raduis*doughnutRaduisPercent-raduis*doughnutWidthPercent/2);
    if(percent >= 1f){
      return 0;
    }else{
      return (int) (MIN_ALPHA*(1f-percent));
    }
  }
以上就是本文的全部内容,希望对大家的学习Android软件编程有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部