热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义View实现圆弧进度的效果

这篇文章主要为大家详细介绍了Android自定义View实现圆弧进度的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

Android开发中,常常自定义View实现自己想要的效果,当然自定义View也是Android开发中比较难的部分,涉及到的知识有Canvas(画布),Paint(画笔)等,自定义控件分为三种:一是直接继承自View,完全的自定义;二是在原有控件的基础上进行改造,达到自己想要的效果;还有一种就是自定义组合控件,将已有的控件根据自己的需要进行组合实现的效果。本人对自定义View也是一知半解,简单记录下自己学习自定义View(继承自View)的过程,方便日后翻阅。

使用技术

1、继承View
2、Canvas
3、paint

效果图:

1.分析组件

自定义view首先我们要分析组件是由几部分组成,然后在依次顺序使用canvas画出组件,首先可以看出该组件由一个背景外部圆,一个圆弧,以及圆弧端点是由两个圆组成,内部是三个文字。分析完毕,我们就可以先定义组件属性了

2.组件属性

1.在values目录下新建attrs.xml文件,用来编写组件属性

<&#63;xml version="1.0" encoding="utf-8"&#63;>

 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 

2.自定义view继承View并实现构造方法

public class ProgressView extends View {
/**
  * 在java代码里new的时候会用到
  * @param context
  */
 public ProgressView(Context context) {
  super(context);
  init(context, null);
 }

 /**
  * 在xml布局文件中使用时自动调用
  * @param context
  */
 public ProgressView(Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  init(context,attrs);
 }

 /**
  * 不会自动调用,如果有默认style时,在第二个构造函数中调用
  * @param context
  * @param attrs
  * @param defStyleAttr
  */
 public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
 }
}

2.初始化属性

 /**
  * 初始化属性
  * @param context
  * @param attrs
  */
 private void init(Context context,AttributeSet attrs){
  this.mCOntext= context;
  if(attrs!=null){
   TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);
   title = array.getString(R.styleable.ProgressView_title);
   num = array.getString(R.styleable.ProgressView_num);
   unit = array.getString(R.styleable.ProgressView_unit);
   titleTextsize = array.getDimension(R.styleable.ProgressView_titleTextsize,24);
   numTextsize = array.getDimension(R.styleable.ProgressView_numTextsize,48);
   unitTextsize = array.getDimension(R.styleable.ProgressView_unitTextsize,24);
   titleTextColor = array.getColor(R.styleable.ProgressView_titleTextColor, Color.parseColor("#656d78"));
   numTextColor = array.getColor(R.styleable.ProgressView_numTextColor, Color.parseColor("#4fc1e9"));
   unitTextColor = array.getColor(R.styleable.ProgressView_unitTextColor, Color.parseColor("#4fc1e9"));
   backCircleWidth = array.getDimension(R.styleable.ProgressView_backCircleWidth, 12);
   outerCircleWidth = array.getDimension(R.styleable.ProgressView_outerCircleWidth, 20);
   backCircleColor = array.getColor(R.styleable.ProgressView_backCircleColor, Color.parseColor("#e6e9ed"));
   outerCircleColor = array.getColor(R.styleable.ProgressView_outerCircleColor, Color.parseColor("#4fc1e9"));
   endCircleWidth = array.getDimension(R.styleable.ProgressView_endCircleWidth,24);
   endCircleColor = array.getColor(R.styleable.ProgressView_endCircleColor, Color.parseColor("#4fc1e9"));
   edgeDistance = array.getDimension(R.styleable.ProgressView_edgeDistance, 12);
   currentPercent = array.getFloat(R.styleable.ProgressView_currentPercent, 0);
   if(currentPercent>1||currentPercent<0){
    currentPercent = currentPercent>1&#63;1:0;
   }
   //初始化画笔
   backCirclePaint = new Paint();
   backCirclePaint.setAntiAlias(true);
   backCirclePaint.setStrokeWidth(backCircleWidth);
   backCirclePaint.setColor(backCircleColor);
   backCirclePaint.setStyle(Paint.Style.STROKE);

   outerCirclePaint = new Paint();
   outerCirclePaint.setAntiAlias(true);
   outerCirclePaint.setStrokeWidth(outerCircleWidth);
   outerCirclePaint.setColor(outerCircleColor);
   outerCirclePaint.setStyle(Paint.Style.STROKE);

   endBigCirclePaint = new Paint();
   endBigCirclePaint.setAntiAlias(true);
   endBigCirclePaint.setStrokeWidth(endCircleWidth);
   endBigCirclePaint.setColor(endCircleColor);
   endBigCirclePaint.setStyle(Paint.Style.STROKE);

   endSmallCirclePaint = new Paint();
   endSmallCirclePaint.setAntiAlias(true);
   endSmallCirclePaint.setColor(Color.WHITE);
   endSmallCirclePaint.setStyle(Paint.Style.FILL);

   titlePaint = new Paint();
   //通过设置Flag来应用抗锯齿效果
   titlePaint.setFlags(Paint.ANTI_ALIAS_FLAG);
   titlePaint.setAntiAlias(true);
   //设置文字居中
   //titlePaint.setTextAlign(Paint.Align.CENTER);
   titlePaint.setColor(titleTextColor);
   titlePaint.setTextSize(titleTextsize);

   numPaint = new Paint();
   numPaint.setAntiAlias(true);
   numPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
   //设置文字居中
   //numPaint.setTextAlign(Paint.Align.CENTER);
   numPaint.setColor(numTextColor);
   numPaint.setTextSize(numTextsize);

   unitPaint = new Paint();
   unitPaint.setAntiAlias(true);
   unitPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
   //unitPaint.setTextAlign(Paint.Align.CENTER);
   unitPaint.setColor(unitTextColor);
   unitPaint.setTextSize(unitTextsize);
   //释放
   array.recycle();
  }
}

