Android自定义控件实现带文本与数字的圆形进度条
本文实例为大家分享了Android实现圆形进度条的具体代码,供大家参考,具体内容如下
成都创新互联公司自2013年起,是专业互联网技术服务公司,拥有项目成都做网站、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元彝良做网站,已为上家服务,为彝良各地企业和个人服务,联系电话:18980820575
实现的效果图如下所示:
第一步:绘制下方有缺口的空心圆,称为外围大弧吧
anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4);
第二步:计算绘制圆弧进度条时的起始角度,设置为外围大弧的左端点为进度值得起点,扫过的角度所占外围大弧的百分比就是进度值
第三步:绘制数字、文字、百分号
第四步:使用Handler Runnable 和DecelerateInterpolator是进度条和数字动起来
测试代码:
final CustomCircleBar circle=(CustomCircleBar)findViewById(R.id.win_home); circle.setPercent(10); circle.setCustomText("呵呵"); circle.setProgessColor(getResources().getColor(R.color.blue)); final Random random=new Random(); circle.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ circle.setPercent(random.nextInt(100)); } });
完成代码如下:
public class CustomCircleBar extends View { private Context context; /** * 进度值 */ private int percent; /** * 颜色值 */ private int mProgessColor; /** * 下边的文字名称 */ private String mCustomText; /** * 外圈圆环的画笔 */ private Paint paintBar = new Paint(); /** * 下边文字的画笔 */ private Paint paintText = new Paint(); /** * 动态获取属性值 */ private TypedValue typedValue; /** * 先加速后减速 */ DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator(); /** * 动画持续时间 */ private int duration = 10; private int curTime = 0; public CustomCircleBar(Context context) { super(context); this.context=context; init(); } public CustomCircleBar(Context context, AttributeSet attrs) { super(context, attrs); this.context=context; init(); } public CustomCircleBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this.context=context; init(); } public void setPercent(int percent) { this.percent = percent; /*isShown():Returns the visibility of this view and all of its ancestors*/ if (isShown()) { /** * 设置进度后重新开始一次动画 */ curTime=0; this.invalidate(); } } public void setProgessColor(int mProgessColor) { this.mProgessColor = mProgessColor; if (isShown()) { this.invalidate(); } } public void setCustomText(String mCustomText) { this.mCustomText = mCustomText; } private Handler mHandler = new Handler(); private Runnable mAnimation = new Runnable() { @Override public void run() { if (curTime < duration) { curTime++; /** 导致重绘,调用onDraw,onDraw最后调用 * mHandler.postDelayed(mAnimation, 20);更新进度条,界面重绘 * 每次20毫秒,绘制10次,因此动画时间200毫秒 */ CustomCircleBar.this.invalidate(); } } }; private void init() { /** * 数据初始化,没有设置属性时候的默认值 */ percent = 0; mProgessColor=Color.rgb(95,112,72); mCustomText="Home"; typedValue=new TypedValue(); context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); float mWidth = getWidth(); float mHeight = getHeight(); /** * 下边是进度条画笔的设置 */ /** Restores the paint to its default settings. */ paintBar.reset(); /** * 圆环宽度4个像素 */ paintBar.setStrokeWidth(4); /** * 空心圆环而非填充的额扇形 */ paintBar.setStyle(Paint.Style.STROKE); paintBar.setAntiAlias(true); paintBar.setColor(mProgessColor); /** * 调整下不透明度,使边框弧和进度条区分开 */ paintBar.setAlpha(80); /** * 接下来是文字画笔的设置 */ paintText.setTextSize(20); paintText.setColor(getResources().getColor(typedValue.resourceId)); paintText.setStyle(Paint.Style.STROKE); paintText.setAntiAlias(true); /** * 从中间开始绘制文本 */ paintText.setTextAlign(Paint.Align.CENTER); /** * 测量文字大小 */ Paint.FontMetrics fontMetrics = paintText.getFontMetrics(); /** * 计算文字高度 */ float textHeight = fontMetrics.bottom - fontMetrics.top; /** * 计算圆的半径 */ float radius = Math.min(mWidth, mHeight) / 2 - 10; /* ❑ save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 ❑ restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。*/ /*保存画布,绘制进度条*/ canvas.save(); /*clipRect:该方法用于裁剪画布,也就是设置画布的显示区域 调用clipRect()方法后,只会显示被裁剪的区域,之外的区域将不会显示 */ canvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4); /*因为clipRect的原因,外边的圆环下边留个缺口绘制文字*/ canvas.drawCircle(mWidth / 2, mHeight / 2, radius, paintBar); /** * 三角函数计算,下方缺口扇形的角度的一半 */ float theta_offset = (float) Math.acos((radius - textHeight / 2) / radius); /** * 大弧围成的扇形的角度 */ float theta_full = 360 - 2 * theta_offset; /** * 进度值围成的弧对应的角度 */ float thetaProcess = mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration) * percent * theta_full / 100; /** * 设置进度值颜色完全不透明 */ paintBar.setAlpha(255); paintBar.setColor(mProgessColor); /** * 注意弧形的起始角度,下边因显示文字导致圆环断开成一条弧,弧有左右两个端点,从左端点开始画弧 */ canvas.drawArc(new RectF(mWidth / 2 - radius, mHeight / 2 - radius, mWidth / 2 + radius, mHeight / 2 + radius), theta_offset+90, thetaProcess, false, paintBar); /** * 恢复画布 */ canvas.restore(); /** * 开始绘制文字 */ paintText.setTextSize(20); fontMetrics = paintText.getFontMetrics(); float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; canvas.drawText(mCustomText, mWidth / 2, mHeight / 2 + radius - textHeight / 2 + textBaseLineOffset, paintText); /** * 绘制百分号 */ paintText.setTextSize(mHeight * 1 / 8); fontMetrics = paintText.getFontMetrics(); textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; canvas.drawText("%", mWidth / 2, mHeight / 2 + radius / 3 + textBaseLineOffset, paintText); /** * 绘制百分比 */ paintText.setTextSize(mHeight * 3 / 8); canvas.drawText("" + (int)(percent*mDecelerateInterpolator.getInterpolation(1.0f * curTime / duration)), mWidth / 2, mHeight / 2, paintText); /** * 20毫秒后执行动画 */ mHandler.postDelayed(mAnimation, 20); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
分享标题:Android自定义控件实现带文本与数字的圆形进度条
本文URL:http://scyanting.com/article/jopdhh.html