做一个自定义View的小练习，效果如下

只需要画一个圆、一个圆弧、一个百分比文本，添加一个点击事件，传入百分比重绘

1、在res/values文件夹下新建attrs.xml文件，编写自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="CirclePercentView" >
    <attr name="circleBg" format="color"/>
    <attr name="arcColor" format="color"/>
    <attr name="arcWidth" format="dimension"/>
    <attr name="percentTextColor" format="color"/>
    <attr name="percentTextSize" format="dimension"/>
    <attr name="radius" format="dimension"/>
  </declare-styleable>
</resources>

2、新建CirclePercentView继承View，重写构造方法：

public CirclePercentView(Context context) {
    this(context, null);
  }

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

  public CirclePercentView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }

3、在第三个构造方法中获取自定义属性的值：

    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CirclePercentView, defStyleAttr, 0);
    mCircleColor = ta.getColor(R.styleable.CirclePercentView_circleBg, 0xff8e29fa);
    mArcColor = ta.getColor(R.styleable.CirclePercentView_arcColor, 0xffffee00);
    mArcWidth = ta.getDimensionPixelSize(R.styleable.CirclePercentView_arcWidth, DensityUtils.dp2px(context, 16));
    mPercentTextColor = ta.getColor(R.styleable.CirclePercentView_arcColor, 0xffffee00);
    mPercentTextSize = ta.getDimensionPixelSize(R.styleable.CirclePercentView_percentTextSize, DensityUtils.sp2px(context, 16));
    mRadius = ta.getDimensionPixelSize(R.styleable.CirclePercentView_radius, DensityUtils.dp2px(context, 100));
    ta.recycle();

4、创建画图所使用的对象，如Paint、Rect、RectF：

    mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mCirclePaint.setStyle(Paint.Style.FILL);
    mCirclePaint.setColor(mCircleColor);

    mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mArcPaint.setStyle(Paint.Style.STROKE);
    mArcPaint.setStrokeWidth(mArcWidth);
    mArcPaint.setColor(mArcColor);
    mArcPaint.setStrokeCap(Paint.Cap.ROUND);//使圆弧两头圆滑

    mPercentTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPercentTextPaint.setStyle(Paint.Style.STROKE);
    mPercentTextPaint.setColor(mPercentTextColor);
    mPercentTextPaint.setTextSize(mPercentTextSize);

    mArcRectF = new RectF();//圆弧的外接矩形

    mTextBound = new Rect();//文本的范围矩形

5、重写onMeasure()方法，计算自定义View的宽高：

 @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(measureDimension(widthMeasureSpec), measureDimension(heightMeasureSpec));
  }

  private int measureDimension(int measureSpec) {
    int result;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);
    if (specMode == MeasureSpec.EXACTLY) {//精确地，代表宽高为定值或者match_parent时
      result = specSize;
    } else {
      result = 2 * mRadius;
      if (specMode == MeasureSpec.AT_MOST) {//最大地，代表宽高为wrap_content时
        result = Math.min(result, specSize);
      }
    }
    return result;
  }

6、重写onDraw()方法，绘制圆、圆弧和百分比文本，注意坐标的计算：

  @Override
  protected void onDraw(Canvas canvas) {
    //画圆
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, mRadius, mCirclePaint);

    //画圆弧
    mArcRectF.set(getWidth() / 2 - mRadius + mArcWidth / 2, getHeight() / 2 - mRadius + mArcWidth / 2
        , getWidth() / 2 + mRadius - mArcWidth / 2, getHeight() / 2 + mRadius - mArcWidth / 2);
    canvas.drawArc(mArcRectF, 270, 360 * mCurPercent / 100, false, mArcPaint);

    String text = mCurPercent + "%";
    //计算文本宽高
    mPercentTextPaint.getTextBounds(text, 0, String.valueOf(text).length(), mTextBound);
    //画百分比文本
    canvas.drawText(text, getWidth() / 2 - mTextBound.width() / 2
        , getHeight() / 2 + mTextBound.height() / 2, mPercentTextPaint);
  }

