利用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,getmeasuredheight()/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,6,dp2px(radius-2),dp2px(radius-2));
 canvas.drawcircle(getmeasuredwidth()/2,getmeasuredheight()/2,dp2px(radius)/2,bgpaint);
 canvas.drawcircle(getmeasuredwidth()/2,getmeasuredheight()/2,dp2px(radius/3)/2,centerpaint);
 canvas.drawarc(rectf,startangle,curangle,false,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;

总结

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