源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-09-07 17:28 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:利用Android模仿微信摄像圆环进度效果实例
[b]前言[/b] 大家在平时的生活上遇到新奇的事情,都要立即打开微信视频录下来发给朋友看看。这个录制进度条看起来还不错哦,就仿着写了一个,不是样式完全的高仿,是功能的仿制。下面话不多说了,来一起看看详细的介绍吧。 [b]微信效果:[/b] [img]http://files.jb51.net/file_images/article/201711/2017112792024728.gif?2017102792036[/img] [b]源码下载:[/b] [url=https://github.com/18380438200/WeiChatTake]github代码直通车[/url] [url=http://xiazai.jb51.net/201711/yuanma/WeiChatTake(jb51.net).rar]本地下载[/url] [b]自制效果:[/b] [img]http://files.jb51.net/file_images/article/201711/2017112792056348.gif?2017102792322[/img] [b]实现过程:[/b] 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.依次画背景圆,中心圆,圆弧。[code]canvas.drawArc()[/code] ,第一个参数表示圆弧外切矩形大小;第二、三个参数表示起始角度,当前角度,-90度为12点方向,0度为3点方向,这里用-90度作为起始;第四个参数表示是否与中心点填充为扇形,false表示只画圆弧线; [img]http://files.jb51.net/file_images/article/201711/2017112792244105.png?2017102792253[/img] 画圆弧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);
 }
}
[b]附:Android Canvas drawArc方法介绍[/b] public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) [list] [*]oval :指定圆弧的外轮廓矩形区域。[/*] [*]startAngle: 圆弧起始角度,单位为度。[/*] [*]sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度。[/*] [*]useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形。[/*] [*]paint: 绘制圆弧的画板属性,如颜色,是否填充等。[/*] [/list] 下面演示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;
[b]总结[/b] 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程素材网的支持。  
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部