android自定义view制作圆形进度条效果

发布时间 - 2026-01-10 22:42:19    点击率:

还是我们自定View的那几个步骤:
1、自定义View的属性
2、在View的构造方法中获得我们自定义的属性
[ 3、重写onMesure ]
4、重写onDraw

1、自定义属性:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
 <declare-styleable name="CustomTitleView"> 
  <attr name="mSpeed" format="integer" /> 
  <attr name="mFirstColor" format="color" /> 
  <attr name="mSecondColor" format="color" /> 
  <attr name="mCircleWidth" format="dimension"/> 
  <attr name="textSize" format="dimension"/> 
 </declare-styleable> 
</resources> 

2、在View的构造方法中获得我们自定义的属性

/** 
 * 当前进度 
 */ 
 private int mProgress; 
 /** 
 * 第一圈的颜色 
 */ 
 private int mFirstColor; 
 /** 
 * 第二圈的颜色 
 */ 
 private int mSecondColor; 
 /** 
 * 圈的宽度 
 */ 
 private int mCircleWidth; 
 /** 
 * 速度 
 */ 
 private int mSpeed; 
 /** 
 * 中间进度百分比的字符串的字体 
 */ 
 private float textSize; 
 private boolean isNext = false; 
 private Paint mPaint; 
 
 public CustomTitleView(Context context, AttributeSet attrs) { 
  super(context, attrs); 
  TypedArray typearray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleView); 
  int count= typearray.getIndexCount(); 
  for(int i=0;i<count;i++){ 
   int attr =typearray.getIndex(i); 
   switch(attr){ 
    case R.styleable.CustomTitleView_mFirstColor: 
     mFirstColor=typearray.getColor(attr,Color.BLACK); 
     break; 
    case R.styleable.CustomTitleView_mSecondColor: 
     mSecondColor=typearray.getColor(attr,Color.RED); 
     break; 
    case R.styleable.CustomTitleView_mCircleWidth: 
     mCircleWidth = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension( 
       TypedValue.COMPLEX_UNIT_PX,20,getResources().getDisplayMetrics())); 
     break; 
 
    case R.styleable.CustomTitleView_textSize: 
     textSize = typearray.getDimensionPixelSize(attr,(int)TypedValue.applyDimension( 
       TypedValue.COMPLEX_UNIT_PX,30,getResources().getDisplayMetrics())); 
     break; 
    case R.styleable.CustomTitleView_mSpeed: 
     mSpeed = typearray.getInt(attr,100);// 默认100 
     break; 
   } 
  } 
  Log.v("----",mSpeed+""); 
  typearray.recycle(); 
  mPaint = new Paint(); 
  new Thread() 
  { 
   public void run() 
   { 
    while (true) 
    { 
     mProgress++; 
     if (mProgress == 360) 
     { 
      mProgress = 0; 
      if (!isNext) 
       isNext = true; 
      else 
       isNext = false; 
     } 
     postInvalidate(); 
     try 
     { 
      Thread.sleep(mSpeed); 
     } catch (InterruptedException e) 
     { 
      e.printStackTrace(); 
     } 
    } 
   }; 
  }.start(); 
 } 

