利用Android模仿微信摄像圆环进度效果实例

概述前言大家在平时的生活上遇到新奇的事情，都要立即打开微信视频录下来发给朋友看看。这个录制进度条看起来还不错哦，就仿着写了一个，不是样式完全的高仿，是功能的仿制。下面话不多说了，来一起看看详细的介绍吧。

前言

大家在平时的生活上遇到新奇的事情，都要立即打开微信视频录下来发给朋友看看。这个录制进度条看起来还不错哦，就仿着写了一个，不是样式完全的高仿，是功能的仿制。下面话不多说了，来一起看看详细的介绍吧。

微信效果：

源码下载：

github代码直通车

本地下载

自制效果：

实现过程：

1.自定义圆半径和圆环颜色属性：

 <declare-styleable name="CiclePercentVIEw"> <attr name="radius" format="integer"/> <attr name="ring_color" format="color"/> </declare-styleable>

2.设置3支画笔，分别画圆环，背景浅白色，中心白色圆。

 private voID init() { paint = new Paint(); paint.setcolor(ringcolor); paint.setStyle(Paint.Style.stroke); paint.setAntiAlias(true); paint.setstrokeWIDth(14); bgPaint = new Paint(); bgPaint.setAntiAlias(true); bgPaint.setcolor(getResources().getcolor(R.color.halfwhite)); centerPaint = new Paint(); centerPaint.setAntiAlias(true); centerPaint.setcolor(color.WHITE); //起始角度 startAngle = -90; }

3.依次画背景圆，中心圆，圆弧。canvas.drawArc() ，第一个参数表示圆弧外切矩形大小；第二、三个参数表示起始角度，当前角度，-90度为12点方向，0度为3点方向，这里用-90度作为起始；第四个参数表示是否与中心点填充为扇形，false表示只画圆弧线；

画圆弧drawArc()方法参数

 @OverrIDe protected voID onDraw(Canvas canvas) { super.onDraw(canvas); //画圆弧 RectF rectf = new RectF(6,6,dp2px(radius-2),dp2px(radius-2)); canvas.drawCircle(getMeasureDWIDth()/2,getMeasuredHeight()/2,dp2px(radius)/2,bgPaint); canvas.drawCircle(getMeasureDWIDth()/2,dp2px(radius/3)/2,centerPaint); canvas.drawArc(rectf,startAngle,curAngle,false,paint); }

4.计时器，每100毫秒更新一次进度，可设置拍摄总时间totalTime;时间转化为进度范围为0-100；

 public voID countDown(final int totalTime){ countDownTimer = new CountDownTimer(totalTime,(long)(totalTime/100f)) {  @OverrIDe  public voID onTick(long millisUntilFinished) {  curPercentate = (int) ((totalTime-millisUntilFinished)/(float)totalTime*100);  percentToAngle(curPercentate);  }  @OverrIDe  public voID onFinish() {  curPercentate = 0;  percentToAngle(curPercentate);  } }.start(); }

5.按下开始拍摄，只要抬起就完成拍摄，进度恢复为0。

 @OverrIDe public boolean ontouchEvent(MotionEvent event) { switch (event.getAction()){  case MotionEvent.ACTION_DOWN:  countDown(countdownTime);  break;  case MotionEvent.ACTION_UP:  countDownTimer.cancel();  curPercentate = 0;  percentToAngle(curPercentate);  break; } return true; }

CiclePercentVIEw类完整代码：

public class CiclePercentVIEw extends VIEw{ private Paint paint; private int curAngle; private int curPercentate; private Paint bgPaint,centerPaint; private int radius; private int ringcolor; private int startAngle; private int countdownTime; private CountDownTimer countDownTimer; public CiclePercentVIEw(Context context) { super(context); init(); } public CiclePercentVIEw(Context context,@Nullable AttributeSet attrs) { super(context,attrs); TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.CiclePercentVIEw); radius = array.getInt(R.styleable.CiclePercentVIEw_radius,85); ringcolor = array.getcolor(R.styleable.CiclePercentVIEw_ring_color,color.GREEN); array.recycle(); init(); } private voID init() { paint = new Paint(); paint.setcolor(ringcolor); paint.setStyle(Paint.Style.stroke); paint.setAntiAlias(true); paint.setstrokeWIDth(14); bgPaint = new Paint(); bgPaint.setAntiAlias(true); bgPaint.setcolor(getResources().getcolor(R.color.halfwhite)); centerPaint = new Paint(); centerPaint.setAntiAlias(true); centerPaint.setcolor(color.WHITE); //起始角度 startAngle = -90; } @OverrIDe protected voID onDraw(Canvas canvas) { super.onDraw(canvas); //画圆弧 RectF rectf = new RectF(6,paint); } private voID percentToAngle(int percentage){ curAngle = (int) (percentage/100f*360); invalIDate(); } public voID setCountdownTime(int countdownTime){ this.countdownTime = countdownTime; } public voID countDown(final int totalTime){ countDownTimer = new CountDownTimer(totalTime,(long)(totalTime/100f)) {  @OverrIDe  public voID onTick(long millisUntilFinished) {  curPercentate = (int) ((totalTime-millisUntilFinished)/(float)totalTime*100);  percentToAngle(curPercentate);  }  @OverrIDe  public voID onFinish() {  curPercentate = 0;  percentToAngle(curPercentate);  } }.start(); } @OverrIDe public boolean ontouchEvent(MotionEvent event) { switch (event.getAction()){  case MotionEvent.ACTION_DOWN:  countDown(countdownTime);  break;  case MotionEvent.ACTION_UP:  countDownTimer.cancel();  curPercentate = 0;  percentToAngle(curPercentate);  break; } return true; } private int dp2px(int dp){ return (int) (getContext().getResources().getdisplayMetrics().density*dp + 0.5); }}

附：AndroID Canvas drawArc方法介绍

public voID drawArc(RectF oval,float startAngle,float sweepAngle,boolean useCenter,Paint paint)

oval :指定圆弧的外轮廓矩形区域。 startAngle: 圆弧起始角度，单位为度。 sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。 useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。 paint: 绘制圆弧的画板属性，如颜色，是否填充等。

下面演示drawArc的四种不同用法,
1. 填充圆弧但不含圆心：

mPaints[0] = new Paint();mPaints[0].setAntiAlias(true);mPaints[0].setStyle(Paint.Style.FILL);mPaints[0].setcolor(0x88FF0000);mUseCenters[0] = false;

2. 填充圆弧带圆心（扇形）

mPaints[1] = new Paint(mPaints[0]);mPaints[1].setcolor(0x8800FF00);mUseCenters[1] = true;

3. 只绘圆周，不含圆心

mPaints[2] = new Paint(mPaints[0]);mPaints[2].setStyle(Paint.Style.stroke);mPaints[2].setstrokeWIDth(4);mPaints[2].setcolor(0x880000FF);mUseCenters[2] = false;

4. 只绘圆周，带圆心（扇形）

mPaints[3] = new Paint(mPaints[2]);mPaints[3].setcolor(0x88888888);mUseCenters[3] = true;

总结

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

总结

以上是内存溢出为你收集整理的利用Android模仿微信摄像圆环进度效果实例全部内容，希望文章能够帮你解决利用Android模仿微信摄像圆环进度效果实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。