Android 实现自定义圆形进度条的功能

Android 实现自定义圆形进度条：

                Android 自定义view,在大多数项目中根据客户需求及用户的体验度来说，都要重新写控件的来展示漂亮的界面，这里就对圆形进度条说下如何实现。

绘制自定义的圆形进度条，分为三个步骤，内圆、外圆、文字。

其中内圆和文字比较好绘制，进度条的变化是由外圆来控制的，所以核心就是绘制外圆。

首先定义分别定义这三个画笔，两个Paint和一个TextPaint

mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setStrokeWidth(CIRCLE_LINE_WIDTH);
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setColor(ContextCompat.getColor(context, R.color.circle_color));

mCircleInnerPaint = new Paint();
mCircleInnerPaint.setAntiAlias(true);
mCircleInnerPaint.setStyle(Paint.Style.FILL);
mCircleInnerPaint.setColor(ContextCompat.getColor(context, R.color.circle_inner_color));

mTextPaint = new TextPaint();
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
mTextPaint.setColor(ContextCompat.getColor(context, R.color.circle_text_color));
mTextPaint.setTextSize(TEXT_SIZE);

然后让我们分别绘制出这三个部分获取自定义View的宽和高

float halfWidth = getMeasuredWidth() / 2;
float halfHeight = getMeasuredHeight() / 2;

绘制外圆

canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint);

绘制内圆

canvas.drawCircle(halfWidth, halfHeight,CIRCLE_RADIUS - CIRCLE_LINE_WIDTH / 2，mCircleInnerPaint);

绘制文字

canvas.drawText(mProgressText,halfWidth - mTextPaint.measureText(mProgressText) / 2,halfHeight - (mTextPaint.ascent() + mTextPaint.descent()) / 2,mTextPaint);

最后的效果如下图

绘制完了基本的图案，下一步就是实现进度条的动画效果

进度条是实时变化的，所以需要不断的去更新进度，进度可以用圆弧开绘制

设置进度的方法

public void setProgress(float progress) {
 if (progress > 100) {
  progress = 100;
 }
 if (progress < 0) {
  progress = 0;
 }
 mProgress = progress;
 mProgressText = "Pause";
 mStartProgress = true;
 postInvalidate();
}

在Activity中开一个线程模拟网络请求后更新进度条的操作

没30毫秒更新一次数据，当进度超过100，停止刷新界面

private void startProgress() {
 new Thread() {
 @Override
 public void run() {
  super.run();
  float currentProgress = mCustomView.getCurrentProgress();
  ++currentProgress;
  mCustomView.setProgress(currentProgress);
  try {
   sleep(30);
   if (currentProgress <= 100) {
    startProgress();
   } else {
    mCustomView.progressFinished();
   }
  } catch (InterruptedException e) {
    e.printStackTrace();
  }
 }
 }.start();
}

最核心的部分，进度更新后更新绘制圆形进度条

float halfWidth = getMeasuredWidth() / 2;
float halfHeight = getMeasuredHeight() / 2;
if (null == mCircleRectF) {
  mCircleRectF = new RectF(halfWidth - CIRCLE_RADIUS, halfHeight - CIRCLE_RADIUS,      halfWidth + CIRCLE_RADIUS, halfHeight + CIRCLE_RADIUS);
}
if (mStartProgress) {
  float swipeProgress = mProgress / 100f * 360;
  LogUtils.e("swipeProgress = " + swipeProgress);
  canvas.drawArc(mCircleRectF, -90, swipeProgress, true, mCirclePaint);
} else {
  canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint);
}

绘制的思路就是把progress进度转换为圆弧的弧度，然后不断绘制出来，这里要注意，从-90开始，也就是时钟的0点时刻开始绘制。如果进度已经绘制完成，或者还没有开始，则直接绘制一个圆形。

大概思路就是这样，最后上两张效果图

