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

Android利用Paint自定义View实现进度条控件方法示例

这篇文章主要给大家介绍了关于Android利用Paint自定义View实现进度条控件的相关资料,文中通过示例代码介绍的非常详细,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

前言

View的三大流程:测量,布局,绘制,自定义View学的是啥?无非就两种:绘制文字和绘制图像。

我们在上一篇文章《Android绘图之Paint的使用》中学习了Paint的基本用法,但是具体的应用我们还没有实践过。从标题中可知,本文是带领读者使用Paint,自定义一个进度条控件。

效果图


上图就是本文要实现的效果图。

实现过程

既然是自定义控件,本文的该控件是直接继承View,然后重写View的onMeasure和onDraw方法来实现。其中onMeasure主要作用是测量控件的宽/高。而onDraw则是将界面绘制到屏幕上。

从效果的效果上看,我们需要自定义一些属性,如:进度度条的颜色、圆边框的颜色、圆边框的宽度和文本的大小等等。
具体的自定义属性请看下面attrs.xml的代码:

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

 
 
 
 
 
 
 
 
 
  
  
 
 

接下来看本文的最重要部分,也就是自定义View

public class CustomProgressBar extends View {

 private int max = 100;//总进度
 private int roundColor = Color.RED;//进度圆弧的颜色
 private float roundWidth = 10;//圆边框宽度
 private int roundProgressColor = Color.BLUE;//默认的大圆环边框颜色
 private float textSize = 55;//文本大小
 private int textColor = Color.GREEN;//文本默认颜色
 private boolean textShow = true;//是否展示文本
 public static final int STROKE = 0;//描边
 public static final int FILL = 1;//填充
 private int style = STROKE;//默认描边

 private int progress;//进度
 private Paint mPaint;

 private int mWidth = 200;//默认控件宽度,wrap_content时候使用
 private int mHeight = 200;//默认控件高度,wrap_content时候使用


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

 public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs);
 }

 private void init(Context context, AttributeSet attrs) {
 mPaint = new Paint();
 if (attrs != null) {
  TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);
  max = typedArray.getInteger(R.styleable.CustomProgressBar_max, 100);
  roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.BLUE);
  roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor, Color.BLUE);
  textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor, Color.GREEN);
  textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize, 55);
  roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth, 10);
  textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow, true);
  style = typedArray.getInt(R.styleable.CustomProgressBar_style, 0);

  typedArray.recycle();
 }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
 int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
 int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
 int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
 if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST){
  setMeasuredDimension(mWidth,mHeight);
 }else if (widthSpecMode == MeasureSpec.AT_MOST){
  setMeasuredDimension(mWidth,heightSpecSize);
 }else if (heightSpecMode == MeasureSpec.AT_MOST){
  setMeasuredDimension(widthSpecSize,mHeight);
 }
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);

 final int paddingLeft = getPaddingLeft();
 final int paddingRight = getPaddingRight();
 final int paddingTop = getPaddingTop();
 final int paddingBottom = getPaddingBottom();
 int width = getWidth() - paddingLeft - paddingRight;
 int height = getHeight() - paddingBottom - paddingTop;

 //画默认的大圆环
 float radius = (float)Math.min(width,height)/2.0f;//中心坐标点
 mPaint.setColor(roundColor);
 mPaint.setStyle(Paint.Style.STROKE);//描边
 mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