7、给这个view设置点击事件，暴露一个动态设置百分比的方法：

  public void setCurPercent(float curPercent) {
    ValueAnimator anim = ValueAnimator.ofFloat(mCurPercent, curPercent);
    //动画时长由百分比大小决定
    anim.setDuration((long) (Math.abs(mCurPercent - curPercent) * 20));
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        float value = (float) animation.getAnimatedValue();
        mCurPercent = (float) (Math.round(value * 10)) / 10;//四舍五入保留到小数点后两位
        invalidate();//重绘，重走onDraw()方法，这也是不能再onDraw()中创建对象的原因
      }
    });
    anim.start();
  }

  public void setOnCircleClickListener(OnClickListener onClickListener) {
    this.mOnClickListener = onClickListener;
  }

    //在构造方法中
    setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        if (mOnClickListener != null) {
          mOnClickListener.onClick(CirclePercentView.this);
        }
      }
    });

8、在activity_main.xml布局文件中使用该View：

<!-- 使用自定义命名空间namespace，cpv是该控件名的首字母缩写，可以随意取 -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:cpv="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <!-- cpv后面的属性名对应attrs.xml文件中的自定义属性名 -->
  <com.monkey.customviewdemo.view.CirclePercentView
    android:id="@+id/circlePercentView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    cpv:arcColor="#ffee00"
    cpv:arcWidth="@dimen/activity_horizontal_margin"
    cpv:circleBg="#8e29fa"
    cpv:percentTextColor="#ffee00"
    cpv:percentTextSize="16sp"
    cpv:radius="100dp" />
</RelativeLayout>

9、在MainActivity.java中设置监听，传入百分比：

  mCirclePercentView = (CirclePercentView) findViewById(R.id.circlePercentView);
  mCirclePercentView.setOnCircleClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
      float percent = (float) (Math.random() * 99 + 1);
      mCirclePercentView.setCurPercent(percent);
    }
  });

代码下载地址：
https://github.com/MonkeyMushroom/CirclePercentView/tree/master

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

# Android  # View  # 百分比  # Android自定义View控件实现刷新效果  # Android自定义View实现随手势滑动控件  # Android自定义View控件实现多种水波纹涟漪扩散效果  # Android自定义View简易折线图控件（二）  # Android自定义View之简约风歌词控件实战指南  # 自定义  # 重写  # 下载地址  # 两位  # 做一个  # 只需要  # 第三个  # 能再  # 外接  # 时长  # 大家多多  # 画一  # 首字母  # 这也是  # 定值  # 四舍五入  # dp2px  # DensityUtils  # CirclePercentView_percentTextSize  # sp2px 

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

相关推荐： 浅析上传头像示例及其注意事项  如何在VPS电脑上快速搭建网站？  如何用PHP工具快速搭建高效网站？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  创业网站制作流程,创业网站可靠吗？  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  Laravel怎么进行数据库回滚_Laravel Migration数据库版本控制与回滚操作  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  javascript中的try catch异常捕获机制用法分析  想要更高端的建设网站，这些原则一定要坚持！  JS弹性运动实现方法分析  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  如何基于云服务器快速搭建网站及云盘系统？  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  公司网站制作需要多少钱,找人做公司网站需要多少钱？  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  5种Android数据存储方式汇总  Laravel怎么上传文件_Laravel图片上传及存储配置  Laravel中的withCount方法怎么高效统计关联模型数量  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  如何在宝塔面板创建新站点？  iOS UIView常见属性方法小结  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  浅谈redis在项目中的应用  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  phpredis提高消息队列的实时性方法(推荐)  简历在线制作网站免费版,如何创建个人简历？  Laravel如何发送系统通知_Laravel Notifications实现多渠道消息通知  如何快速查询域名建站关键信息？  javascript基本数据类型及类型检测常用方法小结  Laravel如何使用Eloquent进行子查询  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  无锡营销型网站制作公司,无锡网选车牌流程？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  如何在橙子建站中快速调整背景颜色？  消息称 OpenAI 正研发的神秘硬件设备或为智能笔，富士康代工  高防服务器如何保障网站安全无虞？  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  Laravel Docker环境搭建教程_Laravel Sail使用指南  三星网站视频制作教程下载,三星w23网页如何全屏？  如何在七牛云存储上搭建网站并设置自定义域名？  node.js报错：Cannot find module 'ejs'的解决办法  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？