Android自定义控件实现带文本与数字的圆形进度条

本文实例为大家分享了Android实现圆形进度条的具体代码,供大家参考,具体内容如下

实现的效果图如下所示:

第一步:绘制下方有缺口的空心圆,称为外围大弧吧

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义控件实现球赛比分条效果

    本文实例为大家分享了Android实现球赛比分条效果的具体代码,供大家参考,具体内容如下 效果图如下所示: 该控件需要输入两个参数,左边的得分数和右边的的分数 然后根据两边的得分的比例绘制中间的比分条 首先将控件的宽度平均分配为10分,第一份和最后一份分别绘制左边的比分数字和右边的比分数字 中间的8分宽度绘制比分条 根据左右两个比分所占的比例,绘制两个两条首位相连的线段即可 完整代码如下: public class CustomScoreBar extends View { private Co

  • Android自定义控件实现带数值和动画的圆形进度条

    本文实例实现一个如下图所示的Android自定义控件,可以直观地展示某个球队在某个赛季的积分数和胜场.负场.平局数 首先对画布进行区域划分,整个控件分上下两部分 上边是个大的圆环,圆环中间两行文字,没什么难度,选好圆心坐标和半径后直接绘制即可,绘制文字也是如此. 下部分是三个小的圆弧进度条,弧的末端绘制一个小的实心圆 首先选好坐标和半径,然后先绘制三个圆环作为弧形进度条的背景 之后从12点钟开始绘制进度弧,知道了圆环的圆心和半径,也知道了弧对应于12点钟和圆环圆心的偏移角度 通过三角函数可以计算

  • Android自定义控件实现带文本与数字的圆形进度条

    本文实例为大家分享了Android实现圆形进度条的具体代码,供大家参考,具体内容如下 实现的效果图如下所示: 第一步:绘制下方有缺口的空心圆,称为外围大弧吧 anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4); 第二步:计算绘制圆弧进度条时的起始角度,设置为外围大弧的左端点为进度值得起点,扫过的角度所占外围大弧的百分比就是进度值 第三步:绘制数字.文字.百分号 第四步:使用Handler Runnable

  • Android实现带数字的圆形进度条(自定义进度条)

    开发 设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧. 先看界面效果: 主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码: package com.fun.progressbarwithnumber; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.g

  • Android编程基于自定义View实现绚丽的圆形进度条功能示例

    本文实例讲述了Android编程基于自定义View实现绚丽的圆形进度条功能.分享给大家供大家参考,具体如下: 本文包含两个组件,首先上效果图: 1.ProgressBarView1(支持拖动): 2.ProgressBarView2(不同进度值显示不同颜色,不支持拖拽):   代码不多,注释也比较详细,全部贴上了: (一)ProgressBarView1: /** * 自定义绚丽的ProgressBar. */ public class ProgressBarView1 extends View

  • Android progressbar实现带底部指示器和文字的进度条

    本文实例为大家分享了Android实现带指示器和文字的进度条,供大家参考,具体内容如下 根据项目要求需要实现以下效果: 列出源码: public class TextProgressBar extends LinearLayout { String text; Paint mPaint; private Rect textRect; private Bitmap bitmap; private ProgressBar progressBar; int progress; int proWidth

  • Android自定义控件之圆形进度条动画

    本文实例为大家分享了Android实现圆形进度条动画的具体代码,供大家参考,具体内容如下 首先贴上图片: 额,感觉还行吧,就是进度条的颜色丑了点,不过咱是程序员,不是美工,配色这种问题当然不在考虑范围之内了. 下面说重点,如何来写一个这样的自定义控件. 首先,需要有一个灰色的底图,来作为未填充时的进度条: 然后,根据传入的当前进度值,绘制填充时的进度圆弧,这段圆弧所对应的圆心角,由当前进度与进度的最大值(一般是100)的比值计算得出: 其次,根据进度值绘制文字提示: 最后,重绘控件,加上动画,从

  • Android带进度的圆形进度条

    我们还是用一个小例子来看看自定义View和自定义属性的使用,带大家来自己定义一个带进度的圆形进度条,我们还是先看一下效果吧 从上面可以看出,我们可以自定义圆环的颜色,圆环进度的颜色,是否显示进度的百分比,进度百分比的颜色,以及进度是实心还是空心等等,这样子是不是很多元化很方便呢?接下来我们就来教大家怎么来定义 1.在values下面新建一个attrs.xml,现在里面定义我们的属性,不同的属性对应不同的format,接下来我贴上我在自定义这个进度条所用到的属性 <?xml version="

  • Android自定义控件实现圆形进度条

    项目中常用到的圆形进度条有好多个,从网上搜到的自定义进度条多是封装的比较好的代码,但是不利于初学者,现在本博客就教给大家如何一步步实现自定义进度条的效果 相关视频链接: http://edu.csdn.net/course/detail/3719/65396 先看效果如图- 代码实现过程–main布局 这个布局中就是一个简单的引用 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xm

  • Android使用Canvas绘制圆形进度条效果

    前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B

  • Android动态自定义圆形进度条

    效果图: A.绘制圆环,圆弧,文本 //1.画圆环 //原点坐标 float circleX = width / 2; float circleY = width / 2; //半径 float radius = width / 2 - roundWidth / 2; //设置画笔的属性 paint.setColor(roundColor); paint.setStrokeWidth(roundWidth); paint.setStyle(Paint.Style.STROKE); canvas.

随机推荐