如果有什么更好的实现思路，可以一起讨论学习。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 自定义Android圆形进度条(附源码)

    自定义Android圆形进度条(附源码)

    本文实例讲述了Android自定义圆形进度条,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 自定义的View: import com.example.circlepregress.R; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import andr

  • Android 实现自定义圆形进度条的实例代码

    Android 实现自定义圆形进度条的实例代码

    Android 自定义圆形进度条 今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100% 首先看看自定义的属性 在values目录下新建attrs.xml内容如下: 定义绘制圆形的背景色,和绘制圆形的半径

  • Android自定义View之圆形进度条式按钮

    Android自定义View之圆形进度条式按钮

    介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

  • android自定义进度条渐变圆形

    android自定义进度条渐变圆形

    在安全卫生上,经常看到有圆形的进度条在转动,效果非常好看,于是就尝试去实现一下,具体实现过程不多说了,直接上效果图,先炫耀下. 效果图: 分析:比较常见于扫描结果.进度条等场景 利用canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)绘制圆弧 Paint的一些属性定义粗细.颜色.样式等 LinearGradient实现颜色的线型渐变 同样的道理,可以画出长条进度

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

    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实现自定义圆形进度条

    Android实现自定义圆形进度条

    今天无意中发现一个圆形进度,想想自己实现一个,如下图: 基本思路是这样的: 1.首先绘制一个实心圆 2.绘制一个白色实心的正方形,遮住实心圆 3.在圆的中心动态绘制当前进度的百分比字符 4.绘制一个与之前实心圆相同颜色的空心圆 5.逐渐改变当前的百分比 6.根据百分比,逐渐改变正方形的大小,逐渐减小正方形的底部y轴的坐标,不断重绘,直到达到100% 首先看看自定义的属性 在values目录下新建attrs.xml内容如下: 定义绘制圆形的背景色,和绘制圆形的半径大小 <?xml version=

  • Android三种方式实现ProgressBar自定义圆形进度条

    进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条. Android进度条有4种风格可以使用. 默认值是progressBarStyle. 设置成progressBarStyleSmall后,图标变小. 设置成progressBarStyleLarge后,图标变大 设置成progressBarStyleHorizontal后,变成横向长方形. 自定义圆形进度条ProgressBar的一般有三种方式: 一.通过动画实现 定义res/a

  • Android自定义圆形倒计时进度条

    Android自定义圆形倒计时进度条

    效果预览 源代码传送门:https://github.com/yanzhenjie/CircleTextProgressbar 实现与原理 这个文字圆形的进度条我们在很多APP中看到过,比如APP欢迎页倒计时,下载文件倒计时等. 分析下原理,可能有的同学一看到这个自定义View就慌了,这个是不是要继承View啊,是不是要绘制啊之类的,答案是:是的.但是我们也不要担心,实现这个效果实在是so easy.下面就跟我一起来看看核心分析和代码吧. 原理分析 首先我们观察上图,需要几个部分组成: 1. 外

  • Android带进度的圆形进度条

    Android带进度的圆形进度条

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

  • Android 实现自定义圆形进度条的功能

    Android 实现自定义圆形进度条的功能

    Android 实现自定义圆形进度条:                 Android 自定义view,在大多数项目中根据客户需求及用户的体验度来说,都要重新写控件的来展示漂亮的界面,这里就对圆形进度条说下如何实现. 绘制自定义的圆形进度条,分为三个步骤,内圆.外圆.文字. 其中内圆和文字比较好绘制,进度条的变化是由外圆来控制的,所以核心就是绘制外圆. 首先定义分别定义这三个画笔,两个Paint和一个TextPaint mCirclePaint = new Paint(); mCirclePai

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

    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.

  • Android自定义圆形进度条

    Android自定义圆形进度条

    今天小编来手写一个自定义圆形进度条:先看效果: 首先我们在attrs属性文件中增加几个自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CustomProgressBar"> <!-- 圆形进度条进度显示的颜色 --> <attr name="roundProgressC

  • Android自定义圆形进度条效果

    本文实例为大家分享了Android自定义圆形进度条效果的具体代码,供大家参考,具体内容如下 1 控件 RoundProgress package listview.tianhetbm.p2p.ui; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import a

  • Android View实现圆形进度条

    Android View实现圆形进度条

    本文实例为大家分享了Android View实现圆形进度条的具体代码,供大家参考,具体内容如下 主要涉及到下面几个方法: // 画圆 canvas.drawCircle // 画圆弧 canvas.drawArc // 画文本 canvas.drawText // 抗锯齿 paint.setAntiAlias(true); // 设置颜色 paint.setColor(getResources().getColor(mFgColor, null)); 其次就是对坐标的计算,还有注意就是画圆弧的时

  • 详解微信小程序——自定义圆形进度条

    详解微信小程序——自定义圆形进度条

    微信小程序 自定义圆形进度条,具体如下: 无图无真相,先上图: 实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条. 代码实现: JS代码: Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转所带来的参数 }, onReady: function () { // 页面渲染完成 var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文con

  • Android中自定义水平进度条样式之黑色虚线

    以下内容给大家介绍Android中自定义水平进度条样式之黑色虚线,对代码实现方法感兴趣的朋友一起学习吧. 布局layout中使用: <ProgressBar android:id="@+id/progress_bar" style="?android:attr/progressBarStyleHorizontal" <!--必须设置为水平--> android:progressDrawable="@drawable/myprogress&

随机推荐