利用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;

总结

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

您可能感兴趣的文章:

• android自定义View实现圆环颜色选择器
• Android自定义带动画的半圆环型进度效果
• Android自定义view绘制圆环占比动画
• Android实现动态圆环的图片头像控件
• Android自定义View实现圆环交替效果
• Android中自定义View实现圆环等待及相关的音量调节效果
• Android自定义View之酷炫圆环（二）
• Android自定义View之酷炫数字圆环
• Android开发笔记之:在ImageView上绘制圆环的实现方法
• Android实现光点模糊渐变的自旋转圆环特效