3、直接重写onDraw,这不需要重写onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){ 
    super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 } 
 protected void onDraw(Canvas canvas) 
 { 
  /** 
  * 画进度百分比 
  */ 
  mPaint.setStrokeWidth(0); 
  mPaint.setColor(Color.BLACK); 
  mPaint.setTextSize(textSize); 
  mPaint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体 
  int percent = (int)(((float)mProgress / (float)360) * 100); 
  int centre = getWidth() / 2; // 获取圆心的x坐标 
  int radius = centre - mCircleWidth / 2;// 半径 
  float textWidth = mPaint.measureText(percent + "%"); //测量字体宽度,我们需要根据字体的宽度设置在圆环中间 
  canvas.drawText(percent + "%",centre-textWidth/ 2,centre+textSize/2, mPaint); //画出进度百分比 
  mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度 
  mPaint.setAntiAlias(true); // 消除锯齿 
  mPaint.setStyle(Paint.Style.STROKE); // 设置空心 
  RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限 
  if(isNext){ 
   mPaint.setColor(mSecondColor); // 设置圆环的颜色 
   canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 
   mPaint.setColor(mFirstColor); // 设置圆环的颜色 
   canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 
  }else{ 
   mPaint.setColor(mFirstColor); // 设置圆环的颜色 
   canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环 
   mPaint.setColor(mSecondColor); // 设置圆环的颜色 
   canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧 
  } 
 } 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:custom="http://schemas.android.com/apk/res-auto" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:padding="20dp" 
 > 
 <view.CustomTitleView 
  android:layout_width="200dp" 
  android:layout_height="400dp" 
  custom:mSpeed="50" 
  custom:mFirstColor="#7300e6" 
  custom:mSecondColor="#39ac39" 
  custom:mCircleWidth="10px" 
  custom:textSize="20px" 
  android:id="@+id/one" 
 /> 
 <view.CustomTitleView 
  android:layout_toEndOf="@id/one" 
  android:layout_width="200dp" 
  android:layout_height="400dp" 
  custom:mSpeed="100" 
  custom:mFirstColor="#0040ff" 
  custom:mSecondColor="#40ff00" 
  custom:mCircleWidth="20px" 
  custom:textSize="30px" 
  /> 
</RelativeLayout> 

效果预览

源码下载:http://xiazai./201701/yuanma/AndroidProgressbar().rar

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


# android  # view  # 进度条  # Android自定义View实现带数字的进度条实例代码  # Android 自定义view和属性动画实现充电进度条效果  # Android自定义View基础开发之图片加载进度条  # Android自定义view实现水波纹进度球效果  # Android自定义View仿华为圆形加载进度条  # Android自定义View之圆形进度条式按钮  # Android自定义View弧线进度控件  # Android自定义View实现渐变色进度条  # Android自定义View实现环形进度条的思路与实例  # Android自定义View实现简单炫酷的球体进度球实例代码  # 自定义  # 重写  # 画出  # 那几个  # 大家多多  # 源码下载  # 自定  # 这不  # obtainStyledAttributes  # typearray  # super  # TypedArray  # switch  # case  # getIndex  # count  # getIndexCount  # Paint  # mPaint  # false 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel API资源类怎么用_Laravel API Resource数据转换  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  如何在阿里云部署织梦网站?  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  用yum安装MySQLdb模块的步骤方法  Laravel PHP版本要求一览_Laravel各版本环境要求对照  Laravel如何实现URL美化Slug功能_Laravel使用eloquent-sluggable生成别名【方法】  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  如何用PHP工具快速搭建高效网站?  如何彻底删除建站之星生成的Banner?  jQuery 常见小例汇总  想要更高端的建设网站,这些原则一定要坚持!  如何自定义safari浏览器工具栏?个性化设置safari浏览器界面教程【技巧】  微信小程序 wx.uploadFile无法上传解决办法  零服务器AI建站解决方案:快速部署与云端平台低成本实践  如何在建站之星网店版论坛获取技术支持?  实例解析Array和String方法  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  如何实现javascript表单验证_正则表达式有哪些实用技巧  香港网站服务器数量如何影响SEO优化效果?  Midjourney怎么调整光影效果_Midjourney光影调整方法【指南】  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  Laravel如何使用查询构建器?(Query Builder高级用法)  Laravel如何处理CORS跨域请求?(配置示例)  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  如何在服务器上配置二级域名建站?  javascript中对象的定义、使用以及对象和原型链操作小结  制作电商网页,电商供应链怎么做?  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  香港服务器租用每月最低只需15元?  详解MySQL数据库的安装与密码配置  如何快速搭建高效香港服务器网站?  使用Dockerfile构建java web环境  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Python并发异常传播_错误处理解析【教程】  java ZXing生成二维码及条码实例分享  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  浅谈Javascript中的Label语句  微信小程序 HTTPS报错整理常见问题及解决方案  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  Windows10如何删除恢复分区_Win10 Diskpart命令强制删除分区  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设?  手机怎么制作网站教程步骤,手机怎么做自己的网页链接?  图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf?  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  如何在万网利用已有域名快速建站?  如何为不同团队 ID 动态生成多个非值班状态按钮  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊,能赚钱吗?