3.获取组件高度宽度,重写onMeasure方法

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  ///获取总宽度,是包含padding值
   //处理WAP_CONTENT
  int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
  width = MeasureSpec.getSize(widthMeasureSpec);
  int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
  height = MeasureSpec.getSize(heightMeasureSpec);
  if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
   //默认大小 200*200
   setMeasuredDimension(200,200);
  }else if (widthSpecMode == MeasureSpec.AT_MOST) {
   setMeasuredDimension(height, height);
  }else if (heightSpecMode == MeasureSpec.AT_MOST) {
   setMeasuredDimension(width, width);
  }
 }

4.重写onDraw()绘制组件各部分

@Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //圆心
  int centerX = width / 2;
  int centerY = height / 2;
  //计算半径
  float radius = centerX - edgeDistance;
  //画背景圆
  drawBackCircle(canvas,centerX,centerY,radius);
  //绘制圆弧进度
  drawProgress(canvas,centerX,centerY);
  //绘制标题
  drawText(canvas);
 }```

###### 4.1绘制背景圆

```java
 /**
  * 绘制背景圆
  * @param canvas
  * @param x 圆心位置x
  * @param y 圆心位置y
  * @param radius 半径
  */
 private void drawBackCircle(Canvas canvas,int x,int y,float radius){
  canvas.drawCircle(x,y,radius,backCirclePaint);
 }

4.2 绘制圆弧进度

1.注意:圆弧上端点进度为0或者100不显示,此外端点的位置使用sin和cos来确定坐标;

/**
  * 绘制圆弧进度
  */
 private void drawProgress(Canvas canvas,int x,int y){
  //圆弧的范围
  RectF rectF = new RectF(edgeDistance, edgeDistance, width - edgeDistance, height - edgeDistance);
  //定义的圆弧的形状和大小的范围
  // 置圆弧是从哪个角度来顺时针绘画的
  //设置圆弧扫过的角度
  //设置我们的圆弧在绘画的时候,是否经过圆形 这里不需要
  //画笔
  canvas.drawArc(rectF, -90, 360 * currentPercent, false, outerCirclePaint);
  //绘制端圆
  //进度在0~100%的时候才会画终点小圆,可以自由改动
  if(currentPercent>0&¤tPercent<1){
   //绘制外层大圆
   canvas.drawCircle(x + rectF.width() / 2 * (float) Math.sin(360 * currentPercent * Math.PI / 180),
     y - rectF.width() / 2 * (float) Math.cos(360 * currentPercent * Math.PI / 180), endCircleWidth / 2, endBigCirclePaint);
   //绘制内层圆点
   canvas.drawCircle(x + rectF.width() / 2 * (float) Math.sin(360 * currentPercent * Math.PI / 180),
     y - rectF.width() / 2 * (float) Math.cos(360 * currentPercent * Math.PI / 180), endCircleWidth / 4, endSmallCirclePaint);
  }
 }

