简洁大方的电商网站模板,长沙网站制作建设,安徽有哪些市,做百科网站目标
自定义一个环形进度条#xff0c;可以自定义其最大值、当前进度、背景色、进度色#xff0c;宽度等信息。
最终效果如下#xff08;GIF展示纯色有点问题#xff09;#xff1a;
1. 结构分析 背景圆环#xff1a;表示进度条的背景。进度圆环#xff1a;表示当前…目标
自定义一个环形进度条可以自定义其最大值、当前进度、背景色、进度色宽度等信息。
最终效果如下GIF展示纯色有点问题
1. 结构分析 背景圆环表示进度条的背景。进度圆环表示当前进度根据进度值动态绘制圆环。进度值文本在圆环中间展示进度。
2. 实现思路 定义自定义属性在 res/values/attrs.xml 中定义自定义属性以便通过 XML 配置自定义的视图样式。初始化视图元素在构造函数中根据传入的属性初始化各种画笔、尺寸和视图元素。绘制视图内容重写 onDraw 方法使用画笔绘制背景圆环、进度圆环和文本。支持动态更新进度提供 setProgress 方法允许外部动态设置进度触发视图重绘。
3. 关键技术点解析 我们首先要知道画圆的基础是有个正方形或者说有一个正方形的坐标还要考虑到画笔的宽度所以我们首先就要确定矩形的大小 Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);int padding circleWidth / 2;rectF.set(padding, padding, w - padding, h - padding);}circleWidth 为圆环的宽也为圆环画笔的宽。
canvas.drawArc是用于绘制弧形圆弧的一种方法具体参数在前几篇文章已介绍再次不做赘述。这里主要自定义了进度开始的角度即 startAngle 属性。
textPaint.setTextAlign(Paint.Align.CENTER)
重点关注下文本画笔的这个属性在前几篇文章中都是通过计算基线的方式确保文本水平居中的本篇文章的实现方式不同先来看下setTextAlign 的作用
textPaint.setTextAlign(Paint.Align.CENTER) 是 Paint 类中的一个设置文本对齐方式的方法。它用于控制文本在指定位置绘制时的对齐方式具体来说它影响了绘制文本时文本的起始点xy 坐标如何被确定。
作用
Paint.Align 是一个枚举定义了文本绘制时如何对齐相对于给定的 x 和 y 坐标。常用的对齐方式有三个选项 Paint.Align.LEFT 文本绘制时文本的起始位置在 x 坐标上。也就是说文本的左边缘会对齐到 x 坐标。 Paint.Align.CENTER 文本绘制时文本的中心位置与 x 坐标对齐。这意味着文本的中点水平中心会与 x 坐标对齐从而实现水平居中。 Paint.Align.RIGHT 文本绘制时文本的右边缘会对齐到 x 坐标。也就是说文本的右边缘会对齐到指定的 x 坐标x 坐标即为文本的终点。
所以说现在我们不用计算基线而是给drawText一个中心的 x 坐标文字就能做到水平居中了
4. 定义自定义属性 declare-styleable nameCircularProgressBar!-- 进度条的最大值 --attr namemaxProgress formatinteger/!-- 当前进度 --attr nameprogress formatinteger/!-- 环形进度条的背景色 --attr namecircleBackgroundColor formatcolor/!-- 进度条的颜色 --attr nameprogressColor formatcolor/!-- 进度条的宽度 --attr namecircleWidth formatdimension/!-- 显示进度文本 --attr nameshowProgressText formatboolean/!-- 进度文本的颜色 --attr nameprogressTextColor formatcolor/!-- 进度文本的大小 --attr nameprogressTextSize formatdimension/!-- 开始角度 --attr namestartAngle formatenumenum nameangle0 value0/enum nameangle90 value90/enum nameangle180 value180/enum nameangle270 value270//attr/declare-styleable5. 完整代码 public class CircularProgressBar extends View {private Paint backgroundPaint;private Paint progressPaint;private Paint textPaint;private RectF rectF;private int maxProgress 100;private int progress 0;private int circleBackgroundColor Color.GRAY;private int progressColor Color.GREEN;private int circleWidth 20;private boolean showProgressText true;private int progressTextColor Color.BLACK;private int progressTextSize 50;private int startAngle 0; // 起始角度默认从0开始public CircularProgressBar(Context context) {this(context, null);}public CircularProgressBar(Context context, AttributeSet attrs) {this(context, attrs, 0);}public CircularProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// 初始化自定义属性if (attrs ! null) {TypedArray typedArray context.getTheme().obtainStyledAttributes(attrs,R.styleable.CircularProgressBar,0, 0);try {maxProgress typedArray.getInt(R.styleable.CircularProgressBar_maxProgress, 100);progress typedArray.getInt(R.styleable.CircularProgressBar_progress, 0);circleBackgroundColor typedArray.getColor(R.styleable.CircularProgressBar_circleBackgroundColor, Color.GRAY);progressColor typedArray.getColor(R.styleable.CircularProgressBar_progressColor, Color.GREEN);circleWidth typedArray.getDimensionPixelSize(R.styleable.CircularProgressBar_circleWidth, 20);showProgressText typedArray.getBoolean(R.styleable.CircularProgressBar_showProgressText, true);progressTextColor typedArray.getColor(R.styleable.CircularProgressBar_progressTextColor, Color.BLACK);progressTextSize typedArray.getDimensionPixelSize(R.styleable.CircularProgressBar_progressTextSize, 50);// 获取自定义的起始角度int angleValue typedArray.getInt(R.styleable.CircularProgressBar_startAngle, 0);switch (angleValue) {case 90:startAngle 90;break;case 180:startAngle 180;break;case 270:startAngle 270;break;default:startAngle 0;break;}} finally {typedArray.recycle();}}// 设置画笔属性backgroundPaint new Paint();backgroundPaint.setColor(circleBackgroundColor);backgroundPaint.setStyle(Paint.Style.STROKE);backgroundPaint.setStrokeWidth(circleWidth);backgroundPaint.setAntiAlias(true);progressPaint new Paint();progressPaint.setColor(progressColor);progressPaint.setStyle(Paint.Style.STROKE);progressPaint.setStrokeWidth(circleWidth);progressPaint.setStrokeCap(Paint.Cap.ROUND);//圆角progressPaint.setAntiAlias(true);textPaint new Paint();textPaint.setColor(progressTextColor);textPaint.setTextSize(progressTextSize);textPaint.setTextAlign(Paint.Align.CENTER);//文本对齐方式textPaint.setAntiAlias(true);rectF new RectF();}Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);int padding circleWidth / 2;rectF.set(padding, padding, w - padding, h - padding);}Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 绘制背景圆环canvas.drawArc(rectF, 0f, 360f, false, backgroundPaint);// 绘制进度圆环float sweepAngle 360f * progress / (float) maxProgress;// 根据起始角度调整起始位置float adjustedStartAngle 0f;switch (startAngle) {case 90:adjustedStartAngle 0f;break;case 180:adjustedStartAngle 90f;break;case 270:adjustedStartAngle 180f;break;default:adjustedStartAngle -90f; // 默认从0度顶部开始break;}canvas.drawArc(rectF, adjustedStartAngle, sweepAngle, false, progressPaint);// 绘制进度文本if (showProgressText) {String progressText progress %;// 使用视图的中心来计算x和y坐标float x getWidth() / 2f;float y getHeight() / 2f - (textPaint.descent() textPaint.ascent()) / 2f;// 绘制文本canvas.drawText(progressText, x, y, textPaint);}}// 设置进度public void setProgress(int progress) {if (progress maxProgress) {this.progress maxProgress;} else {this.progress Math.max(progress, 0);}invalidate(); // 重新绘制}// 获取当前进度public int getProgress() {return progress;}
}6. 使用示例 xml
com.xaye.example.CircularProgressBarandroid:idid/circularProgressBarandroid:layout_width140dpandroid:layout_height140dpapp:maxProgress100app:circleBackgroundColor#DDDDDDapp:progressColor#00B8D4app:circleWidth15dpapp:showProgressTexttrueapp:progressTextColor#000000app:progressTextSize30spapp:startAngleangle0/Activity
val animator ValueAnimator.ofInt(0, 80)animator.setDuration(2000)animator.interpolator LinearInterpolator()animator.addUpdateListener { animation -val value animation.animatedValue as IntmBind.circularProgressBar.setProgress(value)}animator.start()7. 最后 本篇没什么难度主要是介绍点新的东西再熟悉熟悉手感再会。
另外给喜欢记笔记的同学安利一款好用的云笔记软件对比大部分国内的这个算还不错的免费好用wolai