// if (style == STROKE){
//  mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
// }
 mPaint.setAntiAlias(true);
 //(float cx, float cy, float radius, @NonNull Paint paint)
 canvas.drawCircle(paddingLeft+width/2,paddingTop+height/2,radius,mPaint);

 //画进度百分比
 mPaint.setColor(textColor);
 mPaint.setStrokeWidth(0);//圆环的宽度
 mPaint.setTextSize(textSize);
 mPaint.setTypeface(Typeface.DEFAULT_BOLD);

 int percent = (int)(progress/(float)max * 100);
 if(textShow && percent!=0 && style == STROKE){
  //(@NonNull String text, float x, float y, @NonNull Paint paint)
  canvas.drawText(percent+"%", (getWidth()-mPaint.measureText(percent+"%"))/2f,
   //y公式: float baselineY = centerY + (fontMetrics.bottom-fontMetrics.top)/2 - fontMetrics.bottom
   getWidth()/2f-(mPaint.descent()+mPaint.ascent())/2f,
   mPaint);
 }

 //画圆弧
 //矩形区域,定义圆弧的形状大小
 //(float left, float top, float right, float bottom)
 RectF oval = new RectF(paddingLeft, paddingTop, width+paddingLeft, height+paddingTop);
 mPaint.setColor(roundProgressColor);
 mPaint.setStrokeWidth(roundWidth);//圆环边的宽度
 switch (style){
  case STROKE:
  mPaint.setStyle(Paint.Style.STROKE);
  //(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
  //useCenter:设置圆弧在绘画的时候,是否经过圆形
  canvas.drawArc(oval , 0, 360*progress/max, false, mPaint);
  break;
  case FILL:
  mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
  if(progress!=0)
   canvas.drawArc(oval , 0, 360*progress/max, true, mPaint);
  break;
  default:
  break;
 }

 }

 public void setProgressWidth(int width) {
 mWidth = width;
 }

 public void setProgressHeight(int height) {
 mHeight = height;
 }

 public synchronized void setMax(int max) {
 if (max <0) {
  throw new IllegalArgumentException("max不能小于0");
 }
 this.max = max;
 }

 public void setRoundColor(int roundColor) {
 this.roundColor = roundColor;
 }

 public void setRoundWidth(float roundWidth) {
 this.roundWidth = roundWidth;
 }

 public void setRoundProgressColor(int roundProgressColor) {
 this.roundProgressColor = roundProgressColor;
 }

 public void setTextSize(float textSize) {
 this.textSize = textSize;
 }

 public void setTextColor(int textColor) {
 this.textColor = textColor;
 }

 public void setTextShow(boolean textShow) {
 this.textShow = textShow;
 }

 public synchronized void setProgress(int progress) {
 if (progress <0) {
  throw new IllegalArgumentException("progress不能小于0");
 }
 if (progress > max) {
  progress = max;
 }
 if (progress <= max) {
  this.progress = progress;
  postInvalidate();
 }
 }

 public synchronized int getMax() {
 return max;
 }

 public int getRoundColor() {
 return roundColor;
 }

 public float getRoundWidth() {
 return roundWidth;
 }

 public int getRoundProgressColor() {
 return roundProgressColor;
 }

 public int getTextColor() {
 return textColor;
 }

 public boolean isTextShow() {
 return textShow;
 }

 public synchronized int getProgress() {
 return progress;
 }
}

流程:初始化的时候会拿到自定义属性,然后onMeasure方法中测量控件的宽和高,该方法主要处理了LayoutParams的wrap_content,当wrap_content时,默认设置默认宽/高,而不是让控件占据整个屏幕,需要调用setMeasuredDimension方法测量。最后测量得到了控件的宽/高,调用onDraw方法将界面绘制到屏幕上,在onDraw方法绘制的时需要考虑padding的情况,如果不做padding处理,则padding将不起作用。

onDraw绘制流程:先绘制一个默认的大圆环,然后在圆中心绘制百分比的文本,最后再绘制一个进度圆环,进度圆环会覆盖底部的默认大圆环,这样就达到显示进度的情况。

设置好画笔之后,使用canvas.drawCircle绘制默认的大圆环,再次设置画笔,使用canvas.drawText方法绘制文本;画圆弧时需要定义一个矩形区域RectF,通过canvas.drawArc方法绘制。

绘制好之后,如何让用户看到进度条在变化呢?其实就是通过setProgress方法里面的postInvalidate()方法,该方法会刷新界面,刷新界面时会调用onDraw,这样就可以将进度画到屏幕上,进度条不停的在变化。

使用

XML中使用

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


 

 

Activity代码如下:

public class PaintActivity extends AppCompatActivity {

