利用Android模仿微信攝像圓環(huán)進(jìn)度效果實(shí)例
更新時(shí)間：2017年11月27日 09:12:02 作者：翻滾吧李博
圓環(huán)進(jìn)度條，大家應(yīng)該都見過，而這篇文章主要給大家介紹了關(guān)于利用Android模仿微信攝像圓環(huán)進(jìn)度效果的相關(guān)資料，實(shí)現(xiàn)后的效果非常不錯(cuò)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
前言
大家在平時(shí)的生活上遇到新奇的事情，都要立即打開微信視頻錄下來發(fā)給朋友看看。這個(gè)錄制進(jìn)度條看起來還不錯(cuò)哦，就仿著寫了一個(gè)，不是樣式完全的高仿，是功能的仿制。下面話不多說了，來一起看看詳細(xì)的介紹吧。
微信效果：
源碼下載：
自制效果：
實(shí)現(xiàn)過程：
1.自定義圓半徑和圓環(huán)顏色屬性：
<declare-styleable name="CiclePercentView"> <attr name="radius" format="integer"/> <attr name="ring_color" format="color"/> </declare-styleable>
2.設(shè)置3支畫筆，分別畫圓環(huán)，背景淺白色，中心白色圓。
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() ，第一個(gè)參數(shù)表示圓弧外切矩形大小；第二、三個(gè)參數(shù)表示起始角度，當(dāng)前角度，-90度為12點(diǎn)方向，0度為3點(diǎn)方向，這里用-90度作為起始；第四個(gè)參數(shù)表示是否與中心點(diǎn)填充為扇形，false表示只畫圓弧線；
畫圓弧drawArc()方法參數(shù)
@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.計(jì)時(shí)器，每100毫秒更新一次進(jìn)度，可設(shè)置拍攝總時(shí)間totalTime;時(shí)間轉(zhuǎn)化為進(jìn)度范圍為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.按下開始拍攝，只要抬起就完成拍攝，進(jìn)度恢復(fù)為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 :指定圓弧的外輪廓矩形區(qū)域。
- startAngle: 圓弧起始角度，單位為度。
- sweepAngle: 圓弧掃過的角度，順時(shí)針方向，單位為度。
- useCenter: 如果為True時(shí)，在繪制圓弧時(shí)將圓心包括在內(nèi)，通常用來繪制扇形。
- 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;
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
您可能感興趣的文章:
- android自定義View實(shí)現(xiàn)圓環(huán)顏色選擇器
- Android自定義帶動(dòng)畫的半圓環(huán)型進(jìn)度效果
- Android自定義view繪制圓環(huán)占比動(dòng)畫
- Android實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)的圖片頭像控件
- Android自定義View實(shí)現(xiàn)圓環(huán)交替效果
- Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果
- Android自定義View之酷炫圓環(huán)（二）
- Android自定義View之酷炫數(shù)字圓環(huán)
- Android開發(fā)筆記之:在ImageView上繪制圓環(huán)的實(shí)現(xiàn)方法
- Android實(shí)現(xiàn)光點(diǎn)模糊漸變的自旋轉(zhuǎn)圓環(huán)特效
相關(guān)文章
內(nèi)存管理的目的就是讓我們?cè)陂_發(fā)過程中有效避免我們的應(yīng)用程序出現(xiàn)內(nèi)存泄露的問題。內(nèi)存泄露相信大家都不陌生，我們可以這樣理解：沒有用的對(duì)象無法回收的現(xiàn)象就是內(nèi)存泄露2023-02-02
這篇文章主要為大家詳細(xì)介紹了Android自定義圓環(huán)式進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Android開發(fā)基于ViewPager+GridView實(shí)現(xiàn)仿大眾點(diǎn)評(píng)橫向滑動(dòng)功能
這篇文章主要介紹了Android開發(fā)基于ViewPager+GridView實(shí)現(xiàn)仿大眾點(diǎn)評(píng)橫向滑動(dòng)功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Android WebView無法彈出軟鍵盤的原因及解決辦法
這篇文章主要介紹了Android WebView無法彈出軟鍵盤的原因及解決辦法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
發(fā)現(xiàn)這個(gè)控件挺好用，能自已控制進(jìn)度條，而且這個(gè)控件的功能非常壯大,先上個(gè)簡(jiǎn)單的2013-05-05
Android進(jìn)階教程之ViewGroup自定義布局
這篇文章主要給大家介紹了關(guān)于Android進(jìn)階教程之ViewGroup自定義布局的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家分享了一份屬于你自己的常見Android菜單樣式集合，方便大家開發(fā)使用Android菜單，對(duì)OptionMenu感興趣的小伙伴們可以參考一下2016-02-02
ViewFlipper實(shí)現(xiàn)上下翻滾輪播效果
這篇文章主要為大家詳細(xì)介紹了ViewFlipper實(shí)現(xiàn)上下翻滾輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
Android實(shí)現(xiàn)簡(jiǎn)單實(shí)用的垂直進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單實(shí)用的垂直進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Android自定義滑動(dòng)刪除效果的實(shí)現(xiàn)代碼
這篇文章將從現(xiàn)有 Android 滑動(dòng)刪除的痛點(diǎn),到搭建好一個(gè)基本的框架,到最終提供一份完整的 Demo為止,爭(zhēng)取為讀者提供最大的可定制化,需要的朋友可以參考下2018-03-03