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

更新时间：2017年11月27日 09:12:02 作者：翻滚吧李博

圆环进度条，大家应该都见过，而这篇文章主要给大家介绍了关于利用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内存泄漏导致原因深入探究
内存管理的目的就是让我们在开发过程中有效避免我们的应用程序出现内存泄露的问题。内存泄露相信大家都不陌生，我们可以这样理解：没有用的对象无法回收的现象就是内存泄露
2023-02-02
Android自定义圆环式进度条
这篇文章主要为大家详细介绍了Android自定义圆环式进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
Android开发基于ViewPager+GridView实现仿大众点评横向滑动功能
这篇文章主要介绍了Android开发基于ViewPager+GridView实现仿大众点评横向滑动功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
Android WebView无法弹出软键盘的原因及解决办法
这篇文章主要介绍了Android WebView无法弹出软键盘的原因及解决办法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
android控件之WebView控件缩小
发现这个控件挺好用，能自已控制进度条，而且这个控件的功能非常壮大,先上个简单的
2013-05-05
Android进阶教程之ViewGroup自定义布局
这篇文章主要给大家介绍了关于Android进阶教程之ViewGroup自定义布局的相关资料，文中通过示例代码介绍的非常详细，对各位Android开发者们具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
常见Android选项菜单样式集合
这篇文章主要为大家分享了一份属于你自己的常见Android菜单样式集合，方便大家开发使用Android菜单，对OptionMenu感兴趣的小伙伴们可以参考一下
2016-02-02
ViewFlipper实现上下翻滚轮播效果
这篇文章主要为大家详细介绍了ViewFlipper实现上下翻滚轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08
Android实现简单实用的垂直进度条
这篇文章主要为大家详细介绍了Android实现简单实用的垂直进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Android自定义滑动删除效果的实现代码
这篇文章将从现有 Android 滑动删除的痛点,到搭建好一个基本的框架,到最终提供一份完整的 Demo为止,争取为读者提供最大的可定制化,需要的朋友可以参考下
2018-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具