 private CustomProgressBar mCustomProgressBar;
 private CustomProgressBar mCustomProgressBar01;
 private int progress;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_paint);
 mCustomProgressBar = (CustomProgressBar)this.findViewById(R.id.progressbar);
 mCustomProgressBar.setOnClickListener(new View.OnClickListener() {

  @Override
  public void onClick(View v) {
  new Thread(new Runnable() {


   @Override
   public void run() {
   progress = 0;
   while (progress <= 100) {
    progress += 2;
    mCustomProgressBar.setProgress(progress);
    try {
    Thread.sleep(100);
    } catch (InterruptedException e) {
    e.printStackTrace();
    }
   }
   }
  }).start();
  }
 });


 mCustomProgressBar01 = (CustomProgressBar)this.findViewById(R.id.progressbar01);
 mCustomProgressBar01.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  new Thread(new Runnable() {


   @Override
   public void run() {
   progress = 0;
   while (progress <= 100) {
    progress += 2;
    mCustomProgressBar01.setProgress(progress);
    try {
    Thread.sleep(100);
    } catch (InterruptedException e) {
    e.printStackTrace();
    }
   }
   }
  }).start();
  }
 });
 }
}

这样就完成了一个自定义的进度条控件,并且在onDraw方法中使用Paint将界面绘制出来。读者可以自行实践一把,加深对Paint的理解。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。


推荐阅读
  • ListView简单使用
    先上效果:主要实现了Listview的绑定和点击事件。项目资源结构如下:先创建一个动物类,用来装载数据:Animal类如下:packagecom.example.simplelis ... [详细]
  • 本文详细介绍了Java中实现异步调用的多种方式,包括线程创建、Future接口、CompletableFuture类以及Spring框架的@Async注解。通过代码示例和深入解析,帮助读者理解并掌握这些技术。 ... [详细]
  • 本文详细介绍了 Android 开发中 layout_gravity 属性的使用方法及其在不同布局下的效果,旨在帮助开发者更好地理解和利用这一属性来精确控制视图的布局。 ... [详细]
  • Servlet过滤器入门:实现与配置
    本文介绍如何在Java Web应用中实现和配置Servlet过滤器,通过实现`javax.servlet.Filter`接口来创建过滤器,并详细说明其在web.xml文件中的配置方法。 ... [详细]
  • 本文探讨了如何在Java中使用JAXB解组两个具有相同名称但不同结构的对象。我们将介绍一个抽象类Bar及其具体实现,并展示如何正确地解析XML文档以获取正确的对象实例。 ... [详细]
  • Python3 中使用 lxml 模块解析 XPath 数据详解
    XPath 是一种用于在 XML 文档中查找信息的路径语言,同样适用于 HTML 文件的搜索。本文将详细介绍如何利用 Python 的 lxml 模块通过 XPath 技术高效地解析和抓取网页数据。 ... [详细]
  • springMVC JRS303验证 ... [详细]
  • 本文详细介绍了如何正确配置Java环境变量PATH,以确保JDK安装完成后能够正常运行。文章不仅涵盖了基本的环境变量设置步骤,还提供了针对不同操作系统下的具体操作指南。 ... [详细]
  • 本文将详细介绍通过CAS(Central Authentication Service)实现单点登录的原理和步骤。CAS由耶鲁大学开发,旨在为多应用系统提供统一的身份认证服务。文中不仅涵盖了CAS的基本架构,还提供了具体的配置实例,帮助读者更好地理解和应用这一技术。 ... [详细]
  • 近期我们开发了一款包含天气预报功能的万年历应用,为了满足这一需求,团队花费数日时间精心打造并测试了一个稳定可靠的天气API接口,现正式对外开放。 ... [详细]
  • 本文介绍了一种根据目标检测结果,从原始XML文件中提取并分析特定类别的方法。通过解析XML文件,筛选出特定类别的图像和标注信息,并保存到新的文件夹中,以便进一步分析和处理。 ... [详细]
  • 烤鸭|本文_Spring之Bean的生命周期详解
    烤鸭|本文_Spring之Bean的生命周期详解 ... [详细]
  • 俗话说得好,“工欲善其事,必先利其器”。这句话不仅强调了工具的重要性,也提醒我们在任何项目开始前,准备合适的工具至关重要。本文将介绍几款C语言编程中常用的工具,帮助初学者更好地选择适合自己学习和工作的编程环境。 ... [详细]
  • 本文将详细介绍如何安装和使用 CactiEZ 的中文版本,帮助那些对英文界面不太熟悉的用户轻松掌握这一强大的网络监控工具。 ... [详细]
  • 最新计算机专业原创毕业设计参考选题都有源码+数据库是近期作品ling取参考你的选题刚好在下面有,有时间看到机会给您发1ssm资源循环利用2springboot校园考勤系统3ssm防 ... [详细]
author-avatar
HJL--希
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有