Android 自定义View实现环形带刻度的进度条

本篇文章讲的是自定义View实现环形带刻度的进度条。和往常一样，主要还是想总结一下自定义View实现环形带刻度的进度条的开发过程以及一些需要注意的地方。
按照惯例，我们先来看看效果图

一、我们如何来实现这样一个环形刻度进度条：
首先，需要绘制一个灰色的环形刻度尺底图，来作为未填充时的进度条；
然后，根据传入的当前进度值，绘制填充时的进度圆弧；
其次，根据进度值绘制文字提示；
最后，重绘控件，加上动画，从而达到显示进度的效果。

二、view的几个常用触发方法
1. onFinishInflate()：当View中所有的子控件均被映射成xml后触发
2. onMeasure(int widthMeasureSpec, int heightMeasureSpec)：确定所有子元素的大小
3. onLayout(boolean changed, int l, int t, int r, int b)：当View分配所有的子元素的大小和位置时触发
4. onSizeChanged(int w, int h, int oldw, int oldh)：当view的大小发生变化时触发
5. onDraw(Canvas canvas)：负责将View绘制在屏幕上

三、View 的几个构造函数
1、public CircleProgress(Context context)
—>java代码直接new一个CircleProgress实例的时候，会调用这个只有一个参数的构造函数；
2、public CircleProgress(Context context, AttributeSet attrs)
—>在默认的XML布局文件中创建的时候调用这个有两个参数的构造函数。AttributeSet类型的参数负责把XML布局文件中所自定义的属性通过AttributeSet带入到View内；
3、public CircleProgress(Context context, AttributeSet attrs, int defStyleAttr)
—>构造函数中第三个参数是默认的Style，这里的默认的Style是指它在当前Application或者Activity所用的Theme中的默认Style，且只有在明确调用的时候才会调用
4、public CircleProgress(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)
—>该构造函数是在API21的时候才添加上的
自定义View中，我们需要重写了3个构造方法，在上面的构造方法中说过默认的布局文件调用的是两个参数的构造方法，所以记得让所有的构造方法调用三个参数的构造方法，然后在三个参数的构造方法中获得自定义属性。

一开始一个参数的构造方法和两个参数的构造方法是这样的：

   public CircleProgress(Context context) {super(context);}public CircleProgress(Context context, AttributeSet attrs) {super(context, attrs);}

我们需要注意的是super应该改成this，然后让一个参数的构造方法引用两个参数的构造方法，两个参数的构造方法引用三个参数的构造方法，代码如下：

    public CircleProgress(Context context) {this(context, null);}public CircleProgress(Context context, AttributeSet attrs) {this(context, attrs, 0);}

四、下面我们就开始来看看代码啦
1、自定义View的属性，首先在res/values/ 下建立一个attrs.xml ，在里面定义我们的需要用到的属性以及声明相对应属性的取值类型

<?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="bgArcColor" format="color|reference" /><!-- 圆弧宽度 --><attr name="arcWidth" format="dimension" /><!-- 圆弧颜色， --><attr name="arcColors" format="color|reference" /><!-- 文字的偏移量 相对于圆半径而言，默认三分之一 --><attr name="textOffsetPercentInRadius" format="float" /><!-- 背景圆弧宽度 --><attr name="bgArcWidth" format="dimension" /><!-- 线条数 --><attr name="dottedLineCount" format="integer" /><!-- 圆弧跟虚线之间的距离 --><attr name="lineDistance" format="integer" /><!-- 线条宽度 --><attr name="dottedLineWidth" format="dimension" /><declare-styleable name="CircleProgressBar"><attr name="antiAlias" /><attr name="startAngle" /><attr name="sweepAngle" /><attr name="animTime" /><attr name="maxValue" /><attr name="value" /><attr name="unit" /><attr name="unitSize" /><attr name="unitColor" /><attr name="hint" /><attr name="hintSize" /><attr name="hintColor" /><attr name="precision" /><attr name="valueSize" /><attr name="valueColor" /><attr name="bgArcColor" /><attr name="arcWidth" /><attr name="arcColors" /><attr name="textOffsetPercentInRadius" /><attr name="bgArcWidth" /><attr name="dottedLineCount" /><attr name="lineDistance" /><attr name="dottedLineWidth" /></declare-styleable></resources>

format是值该属性的取值类型，format取值类型总共有10种,包括：string，color，demension，integer，enum，reference，float，boolean，fraction和flag。

2、然后在XML布局中声明我们的自定义View

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><per.lijuan.circleprogress.CircleProgress
        android:id="@+id/circle_progress"android:layout_width="250dp"android:layout_height="250dp"android:layout_gravity="center_horizontal"app:antiAlias="true"app:arcWidth="15dp"app:dottedLineWidth="12dp"app:hint="百分比"app:bgArcColor="@android:color/darker_gray"app:bgArcWidth="2dp"app:hintSize="15dp"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.498"app:maxValue="100"app:startAngle="135"app:sweepAngle="270"app:textOffsetPercentInRadius="0.5"app:unit="%"app:unitSize="15dp"app:value="75"app:valueSize="15dp" /></android.support.constraint.ConstraintLayout>

