android 画圆环表示收益所占比重

来源：互联网发布：nginx 图片加载不出来编辑：程序博客网时间：2024/06/11 00:46

因为工作项目需要，做了一个圆环动画控件，表示各部分收益所占比重，中间总收益从0一直变到目标大小。

我是通过重写View来实现动画效果的，里面添加了一个内部动画类，来控制动画的时间。

先来看截图效果

下面分享代码：

/**
* 第一种金额
*/
private BigDecimal mJRB = BigDecimal.ZERO;
/**
* 第二种金额
*/
private BigDecimal mFund = BigDecimal.ZERO;
/**
* 总金额
*/
private BigDecimal mTotal = BigDecimal.ZERO;
/**
* 圆环的画笔
*/
private Paint mPaint;
/**
* 圆环的宽度
*/
private float mStrokeWidth;
/**
* 转过的角度
*/
private float mAngle;
/**
* 初始位置转过的角度
*/
private float mRatate;
/**
* 第一种金额占的比例
*/
private float mJrbWeight;
/**
* 画圆环用到的矩形
*/
private RectF mRect;
/**
* 金额（小）的画笔
*/
private Paint miniTextPaint;
/**
* 金额（大）的画笔
*/
private Paint largeTextPaint;
/**
* 汉字的画笔
*/
private Paint textPaint;
/**
* 汉字
*/
private String circleString;
/**
* 横线画笔
*/
private Paint rectPaint;
/**
* 动画执行
*/
private float mTime = 0;
/**
* 动画类
*/
private CircleAnimation animation;
/**
* 文字据数字距离
*/
private int distance;
/**
* 方块的长度
*/
private float rectWidth;
/**
* 方块的宽度
*/
private float rectHeight;
/**
* 方块间的距离
*/
private float rectDistance;

private static final long ANIMATION_DEFAULT_TIME = 1500;

public CircleView(Context context, AttributeSet attrs) {
  super(context, attrs);
  this.mAngle = -180;
  this.mRatate = 0;
  animation = new CircleAnimation();
  mPaint = new Paint();
  mRect = new RectF();
  mStrokeWidth = 40;

  rectWidth = 100;
  rectHeight = 30;
  rectDistance = 50;

  miniTextPaint = new Paint();
  largeTextPaint = new Paint();
  textPaint = new Paint();
  rectPaint = new Paint();
  miniTextPaint.setAntiAlias(true);// 去锯齿
  miniTextPaint.setColor(Color.RED);// 颜色

  largeTextPaint.setAntiAlias(true);
  largeTextPaint
    .setColor(Color.RED);

textPaint.setAntiAlias(true);
textPaint.setColor(Color.BLACK);

rectPaint.setAntiAlias(true);
rectPaint.setColor(Color.BLACK);

  miniTextPaint.setTextSize(getResources().getDimensionPixelSize(
    R.dimen.circle_mini_text));
  largeTextPaint.setTextSize(getResources().getDimensionPixelSize(
    R.dimen.circle_large_text));
  textPaint.setTextSize(getResources().getDimensionPixelSize(
    R.dimen.circle_text));

  circleString = getResources().getString(R.string.circle_text);
  distance = getResources().getDimensionPixelSize(
    R.dimen.circle_text_digital);

}

/**
* 设置金额
*
* @param jrb
* @param fund
*/
public void setAmount(BigDecimal jrb, BigDecimal fund) {
  this.mFund = fund;
  this.mJRB = jrb;
  if (mFund != null && mJRB != null) {
   this.mTotal = this.mJRB.add(mFund);
   if (mTotal != BigDecimal.ZERO) {
    mJrbWeight = (float) (mJRB.floatValue() / mTotal.floatValue());
   } else {
    mJrbWeight = 0;
   }
  }
}

/**
* 开始动画
*
* @param time
*            自定义动画时间
*/
public void startAnimation(long time) {
  this.mAngle = -180;
  this.mRatate = 0;
  animation.setDuration(time);
  startAnimation(animation);
}

/**
* 开始动画
*/
public void startAnimation() {
startAnimation(ANIMATION_DEFAULT_TIME);
}

