android 数字圆环,Android 自定义数字圆环

最新推荐文章于 2023-07-14 14:11:23 发布

nbht

最新推荐文章于 2023-07-14 14:11:23 发布

阅读量222

点赞数

文章标签： android 数字圆环

本文介绍如何在Android项目中创建一个自定义的DoughnutView，展示数字圆环样式，并通过ValueAnimator实现动画效果。详细代码包括DoughnutView.java、MainActivity.java和ColorUtils.java，展示了颜色渐变、圆环绘制以及点击按钮改变进度的实现过程。

摘要由CSDN通过智能技术生成

最近项目中写了一个数字圆环的样式，只能通过自定义View完成，对于自定义View我还比较薄弱，查了一些资料，我们参考下：

http://www.jianshu.com/p/84df2466e26a

http://www.cnblogs.com/linlf03/p/3577828.html

http://www.jb51.net/article/104068.htm

http://blog.csdn.net/u011904605/article/details/52588609

看下效果图：

自定义View：DoughnutView.java

/**

* on 15/12/16.

* 自定义数字圆环

* 参考：http://www.jianshu.com/p/84df2466e26a

public class DoughnutView extends View {

//View默认最小宽度

private static final int DEFAULT_MIN_WIDTH = 400;

//圆环颜色

// private int[] doughnutColors = new int[]{Color.GREEN, Color.YELLOW, Color.RED};//多种颜色

private int[] doughnutColors = new int[]{Color.rgb(57, 160, 242)};//单一颜色

private int width;

private int height;

private float currentValue = 0f;

private Paint paint = new Paint();

public DoughnutView(Context context) {

super(context);

}

public DoughnutView(Context context, AttributeSet attrs) {

super(context, attrs);

}

public DoughnutView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

private void resetParams() {

width = getWidth();

height = getHeight();

}

private void initPaint() {

paint.reset();

paint.setAntiAlias(true);

}

//动画效果实现

public void setValue(float value) {

ValueAnimator valueAnimator = ValueAnimator.ofFloat(currentValue, value);

valueAnimator.setDuration(2000);

//自己实现一个简单的插值器

// valueAnimator.setInterpolator(new Interpolator() {

// @Override

// public float getInterpolation(float v) {

// return 1-(1-v)*(1-v)*(1-v);

// }

// });

// 使用ValueAnimator来实现动画效果。还可以设置不同的插值器来实现不同的动画效果：

valueAnimator.setInterpolator(new LinearInterpolator());//匀速

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator valueAnimator) {

currentValue = (float) valueAnimator.getAnimatedValue();

invalidate();

}

});

valueAnimator.start();

}

@Override

protected void onDraw(Canvas canvas) {

resetParams();

//画背景白色圆环

initPaint();

float doughnutWidth = Math.min(width, height) / 2 * 0.20f;//圆环宽

paint.setStrokeWidth(doughnutWidth);

paint.setStyle(Paint.Style.STROKE);

// paint.setColor(Color.WHITE);

paint.setColor(Color.rgb(243, 243, 243));

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

}

/**

* 当布局为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;

}

ColorUtils.java

/**

15/12/17.

public class ColorUtils {

/**

* 颜色渐变算法

* 获取某个百分比下的渐变颜色值

* @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]);

}

MainActivity.java

public class MainActivity extends AppCompatActivity {

private DoughnutView doughnutView;

private Button actionBtn;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

doughnutView = (DoughnutView) findViewById(R.id.doughnutView);

actionBtn = (Button) findViewById(R.id.actionBtn);

//随机

actionBtn.setOnClickListener(new View.OnClickListener() {

@Override