4.3 绘制文字

 /**
  * 绘制标题
  * @param canvas
  */
 private void drawText(Canvas canvas) {
  Rect textRect = new Rect();
  //返回的则是当前文本所需要的最小宽度,也就是整个文本外切矩形的宽度
  titlePaint.getTextBounds(title, 0, title.length(), textRect);//25 50 175
  //高度平分四部分
  float h = height/ 4;
  //文字居中
  canvas.drawText(title, width / 2 - textRect.width() / 2, h + textRect.height() / 2, titlePaint);

  numPaint.getTextBounds(num, 0, num.length(), textRect);
  canvas.drawText(num, width / 2 - textRect.width() / 2, h*2 + textRect.height() / 2, numPaint);

  unitPaint.getTextBounds(unit, 0, unit.length(), textRect);
  canvas.drawText(unit, width / 2 - textRect.width() / 2, 3*h + textRect.height() / 2, unitPaint);
 }

4.4提供外部修改进度方法以及进度过度

/**
  * 设置进度
  */
 public void setProgress(final float progress){
  new Thread(new Runnable() {
   @Override
   public void run() {
    for(int i=0;i<=progress*100;i++){
     Message msg = new Message();
     msg.what = 1;
     msg.obj = i;
     try {
      Thread.sleep(20);
      handler.sendMessage(msg);
     } catch (InterruptedException e) {
      e.printStackTrace();
     }
    }
   }
  }).start();
 }
 
 private Handler handler = new Handler(new Handler.Callback(){
  @Override
  public boolean handleMessage(@NonNull Message msg) {
   if(msg.what==1){
    currentPercent = ((float)Integer.valueOf(msg.obj+"")/100);
    System.out.println("更新"+currentPercent);
    invalidate();
   }
   return false;
  }
 });

总结:使用Canvas的drawArc方法绘制圆弧及drawText绘制文本信息等;

github地址:项目地址

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


推荐阅读
  • 嵌入式开发环境搭建与文件传输指南
    本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境,并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]
  • 简化报表生成:EasyReport工具的全面解析
    本文详细介绍了EasyReport,一个易于使用的开源Web报表工具。该工具支持Hadoop、HBase及多种关系型数据库,能够将SQL查询结果转换为HTML表格,并提供Excel导出、图表显示和表头冻结等功能。 ... [详细]
  • Android 6.0 切换指定 Wi-Fi 的解决方案
    本文详细介绍了在 Android 6.0 系统中切换到指定 Wi-Fi 的方法,包括常见的问题、原因分析及解决方案。通过官方文档和代码示例,帮助开发者更好地理解和实现这一功能。 ... [详细]
  • 本文探讨了如何在Classic ASP中实现与PHP的hash_hmac('SHA256', $message, pack('H*', $secret))函数等效的哈希生成方法。通过分析不同实现方式及其产生的差异,提供了一种使用Microsoft .NET Framework的解决方案。 ... [详细]
  • 本文介绍了如何通过Java代码计算一个整数的位数,并展示了多个基础编程示例,包括求和、平均分计算、条件判断等。 ... [详细]
  • ListView简单使用
    先上效果:主要实现了Listview的绑定和点击事件。项目资源结构如下:先创建一个动物类,用来装载数据:Animal类如下:packagecom.example.simplelis ... [详细]
  • 本文详细介绍了Java中实现异步调用的多种方式,包括线程创建、Future接口、CompletableFuture类以及Spring框架的@Async注解。通过代码示例和深入解析,帮助读者理解并掌握这些技术。 ... [详细]
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • 解决Spring Boot项目创建失败的问题
    在尝试创建新的Spring Boot项目时遇到了一些问题,具体表现为在项目创建过程中的两个关键步骤出现错误。本文将详细探讨这些问题及其解决方案。 ... [详细]
  • Android Studio 安装与配置指南
    本教程详细介绍了如何下载并安装 Android Studio,包括设置 SDK 路径和优化启动性能的方法。通过这些步骤,您可以顺利地开始开发 Android 应用。 ... [详细]
  • 深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景,并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual),欢迎Star并持续关注。 ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
  • 本文详细介绍了如何正确配置Java环境变量PATH,以确保JDK安装完成后能够正常运行。文章不仅涵盖了基本的环境变量设置步骤,还提供了针对不同操作系统下的具体操作指南。 ... [详细]
  • 本文将详细介绍通过CAS(Central Authentication Service)实现单点登录的原理和步骤。CAS由耶鲁大学开发,旨在为多应用系统提供统一的身份认证服务。文中不仅涵盖了CAS的基本架构,还提供了具体的配置实例,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 近期我们开发了一款包含天气预报功能的万年历应用,为了满足这一需求,团队花费数日时间精心打造并测试了一个稳定可靠的天气API接口,现正式对外开放。 ... [详细]
author-avatar
吴小彬x
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有