利用Android模仿微信摄像圆环进度效果实例
前言
创新互联专注于红安网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供红安营销型网站建设,红安网站制作、红安网页设计、红安网站官网定制、小程序制作服务,打造红安网络公司原创品牌,更为您提供红安网站排名全网营销落地服务。
大家在平时的生活上遇到新奇的事情,都要立即打开微信视频录下来发给朋友看看。这个录制进度条看起来还不错哦,就仿着写了一个,不是样式完全的高仿,是功能的仿制。下面话不多说了,来一起看看详细的介绍吧。
微信效果:
源码下载:
github代码直通车
本地下载
自制效果:
实现过程:
1.自定义圆半径和圆环颜色属性:
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模仿微信摄像圆环进度效果实例
网页网址:http://myzitong.com/article/ipgiep.html