想说最近公司在出一个设计,需要绘制一个圆形进度条,还得要有数字进度,还要求要有动画,当时看到这个,讲真,我是懵逼的。其实之前很少接触到View的绘制这一块,而且很多时候都是利用人家写好的框架,自己直接嵌套使用就OK了,但是我们公司这个,应该是新颖的进度。我没办法找到一模一样的进度条,无奈之下,只好自己来进行绘制了。
先给你们看看我们的设计图:
对,就是你们看到的这样,这个进度条要由四个部分组成:圆弧区域代表进度、水滴图代表进度的结尾、电量图片作为文字的背景,而文字自然而然就代表着我们的实际进度的数值嘛。
拿着这个图,我就开始抠脑壳了,还挺麻烦的,真心的。
下面和大家一起分享一下我的思路好了。
首先就是绘制圆弧的时候,这个比较简单,只要你找到圆心,就不难。但是要注意的是,我们在绘制View的时候,默认的方向是3点钟,顺时针旋转,你如果要使顶点作为你画圆弧的起点,就需要调整一下角度。我的做法是将我的坐标系旋转了270°。 此时画圆弧的角度就 = 360*你的进度百分比。
其次,是画水滴。我想过好多种方法,最开始朋友给我的意见是让我直接算坐标,根据角度,半径,其实就可以算出水滴的坐标,但是我觉得那个样子其实是有点不正确的,至少我实践过程中是存在很大的误差的。而我的解决办法是,旋转坐标系。将坐标系再次旋转到圆弧的结束位置,我们就只需要算x和y轴的距离就可以画我们的水滴。
最最困扰我的,其实是画进度值。
我首先想到的办法是直接在我的水滴后面画,因为其实此时的坐标系是经过改变了的,对吧?但是有个问题是什么:你的进度值啊什么的,此时不在水平线上,它会沿着你当前的坐标系画下去。而且,当角度大于了180之后,旋转过去,字体是倒立的。所以这个方法是不可行的!
然后,我想到的是平移、旋转我的坐标系。
画的有点丑,不要介意,左边的交点处就是我们此时水滴的位置哈,假设,我们的坐标系就要从右边那个样子变成左边这个样子才得行,平移很好说,因为我们知道水滴的位置,但是旋转的话,就需要我们求角度,在我分析之后,发现 >180 和<180 它们旋转的角度是有差异的,你们可以去画画就知道了。好,我们就算这个样子哈,平移旋转之后,就达到了现在这种效果:
其实很多都完善了你们可以看到,有一个问题是啥子喃?我们的字体还是倒立的是不是?而且这种麻烦的是啥子,你没得办法旋转字啊!!字是由画布canvas画出来的,所以我们咋个办?想了一下午,最后咋个做的喃,在画字之前,我们是把字的背景图画好了的,再次平移、旋转我们的坐标系。是不是觉得很神,我自己都觉得神的很 - -。我们此时把我们的坐标系平移到我们的背景那个位置,旋转的话就直接再旋转个180度,它就翻回来了。所以最后就成了:
可能我的字和图的间距还没有调整好,但是画成这个样子 真心的,我自己都佩服我自己了 。哈哈哈。多多练习才是好的。在这里很感谢,很多先例的朋友们的博客给我的启发,特别是我看到了一个温度计的绘制。感触颇多。http://www.developersite.org/904-160145-android大家感兴趣可以去看看。
CircleProgress类:
public class CircleProgress extends View { private static final String TAG = "CircleProgress"; private Context mContext; //默认大小 private int mDefaultSize; //是否开启抗锯齿 private boolean antiAlias; //绘制提示 private TextPaint mHintPaint; private CharSequence mHint; private int mHintColor; private float mHintSize; private float mHintOffset; //绘制单位 private TextPaint mUnitPaint; private CharSequence mUnit; private int mUnitColor; private float mUnitSize; private float mUnitOffset; //绘制数值 private TextPaint mValuePaint; private float mValue; private float mMaxValue; private float mValueOffset; private int mPrecision; private String mPrecisionFormat; private int mValueColor; private float mValueSize; //绘制圆弧 private Paint mArcPaint; private float mArcWidth; private float mStartAngle, mSweepAngle; private RectF mRectF; private RectF mOuterRectF; //渐变的颜色是360度,如果只显示270,那么则会缺失部分颜色 private SweepGradient mSweepGradient; //当前进度,[0.0f,1.0f] private float mPercent; //动画时间 private long mAnimTime; //属性动画 private ValueAnimator mAnimator; //绘制背景圆弧 private Paint mBgArcPaint; private int mBgArcColor; private float mBgArcWidth; //圆心坐标,半径 private Point mCenterPoint; private float mRadius; private float mTextOffsetPercentInRadius; public CircleProgress(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } private void init(Context context, AttributeSet attrs) { mContext = context; mDefaultSize = MiscUtil.dipToPx(mContext, Constant.DEFAULT_SIZE); mAnimator = new ValueAnimator(); mRectF = new RectF(); mOuterRectF = new RectF(); mCenterPoint = new Point(); initAttrs(attrs); initPaint(); setValue(mValue); } private void initAttrs(AttributeSet attrs) { TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar); antiAlias = typedArray.getBoolean(R.styleable.CircleProgressBar_antiAlias, Constant.ANTI_ALIAS); mHint = typedArray.getString(R.styleable.CircleProgressBar_hint); mHintColor = typedArray.getColor(R.styleable.CircleProgressBar_hintColor, Color.BLACK); mHintSize = typedArray.getDimension(R.styleable.CircleProgressBar_hintSize, Constant.DEFAULT_HINT_SIZE); mValue = typedArray.getFloat(R.styleable.CircleProgressBar_value, Constant.DEFAULT_VALUE); mMaxValue = typedArray.getFloat(R.styleable.CircleProgressBar_maxValue, Constant.DEFAULT_MAX_VALUE); //内容数值精度格式 mPrecision = typedArray.getInt(R.styleable.CircleProgressBar_precision, 0); mPrecisionFormat = MiscUtil.getPrecisionFormat(mPrecision); mValueColor = typedArray.getColor(R.styleable.CircleProgressBar_valueColor, Color.BLACK); mValueSize = typedArray.getDimension(R.styleable.CircleProgressBar_valueSize, Constant.DEFAULT_VALUE_SIZE); mUnit = typedArray.getString(R.styleable.CircleProgressBar_unit); mUnitColor = typedArray.getColor(R.styleable.CircleProgressBar_unitColor, Color.BLACK); mUnitSize = typedArray.getDimension(R.styleable.CircleProgressBar_unitSize, Constant.DEFAULT_UNIT_SIZE); mArcWidth = typedArray.getDimension(R.styleable.CircleProgressBar_arcWidth, Constant.DEFAULT_ARC_WIDTH); mStartAngle = typedArray.getFloat(R.styleable.CircleProgressBar_startAngle, Constant.DEFAULT_START_ANGLE); mSweepAngle = typedArray.getFloat(R.styleable.CircleProgressBar_sweepAngle, Constant.DEFAULT_SWEEP_ANGLE); mBgArcColor = typedArray.getColor(R.styleable.CircleProgressBar_bgArcColor, Color.WHITE); mBgArcWidth = typedArray.getDimension(R.styleable.CircleProgressBar_bgArcWidth, Constant.DEFAULT_ARC_WIDTH); mTextOffsetPercentInRadius = typedArray.getFloat(R.styleable.CircleProgressBar_textOffsetPercentInRadius, 0.33f); //mPercent = typedArray.getFloat(R.styleable.CircleProgressBar_percent, 0); mAnimTime = typedArray.getInt(R.styleable.CircleProgressBar_animTime, Constant.DEFAULT_ANIM_TIME); int gradientArcColors = typedArray.getResourceId(R.styleable.CircleProgressBar_arcColors, 0); typedArray.recycle(); } private void initPaint() { mHintPaint = new TextPaint(); // 设置抗锯齿,会消耗较大资源,绘制图形速度会变慢。 mHintPaint.setAntiAlias(antiAlias); // 设置绘制文字大小 mHintPaint.setTextSize(mHintSize); // 设置画笔颜色 mHintPaint.setColor(mHintColor); // 从中间向两边绘制,不需要再次计算文字 mHintPaint.setTextAlign(Paint.Align.CENTER); mValuePaint = new TextPaint(); mValuePaint.setAntiAlias(antiAlias); mValuePaint.setTextSize(mValueSize); mValuePaint.setColor(mValueColor); // 设置Typeface对象,即字体风格,包括粗体,斜体以及衬线体,非衬线体等 mValuePaint.setTypeface(Typeface.DEFAULT_BOLD); mValuePaint.setTextAlign(Paint.Align.CENTER); mUnitPaint = new TextPaint(); mUnitPaint.setAntiAlias(antiAlias); mUnitPaint.setTextSize(mUnitSize); mUnitPaint.setColor(mUnitColor); mUnitPaint.setTextAlign(Paint.Align.CENTER); mArcPaint = new Paint(); mArcPaint.setAntiAlias(antiAlias); // 设置画笔的样式,为FILL,FILL_OR_STROKE,或STROKE mArcPaint.setStyle(Paint.Style.STROKE); mArcPaint.setColor(Color.BLUE); // 设置画笔粗细 mArcPaint.setStrokeWidth(mArcWidth); // 当画笔样式为STROKE或FILL_OR_STROKE时,设置笔刷的图形样式,如圆形样式 // Cap.ROUND,或方形样式 Cap.SQUARE mArcPaint.setStrokeCap(Paint.Cap.ROUND); mBgArcPaint = new Paint(); mBgArcPaint.setAntiAlias(antiAlias); mBgArcPaint.setColor(mBgArcColor); mBgArcPaint.setStyle(Paint.Style.STROKE); mBgArcPaint.setStrokeWidth(mBgArcWidth); mBgArcPaint.setStrokeCap(Paint.Cap.ROUND); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); setMeasuredDimension(MiscUtil.measure(widthMeasureSpec, mDefaultSize), MiscUtil.measure(heightMeasureSpec, mDefaultSize)); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); Log.d(TAG, "onSizeChanged: w = " + w + "; h = " + h + "; oldw = " + oldw + "; oldh = " + oldh); //求圆弧和背景圆弧的最大宽度 float maxArcWidth = Math.max(mArcWidth, mBgArcWidth); //求最小值作为实际值 int minSize = Math.min(w - getPaddingLeft() - getPaddingRight() - 2 * (int) maxArcWidth, h - getPaddingTop() - getPaddingBottom() - 2 * (int) maxArcWidth); //减去圆弧的宽度,否则会造成部分圆弧绘制在外围 mRadius = minSize / 4; //获取圆的相关参数 mCenterPoint.x = w / 2; mCenterPoint.y = h / 2; //绘制圆弧的边界 mRectF.left = mCenterPoint.x - mRadius - maxArcWidth / 2; mRectF.top = mCenterPoint.y - mRadius - maxArcWidth / 2; mRectF.right = mCenterPoint.x + mRadius + maxArcWidth / 2; mRectF.bottom = mCenterPoint.y + mRadius + maxArcWidth / 2; //绘制圆弧的边界 mOuterRectF.left = maxArcWidth / 2; mOuterRectF.top = maxArcWidth / 2; mOuterRectF.right = minSize - maxArcWidth / 2; mOuterRectF.bottom = minSize - maxArcWidth / 2; //计算文字绘制时的 baseline //由于文字的baseline、descent、ascent等属性只与textSize和typeface有关,所以此时可以直接计算 //若value、hint、unit由同一个画笔绘制或者需要动态设置文字的大小,则需要在每次更新后再次计算 mValueOffset = mCenterPoint.y + getBaselineOffsetFromY(mValuePaint); mHintOffset = mCenterPoint.y - mRadius * mTextOffsetPercentInRadius + getBaselineOffsetFromY(mHintPaint); mUnitOffset = mCenterPoint.y + mRadius * mTextOffsetPercentInRadius + getBaselineOffsetFromY(mUnitPaint); Log.d(TAG, "onSizeChanged: 控件大小 = " + "(" + w + ", " + h + ")" + "圆心坐标 = " + mCenterPoint.toString() + ";圆半径 = " + mRadius + ";圆的外接矩形 = " + mRectF.toString()); } private float getBaselineOffsetFromY(Paint paint) { return MiscUtil.measureTextHeight(paint) / 2; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //drawText(canvas); drawArc(canvas); } /** * 绘制内容文字 * * @param canvas */ private void drawText(Canvas canvas) { // 计算文字宽度,由于Paint已设置为居中绘制,故此处不需要重新计算 // float textWidth = mValuePaint.measureText(mValue.toString()); // float x = mCenterPoint.x - textWidth / 2; canvas.drawText(String.format(mPrecisionFormat, mValue), mCenterPoint.x, mValueOffset, mValuePaint); if (mHint != null) { canvas.drawText(mHint.toString(), mCenterPoint.x, mHintOffset, mHintPaint); } if (mUnit != null) { canvas.drawText(mUnit.toString(), mCenterPoint.x, mUnitOffset, mUnitPaint); } } private void drawArc(Canvas canvas) { // 绘制背景圆弧 // 从进度圆弧结束的地方开始重新绘制,优化性能 canvas.save(); float currentAngle = mSweepAngle * mPercent; Bitmap dot = BitmapFactory.decodeResource(getResources(), R.drawable.dot); // 取得想要缩放的matrix参数 Matrix matrix = new Matrix(); matrix.postScale(((float) MiscUtil.dipToPx(getContext(), dot.getWidth())) / dot.getWidth(), ((float) MiscUtil.dipToPx(getContext(), dot.getHeight())) / dot.getHeight()); Bitmap newDot = Bitmap.createBitmap(dot, 0, 0, dot.getWidth(), dot.getHeight(), matrix, true); canvas.drawBitmap(newDot, mCenterPoint.x - newDot.getWidth() / 2, mCenterPoint.y - newDot.getHeight() / 2, mArcPaint); canvas.rotate(mStartAngle, mCenterPoint.x, mCenterPoint.y); canvas.drawArc(mRectF, 0, currentAngle, false, mArcPaint); canvas.translate(mCenterPoint.x, mCenterPoint.y); canvas.rotate(currentAngle); if (currentAngle != 0) { // 取得想要缩放的matrix参数 Matrix matrix1 = new Matrix(); matrix1.postScale(((float) MiscUtil.dipToPx(getContext(), dot.getWidth() / 3)) / dot.getWidth(), ((float) MiscUtil.dipToPx(getContext(), dot.getHeight() / 3)) / dot.getHeight()); matrix1.postRotate(90 - currentAngle); // 得到新的图片 Bitmap newDot1 = Bitmap.createBitmap(dot, 0, 0, dot.getWidth(), dot.getHeight(), matrix1, true); Bitmap sch = BitmapFactory.decodeResource(getResources(), R.drawable.schedule); Matrix matrix2 = new Matrix(); matrix2.postScale((float) MiscUtil.dipToPx(getContext(), sch.getWidth() / 3.5f) / sch.getWidth(), (float) MiscUtil.dipToPx(getContext(), sch.getHeight() / 3) / sch.getHeight()); Bitmap newSc = Bitmap.createBitmap(sch, 0, 0, sch.getWidth(), sch.getHeight(), matrix2, true); canvas.drawBitmap(newDot1, mRadius - newDot1.getWidth() / 2, -newDot1.getHeight() / 2, mArcPaint); canvas.translate(mRadius - newDot1.getWidth() / 2, -newDot1.getHeight() / 2); if (currentAngle < 180) { canvas.rotate(90 - currentAngle); canvas.drawBitmap(newSc, currentAngle >= 90 ? newDot1.getWidth() / 2 : newDot1.getWidth(), currentAngle >= 90 ? newDot1.getHeight() * 2 / 3 : -newDot1.getHeight() * 2 / 3, mArcPaint); canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", (currentAngle >= 90 ? newDot1.getWidth() / 2 : newDot1.getWidth()) + newSc.getWidth() / 2 + mArcWidth, newSc.getHeight() + (currentAngle >= 90 ? newDot1.getHeight() / 2 : -newDot1.getHeight() + mArcWidth), mValuePaint); } else if (currentAngle > 180 && currentAngle <= 270) { canvas.rotate(270 - currentAngle); canvas.drawBitmap(newSc, newDot1.getWidth(), 0, mArcPaint); canvas.translate(newDot1.getWidth(), 0); canvas.rotate(180); canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", -newSc.getWidth() / 2, -newSc.getHeight() / 3, mValuePaint); //canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", newDot1.getWidth() + newSc.getWidth() / 2 + mArcWidth, newSc.getHeight() * 2 / 3, mValuePaint); } else { canvas.rotate(270 - currentAngle); canvas.drawBitmap(newSc, currentAngle > 270 ? newDot1.getWidth() / 2 : -newDot1.getWidth() / 2, currentAngle > 270 ? newDot1.getHeight() / 2 : -newSc.getWidth(), mArcPaint); canvas.translate(newDot1.getWidth(), 0); canvas.rotate(180); canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", -newSc.getWidth() / 3, -newSc.getHeight(), mValuePaint); //canvas.drawText(String.format(mPrecisionFormat, mValue) + "%", (currentAngle > 270 ? newDot1.getWidth() / 2 : -newDot1.getWidth()) + newSc.getWidth() / 2 + mArcWidth, (currentAngle > 270 ? newDot1.getHeight() / 3 : -newDot.getHeight() / 3) + newSc.getHeight(), mValuePaint); } } canvas.restore(); } /** * 更新圆弧画笔 */ private void updateArcPaint() { // 设置渐变 int[] mGradientColors = {Color.GREEN}; mSweepGradient = new SweepGradient(mCenterPoint.x, mCenterPoint.y, mGradientColors, null); mArcPaint.setShader(mSweepGradient); } public boolean isAntiAlias() { return antiAlias; } public CharSequence getHint() { return mHint; } public void setHint(CharSequence hint) { mHint = hint; } public CharSequence getUnit() { return mUnit; } public void setUnit(CharSequence unit) { mUnit = unit; } public float getValue() { return mValue; } /** * 设置当前值 * * @param value */ public void setValue(float value) { if (value > mMaxValue) { value = mMaxValue; } float start = mPercent; float end = value / mMaxValue; startAnimator(start, end, mAnimTime); } private void startAnimator(float start, float end, long animTime) { mAnimator = ValueAnimator.ofFloat(start, end); mAnimator.setDuration(animTime); mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mPercent = (float) animation.getAnimatedValue(); mValue = mPercent * mMaxValue; if (BuildConfig.DEBUG) { Log.d(TAG, "onAnimationUpdate: percent = " + mPercent + ";currentAngle = " + (mSweepAngle * mPercent) + ";value = " + mValue); } invalidate(); } }); mAnimator.start(); } /** * 获取最大值 * * @return */ public float getMaxValue() { return mMaxValue; } /** * 设置最大值 * * @param maxValue */ public void setMaxValue(float maxValue) { mMaxValue = maxValue; } /** * 获取精度 * * @return */ public int getPrecision() { return mPrecision; } public void setPrecision(int precision) { mPrecision = precision; mPrecisionFormat = MiscUtil.getPrecisionFormat(precision); } /** * 设置渐变 * * @param gradientColors */ public void setGradientColors(int[] gradientColors) { updateArcPaint(); } public long getAnimTime() { return mAnimTime; } public void setAnimTime(long animTime) { mAnimTime = animTime; } /** * 重置 */ public void reset() { startAnimator(mPercent, 0.0f, 1000L); } @Override protected void onDetachedFromWindow() { super.onDetachedFromWindow(); //释放资源 } }
attrs:
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 是否开启抗锯齿 --> <attr name="antiAlias" format="boolean" /> <!-- 圆弧起始角度,3点钟方向为0,顺时针递增,小于0或大于360进行取余 --> <attr name="startAngle" format="float" /> <!-- 圆弧度数 --> <attr name="sweepAngle" format="float" /> <!-- 设置动画时间 --> <attr name="animTime" format="integer" /> <!-- 绘制内容的数值 --> <attr name="maxValue" format="float" /> <attr name="value" format="float" /> <!-- 绘制内容的单位 --> <attr name="unit" format="string|reference" /> <attr name="unitSize" format="dimension" /> <attr name="unitColor" format="color|reference" /> <!-- 绘制内容相应的提示语 --> <attr name="hint" format="string|reference" /> <attr name="hintSize" format="dimension" /> <attr name="hintColor" format="color|reference" /> <!-- 精度,默认为0 --> <attr name="precision" format="integer" /> <attr name="valueSize" format="dimension" /> <attr name="valueColor" format="color|reference" /> <!-- 圆弧颜色,设置多个可实现渐变 --> <attr name="arcColor1" format="color|reference" /> <attr name="arcColor2" format="color|reference" /> <attr name="arcColor3" format="color|reference" /> <!-- 背景圆弧颜色,默认白色 --> <attr name="bgArcColor" format="color|reference" /> <!-- 圆弧宽度 --> <attr name="arcWidth" format="dimension" /> <!-- 圆弧颜色, --> <attr name="arcColors" format="color|reference" /> <!-- 文字的偏移量。相对于圆半径而言,默认三分之一 --> <attr name="textOffsetPercentInRadius" format="float" /> <!-- 圆形进度条 --> <declare-styleable name="CircleProgressBar"> <attr name="antiAlias" /> <attr name="startAngle" /> <attr name="sweepAngle" /> <attr name="animTime" /> <attr name="maxValue" /> <attr name="value" /> <attr name="precision" /> <attr name="valueSize" /> <attr name="valueColor" /> <attr name="textOffsetPercentInRadius" /> <!-- 绘制内容相应的提示语 --> <attr name="hint" /> <attr name="hintSize" /> <attr name="hintColor" /> <!-- 绘制内容的单位 --> <attr name="unit" /> <attr name="unitSize" /> <attr name="unitColor" /> <!-- 圆弧宽度 --> <attr name="arcWidth" /> <attr name="arcColors" /> <!-- 背景圆弧颜色 --> <attr name="bgArcColor" /> <!-- 背景圆弧宽度 --> <attr name="bgArcWidth" format="dimension" /> </declare-styleable> </resources>MisUtil:public class MiscUtil { private static final String TAG = "CircleProgress"; /** * 测量 View * * @param measureSpec * @param defaultSize View 的默认大小 * @return */ public static int measure(int measureSpec, int defaultSize) { int result = defaultSize; int specMode = View.MeasureSpec.getMode(measureSpec); int specSize = View.MeasureSpec.getSize(measureSpec); if (specMode == View.MeasureSpec.EXACTLY) { result = specSize; } else if (specMode == View.MeasureSpec.AT_MOST) { result = Math.min(result, specSize); } return result; } /** * dip 转换成px * * @param dip * @return */ public static int dipToPx(Context context, float dip) { float density = context.getResources().getDisplayMetrics().density; return (int) (dip * density + 0.5f * (dip >= 0 ? 1 : -1)); } public static float getDensity(Context context) { Log.i(TAG, "dipToPx: ===" + context.getResources().getDisplayMetrics().density); return context.getResources().getDisplayMetrics().density; } /** * 获取数值精度格式化字符串 * * @param precision * @return */ public static String getPrecisionFormat(int precision) { return "%." + precision + "f"; } /** * 反转数组 * * @param arrays * @param <T> * @return */ public static <T> T[] reverse(T[] arrays) { if (arrays == null) { return null; } int length = arrays.length; for (int i = 0; i < length / 2; i++) { T t = arrays[i]; arrays[i] = arrays[length - i - 1]; arrays[length - i - 1] = t; } return arrays; } /** * 测量文字高度 * * @param paint * @return */ public static float measureTextHeight(Paint paint) { Paint.FontMetrics fontMetrics = paint.getFontMetrics(); return (Math.abs(fontMetrics.ascent) - fontMetrics.descent); } }