一定要引入xmlns:app=”http://schemas.android.com/apk/res-auto”，Android Studio中我们可以使用res-atuo命名空间,就不用添加自定义View全类名。

3、在View的构造方法中，获得我们的自定义的样式并绘制环形刻度进度条

package per.lijuan.circleprogress;import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;public class CircleProgress extends View {private static final String TAG = CircleProgress.class.getSimpleName();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;//当前进度，[0.0f,1.0f]private float mPercent;//动画时间private long mAnimTime;//属性动画private ValueAnimator mAnimator;//绘制背景圆弧private Paint mBgArcPaint;private int mBgArcColor;private int mArcColor;private float mBgArcWidth;//圆心坐标，半径private Point mCenterPoint;private float mRadius;private float mTextOffsetPercentInRadius;private int mArcCenterX;// 内部虚线的外部半径private float mExternalDottedLineRadius;// 内部虚线的内部半径private float mInsideDottedLineRadius;// 线条数private int mDottedLineCount = 100;// 圆弧跟虚线之间的距离private int mLineDistance = 20;// 线条宽度private float mDottedLineWidth = 40;public CircleProgress(Context context, AttributeSet attrs) {super(context, attrs);init(context, attrs);}private void init(Context context, AttributeSet attrs) {mContext = context;mDefaultSize = dipToPx(mContext, 150);mAnimator = new ValueAnimator();mRectF = 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, true);mHint = typedArray.getString(R.styleable.CircleProgressBar_hint);mHintColor = typedArray.getColor(R.styleable.CircleProgressBar_hintColor, Color.BLACK);mHintSize = typedArray.getDimension(R.styleable.CircleProgressBar_hintSize, 15);mValue = typedArray.getFloat(R.styleable.CircleProgressBar_value, 50);mMaxValue = typedArray.getFloat(R.styleable.CircleProgressBar_maxValue, 50);//内容数值精度格式mPrecision = typedArray.getInt(R.styleable.CircleProgressBar_precision, 0);mPrecisionFormat = getPrecisionFormat(mPrecision);mValueColor = typedArray.getColor(R.styleable.CircleProgressBar_valueColor, Color.BLACK);mValueSize = typedArray.getDimension(R.styleable.CircleProgressBar_valueSize, 15);mUnit = typedArray.getString(R.styleable.CircleProgressBar_unit);mUnitColor = typedArray.getColor(R.styleable.CircleProgressBar_unitColor, Color.BLACK);mUnitSize = typedArray.getDimension(R.styleable.CircleProgressBar_unitSize, 30);mArcWidth = typedArray.getDimension(R.styleable.CircleProgressBar_arcWidth, 15);mStartAngle = typedArray.getFloat(R.styleable.CircleProgressBar_startAngle, 270);mSweepAngle = typedArray.getFloat(R.styleable.CircleProgressBar_sweepAngle, 360);mBgArcColor = typedArray.getColor(R.styleable.CircleProgressBar_bgArcColor, Color.WHITE);mArcColor = typedArray.getColor(R.styleable.CircleProgressBar_arcColors, Color.RED);mBgArcWidth = typedArray.getDimension(R.styleable.CircleProgressBar_bgArcWidth, 15);mTextOffsetPercentInRadius = typedArray.getFloat(R.styleable.CircleProgressBar_textOffsetPercentInRadius, 0.33f);mAnimTime = typedArray.getInt(R.styleable.CircleProgressBar_animTime, 1000);mDottedLineCount = typedArray.getInteger(R.styleable.CircleProgressBar_dottedLineCount, mDottedLineCount);mLineDistance = typedArray.getInteger(R.styleable.CircleProgressBar_lineDistance, mLineDistance);mDottedLineWidth = typedArray.getDimension(R.styleable.CircleProgressBar_dottedLineWidth, mDottedLineWidth);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，或STROKEmArcPaint.setStyle(Paint.Style.STROKE);// 设置画笔粗细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);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);setMeasuredDimension(measureView(widthMeasureSpec, mDefaultSize),measureView(heightMeasureSpec, mDefaultSize));}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mArcCenterX = (int) (w / 2.f);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 / 2;//获取圆的相关参数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;//计算文字绘制时的 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);mArcPaint.setColor(mArcColor);Log.d(TAG, "onSizeChanged: 控件大小 = " + "(" + w + ", " + h + ")"+ "圆心坐标 = " + mCenterPoint.toString()+ ";圆半径 = " + mRadius+ ";圆的外接矩形 = " + mRectF.toString());// 虚线的外部半径mExternalDottedLineRadius = (int) (mRectF.width() / 2)+mLineDistance;// 虚线的内部半径mInsideDottedLineRadius = mExternalDottedLineRadius - mDottedLineWidth;}private float getBaselineOffsetFromY(Paint paint) {Paint.FontMetrics fontMetrics = paint.getFontMetrics();return ((Math.abs(fontMetrics.ascent) - fontMetrics.descent))/ 2;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);drawText(canvas);drawArc(canvas);}/*** 绘制内容文字** @param canvas*/private void drawText(Canvas canvas) {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();// 360 * Math.PI / 180float evenryDegrees = (float) (2.0f * Math.PI / mDottedLineCount);float startDegress = (float) (135 * Math.PI / 180);float endDegress = (float) (225 * Math.PI / 180);for (int i = 0; i < mDottedLineCount; i++) {float degrees = i * evenryDegrees;// 过滤底部90度的弧长if (degrees > startDegress && degrees < endDegress) {continue;}float startX = mArcCenterX + (float) Math.sin(degrees) * mInsideDottedLineRadius;float startY = mArcCenterX - (float) Math.cos(degrees) * mInsideDottedLineRadius;float stopX = mArcCenterX + (float) Math.sin(degrees) * mExternalDottedLineRadius;float stopY = mArcCenterX - (float) Math.cos(degrees) * mExternalDottedLineRadius;canvas.drawLine(startX, startY, stopX, stopY, mBgArcPaint);}canvas.rotate(mStartAngle, mCenterPoint.x, mCenterPoint.y);// 第一个参数 oval 为 RectF 类型，即圆弧显示区域// startAngle 和 sweepAngle  均为 float 类型，分别表示圆弧起始角度和圆弧度数// 3点钟方向为0度，顺时针递增// 如果 startAngle < 0 或者 > 360,则相当于 startAngle % 360// useCenter:如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形float currentAngle = mSweepAngle * mPercent;canvas.drawArc(mRectF, 2, currentAngle, false, mArcPaint);canvas.restore();}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() {@Overridepublic 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 = getPrecisionFormat(precision);}public long getAnimTime() {return mAnimTime;}public void setAnimTime(long animTime) {mAnimTime = animTime;}/*** 重置*/public void reset() {startAnimator(mPercent, 0.0f, 1000L);}@Overrideprotected void onDetachedFromWindow() {super.onDetachedFromWindow();//释放资源}/*** 测量 View** @param measureSpec* @param defaultSize View 的默认大小* @return*/private static int measureView(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));}/*** 获取数值精度格式化字符串** @param precision* @return*/public static String getPrecisionFormat(int precision) {return "%." + precision + "f";}
}