@Override
protected void onDraw(Canvas canvas) {

  float center;
  if (getWidth() / 2 > getHeight() / 2) {
   center = getHeight() / 2;
  } else {
   center = getWidth() / 2;
  }

  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setAntiAlias(true);
  mPaint.setStrokeWidth(mStrokeWidth);

float radius;
radius = center - mStrokeWidth * 2;

mRect.set(center - radius, center - radius, center + radius, center
+ radius);

  // 小金库和基金传空
  if (mFund == null || mJRB == null) {
   drawMoneyText(canvas, center);
   mPaint.setColor(Color.GRAY);
   for (int i = 0; i < 360; i += 3) {
    canvas.drawArc(mRect, i, (float) 1.5, false, mPaint);
   }
  } else if (mTotal.equals(BigDecimal.ZERO)
    || (mJRB.compareTo(BigDecimal.ZERO) == -1)
    || (mFund.compareTo(BigDecimal.ZERO) == -1)) {
   // 总收益为0,基金或者小金库收益有一个小于0

drawMoneyText(canvas, center);

   mPaint.setColor(Color.GRAY);
   for (float i = 0; i < 360; i += 3) {
    canvas.drawArc(mRect, i, (float) 1.5, false, mPaint);
   }
  } else {

   drawMoneyText(canvas, center);
   mAngle = mTime * 360 - 180;
   mRatate = 90 * mTime;

   if (mAngle < mJrbWeight * 360 - 180) {
    mPaint.setColor(Color.RED);
    for (int i = (int) (-180 + mRatate); i < mAngle + mRatate; i += 3) {
     canvas.drawArc(mRect, i, (float) 1.5, false, mPaint);
    }
   } else {
    mPaint.setColor(Color.RED);
    for (int i = (int) (-180 + mRatate); i < (mJrbWeight * 360 - 180 + mRatate); i += 3) {
     canvas.drawArc(mRect, i, (float) 1.5, false, mPaint);
    }
    mPaint.setColor(Color.YELLOW);
    for (int i = (int) (mJrbWeight * 360 - 180 + mRatate + 3); i <= mAngle
      + mRatate; i += 3) {
     canvas.drawArc(mRect, i, (float) 1.5, false, mPaint);
    }
   }

}
}

/**
* 写出中间的数据
*
* @param canvas
* @param center
*/
private void drawMoneyText(Canvas canvas, float center) {

  if (mFund == null || mJRB == null) {
   canvas.drawRect(center - (rectDistance + rectWidth) / 2, center
     - distance/2 - rectHeight, center - rectDistance / 2, center
     - distance/2, rectPaint);
   canvas.drawRect(center + rectDistance / 2, center
     - distance/2 - rectHeight, center
     + (rectDistance + rectWidth) / 2, center - distance/2,
     rectPaint);
   canvas.drawText(circleString,
     center - textPaint.measureText(circleString) / 2, center
       + distance, textPaint);
  } else if ((mJRB.compareTo(BigDecimal.ZERO) == -1)
    || (mFund.compareTo(BigDecimal.ZERO) == -1)) {
   float y = mTotal.floatValue();
   String str[] = String.format("%.2f", y).split("\\.");
   float x = largeTextPaint.measureText(str[0])
     + miniTextPaint.measureText("." + str[1]);
   canvas.drawText(str[0], center - x / 2, center, largeTextPaint);
   canvas.drawText("." + str[1],
     center - x / 2 + largeTextPaint.measureText(str[0]),
     center, miniTextPaint);

   canvas.drawText(circleString,
     center - textPaint.measureText(circleString) / 2, center
       + distance, textPaint);
  } else {
   float y = ((mAngle + 180) / 360) * mTotal.floatValue();
   String str[] = String.format("%.2f", y).split("\\.");
   float x = largeTextPaint.measureText(str[0])
     + miniTextPaint.measureText("+" + "." + str[1]);
   canvas.drawText("+", center - x / 2, center, miniTextPaint);
   canvas.drawText(str[0],
     center - x / 2 + miniTextPaint.measureText("+"), center,
     largeTextPaint);
   canvas.drawText("." + str[1],
     center - x / 2 + miniTextPaint.measureText("+")
       + largeTextPaint.measureText(str[0]), center,
     miniTextPaint);

   canvas.drawText(circleString,
     center - textPaint.measureText(circleString) / 2, center
       + distance, textPaint);
  }

}

private class CircleAnimation extends Animation {

@Override
public boolean isInitialized() {

   setInterpolator(new LinearInterpolator());
   return super.isInitialized();
  }

  @Override
  protected void applyTransformation(float interpolatedTime,
    Transformation t) {
   super.applyTransformation(interpolatedTime, t);

mTime = interpolatedTime;
invalidate();

}

0 0