好了，本篇文章已经全部写完了，存在总结不到位的地方还望指导，感谢^_^
源码下载

Android 自定义View实现环形带刻度的进度条相关推荐

Android 自定义View实现环形带刻度颜色渐变的进度条
上次写了一篇Android 自定义View实现环形带刻度的进度条,这篇文章就简单了,只是在原来的基础上加一个颜色渐变. 按照惯例,我们先来看看效果图一.概述 1.相比于上篇文章,这里我们的颜色渐变主 ...
精通Android自定义View(十二)绘制圆形进度条
1 绘图基础简析 1 精通Android自定义View(一)View的绘制流程简述 2 精通Android自定义View(二)View绘制三部曲 3 精通Android自定义View(三)View绘制 ...
android+属性动画+高度,android 自定义view+属性动画实现充电进度条
近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和 ...
android 自定义音乐圆形进度条,Android自定义View实现音频播放圆形进度条
本篇文章介绍自定义View配合属性动画来实现如下的效果实现思路如下: 根据播放按钮的图片大小计算出圆形进度条的大小根据音频的时间长度计算出圆形进度条绘制的弧度通过Handler刷新界面来更新圆形 ...
自定义View之王者荣耀等级进度条
Demo效果这里用王者荣耀的等级做了一个demo 实现思路由进度条想到ProgressBar,继承自ProgressBar,可以在onDraw()中通过getProgress()和getMax() ...
Android -- 自定义StepView实现个人信息验证进度条
1,项目中要用到个人信息验证的在网上找了一下,好像有封装好了的StepView,首先感谢一下作者,这是作者的地址,效果图如下: 2,正准备撸起袖子就是一顿复制粘贴的时候,发现效果图成这个样子了(其实这 ...
Android自定义没有资源文件的圆形进度条ProgressBar
最近公司开发的SDK中需要使用圆形加载进度条,而且说要那种动态的转圈圈的那种进度条.当然这种进度条想实现很简单,用几个资源图片,以动画循环播放就行.但考虑到是SDK,有资源文件不好打包,想打包就要用到 ...
android 动态进度条,Android实用view系列------炫酷的进度条
不知不觉距离上次写文章已经过去大半个月了,原本计划每周写一篇的想法在坚持几周之后最终还是被生活中各种各样的琐事打乱,无奈中夹杂这对自己的一点失望. 心痛.jpg 当初的愿望实现了吗事到如今只好祭奠吗 ...
精通Android自定义View(十四)绘制水平向右加载的进度条
1引言 1 精通Android自定义View(一)View的绘制流程简述 2 精通Android自定义View(二)View绘制三部曲 3 精通Android自定义View(三)View绘制三部曲综合 ...

Android 自定义View实现环形带刻度的进度条

Android 自定义View实现环形带刻度的进度条相关推荐

最新文章

热门文章