Android自定義View實(shí)現(xiàn)圓弧進(jìn)度效果
更新時(shí)間：2018年11月29日 08:35:35 作者：ruancw
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)圓弧進(jìn)度效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言：Android開發(fā)中，自定義View實(shí)現(xiàn)自己想要的效果已成為一項(xiàng)必備的技能，當(dāng)然自定義View也是Android開發(fā)中比較難的部分，涉及到的知識(shí)有Canvas（畫布）,Paint（畫筆）等，自定義控件分為三種：一是直接繼承自View，完全的自定義；二是在原有控件的基礎(chǔ)上進(jìn)行改造，達(dá)到自己想要的效果；還有一種就是自定義組合控件，將已有的控件根據(jù)自己的需要進(jìn)行組合實(shí)現(xiàn)的效果。本人對(duì)自定義View也是一知半解，簡(jiǎn)單記錄下自己學(xué)習(xí)自定義View（繼承自View）的過程，方便日后翻閱。
技術(shù)實(shí)現(xiàn)
1.ArcView繼承自View
2.Canvas（畫布）
3.Paint（畫筆）
效果圖：類似于QQ的計(jì)步效果
1.繼承自View
（1）重寫3個(gè)構(gòu)造方法（新的API中的構(gòu)造方法是4個(gè)）
public ArcView(Context context) {
this(context,null);
}
public ArcView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//init();
}
（2）重寫View的OnDraw方法
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
centerX=getWidth()/2;
centerY=getHeight()/2;
//初始化paint
initPaint();
//繪制弧度
drawArc(canvas);
//繪制文本
drawText(canvas);
}
注：這里的paint初始化我放在了onDraw方法中進(jìn)行的，當(dāng)然你也可以放在有三個(gè)參數(shù)的構(gòu)造方法中初始化。
2.Paint初始化
（1）圓弧的畫筆mArcPaint
//圓弧的paint
mArcPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
//抗鋸齒
mArcPaint.setAntiAlias(true);
mArcPaint.setColor(Color.parseColor("#666666"));
//設(shè)置透明度（數(shù)值為0-255）
mArcPaint.setAlpha(100);
//設(shè)置畫筆的畫出的形狀
mArcPaint.setStrokeJoin(Paint.Join.ROUND);
mArcPaint.setStrokeCap(Paint.Cap.ROUND);
//設(shè)置畫筆類型
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(dp2px(mStrokeWith));
（2）文字的畫筆mTextPaint
//中心文字的paint
mTextPaint=new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.parseColor("#FF4A40"));
//設(shè)置文本的對(duì)齊方式
mTextPaint.setTextAlign(Paint.Align.CENTER);
//mTextPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.dp_12));
mTextPaint.setTextSize(dp2px(25));
3.Canvas繪制
（1）圓弧的繪制
/**
* 繪制圓弧
* @param canvas
*/
private void drawArc(Canvas canvas) {
//繪制圓弧背景
RectF mRectF=new RectF(mStrokeWith+dp2px(5),mStrokeWith+dp2px(5),getWidth()-mStrokeWith-dp2px(5),getHeight()-mStrokeWith);
canvas.drawArc(mRectF,startAngle,mAngle,false,mArcPaint);
//繪制當(dāng)前數(shù)值對(duì)應(yīng)的圓弧
mArcPaint.setColor(Color.parseColor("#FF4A40"));
//根據(jù)當(dāng)前數(shù)據(jù)繪制對(duì)應(yīng)的圓弧
canvas.drawArc(mRectF,startAngle,mIncludedAngle,false,mArcPaint);
}
（2）文本的繪制
/**
* 繪制文本
* @param canvas
*/
private void drawText(Canvas canvas) {
Rect mRect=new Rect();
String mValue=String.valueOf(mAnimatorValue);
//繪制中心的數(shù)值
mTextPaint.getTextBounds(mValue,0,mValue.length(),mRect);
canvas.drawText(String.valueOf(mAnimatorValue),centerX,centerY+mRect.height(),mTextPaint);
//繪制中心文字描述
mTextPaint.setColor(Color.parseColor("#999999"));
mTextPaint.setTextSize(dp2px(12));
mTextPaint.getTextBounds(mDes,0,mDes.length(),mRect);
canvas.drawText(mDes,centerX,centerY+2*mRect.height()+dp2px(10),mTextPaint);
//繪制最小值
String minValue=String.valueOf(mMinValue);
String maxValue=String.valueOf(mMaxValue);
mTextPaint.setTextSize(dp2px(18));
mTextPaint.getTextBounds(minValue,0,minValue.length(),mRect);
canvas.drawText(minValue, (float) (centerX-0.6*centerX-dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
//繪制最大值
mTextPaint.getTextBounds(maxValue,0,maxValue.length(),mRect);
canvas.drawText(maxValue, (float) (centerX+0.6*centerX+dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
}
4.添加動(dòng)畫效果及數(shù)據(jù)
（1）動(dòng)畫效果
/**
* 為繪制弧度及數(shù)據(jù)設(shè)置動(dòng)畫
*
* @param startAngle 開始的弧度
* @param currentAngle 需要繪制的弧度
* @param currentValue 需要繪制的數(shù)據(jù)
* @param time 動(dòng)畫執(zhí)行的時(shí)長
*/
private void setAnimation(float startAngle, float currentAngle,int currentValue, int time) {
//繪制當(dāng)前數(shù)據(jù)對(duì)應(yīng)的圓弧的動(dòng)畫效果
ValueAnimator progressAnimator = ValueAnimator.ofFloat(startAngle, currentAngle);
progressAnimator.setDuration(time);
progressAnimator.setTarget(mIncludedAngle);
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mIncludedAngle = (float) animation.getAnimatedValue();
//重新繪制，不然不會(huì)出現(xiàn)效果
postInvalidate();
}
});
//開始執(zhí)行動(dòng)畫
progressAnimator.start();
//中心數(shù)據(jù)的動(dòng)畫效果
ValueAnimator valueAnimator = ValueAnimator.ofInt(mAnimatorValue, currentValue);
valueAnimator.setDuration(2500);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mAnimatorValue = (int) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
valueAnimator.start();
}
（2）數(shù)據(jù)添加
/**
* 設(shè)置數(shù)據(jù)
* @param minValue 最小值
* @param maxValue 最大值
* @param currentValue 當(dāng)前繪制的值
* @param des 描述信息
*/
public void setValues(int minValue,int maxValue, int currentValue,String des) {
mDes=des;
mMaxValue=maxValue;
mMinValue=minValue;
//完全覆蓋背景弧度
if (currentValue > maxValue) {
currentValue = maxValue;
}
//計(jì)算弧度比重
float scale = (float) currentValue / maxValue;
//計(jì)算弧度
float currentAngle = scale * mAngle;
//開始執(zhí)行動(dòng)畫
setAnimation(0, currentAngle, currentValue,2500);
完整代碼：
/**
* Created by ruancw on 2018/6/13.
* 自定義的圓弧形view
*/
public class ArcView extends View {
//根據(jù)數(shù)據(jù)顯示的圓弧Paint
private Paint mArcPaint;
//文字描述的paint
private Paint mTextPaint;
//圓弧開始的角度
private float startAngle=135;
//圓弧結(jié)束的角度
private float endAngle=45;
//圓弧背景的開始和結(jié)束間的夾角大小
private float mAngle=270;
//當(dāng)前進(jìn)度夾角大小
private float mIncludedAngle=0;
//圓弧的畫筆的寬度
private float mStrokeWith=10;
//中心的文字描述
private String mDes="";
//動(dòng)畫效果的數(shù)據(jù)及最大/小值
private int mAnimatorValue,mMinValue,mMaxValue;
//中心點(diǎn)的XY坐標(biāo)
private float centerX,centerY;
public ArcView(Context context) {
this(context,null);
}
public ArcView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//init();
}
private void initPaint() {
//圓弧的paint
mArcPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
//抗鋸齒
mArcPaint.setAntiAlias(true);
mArcPaint.setColor(Color.parseColor("#666666"));
//設(shè)置透明度（數(shù)值為0-255）
mArcPaint.setAlpha(100);
//設(shè)置畫筆的畫出的形狀
mArcPaint.setStrokeJoin(Paint.Join.ROUND);
mArcPaint.setStrokeCap(Paint.Cap.ROUND);
//設(shè)置畫筆類型
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(dp2px(mStrokeWith));
//中心文字的paint
mTextPaint=new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.parseColor("#FF4A40"));
//設(shè)置文本的對(duì)齊方式
mTextPaint.setTextAlign(Paint.Align.CENTER);
//mTextPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.dp_12));
mTextPaint.setTextSize(dp2px(25));
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
centerX=getWidth()/2;
centerY=getHeight()/2;
//初始化paint
initPaint();
//繪制弧度
drawArc(canvas);
//繪制文本
drawText(canvas);
}
/**
* 繪制文本
* @param canvas
*/
private void drawText(Canvas canvas) {
Rect mRect=new Rect();
String mValue=String.valueOf(mAnimatorValue);
//繪制中心的數(shù)值
mTextPaint.getTextBounds(mValue,0,mValue.length(),mRect);
canvas.drawText(String.valueOf(mAnimatorValue),centerX,centerY+mRect.height(),mTextPaint);
//繪制中心文字描述
mTextPaint.setColor(Color.parseColor("#999999"));
mTextPaint.setTextSize(dp2px(12));
mTextPaint.getTextBounds(mDes,0,mDes.length(),mRect);
canvas.drawText(mDes,centerX,centerY+2*mRect.height()+dp2px(10),mTextPaint);
//繪制最小值
String minValue=String.valueOf(mMinValue);
String maxValue=String.valueOf(mMaxValue);
mTextPaint.setTextSize(dp2px(18));
mTextPaint.getTextBounds(minValue,0,minValue.length(),mRect);
canvas.drawText(minValue, (float) (centerX-0.6*centerX-dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
//繪制最大指
mTextPaint.getTextBounds(maxValue,0,maxValue.length(),mRect);
canvas.drawText(maxValue, (float) (centerX+0.6*centerX+dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
}
/**
* 繪制當(dāng)前的圓弧
* @param canvas
*/
private void drawArc(Canvas canvas) {
//繪制圓弧背景
RectF mRectF=new RectF(mStrokeWith+dp2px(5),mStrokeWith+dp2px(5),getWidth()-mStrokeWith-dp2px(5),getHeight()-mStrokeWith);
canvas.drawArc(mRectF,startAngle,mAngle,false,mArcPaint);
//繪制當(dāng)前數(shù)值對(duì)應(yīng)的圓弧
mArcPaint.setColor(Color.parseColor("#FF4A40"));
//根據(jù)當(dāng)前數(shù)據(jù)繪制對(duì)應(yīng)的圓弧
canvas.drawArc(mRectF,startAngle,mIncludedAngle,false,mArcPaint);
}
/**
* 為繪制弧度及數(shù)據(jù)設(shè)置動(dòng)畫
*
* @param startAngle 開始的弧度
* @param currentAngle 需要繪制的弧度
* @param currentValue 需要繪制的數(shù)據(jù)
* @param time 動(dòng)畫執(zhí)行的時(shí)長
*/
private void setAnimation(float startAngle, float currentAngle,int currentValue, int time) {
//繪制當(dāng)前數(shù)據(jù)對(duì)應(yīng)的圓弧的動(dòng)畫效果
ValueAnimator progressAnimator = ValueAnimator.ofFloat(startAngle, currentAngle);
progressAnimator.setDuration(time);
progressAnimator.setTarget(mIncludedAngle);
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mIncludedAngle = (float) animation.getAnimatedValue();
//重新繪制，不然不會(huì)出現(xiàn)效果
postInvalidate();
}
});
//開始執(zhí)行動(dòng)畫
progressAnimator.start();
//中心數(shù)據(jù)的動(dòng)畫效果
ValueAnimator valueAnimator = ValueAnimator.ofInt(mAnimatorValue, currentValue);
valueAnimator.setDuration(2500);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mAnimatorValue = (int) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
valueAnimator.start();
}
/**
* 設(shè)置數(shù)據(jù)
* @param minValue 最小值
* @param maxValue 最大值
* @param currentValue 當(dāng)前繪制的值
* @param des 描述信息
*/
public void setValues(int minValue,int maxValue, int currentValue,String des) {
mDes=des;
mMaxValue=maxValue;
mMinValue=minValue;
//完全覆蓋
if (currentValue > maxValue) {
currentValue = maxValue;
}
//計(jì)算弧度比重
float scale = (float) currentValue / maxValue;
//計(jì)算弧度
float currentAngle = scale * mAngle;
//開始執(zhí)行動(dòng)畫
setAnimation(0, currentAngle, currentValue,2500);
}
public float dp2px(float dp) {
DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
return dp * metrics.density;
}
}
總結(jié)：設(shè)置Paint的畫筆形狀（Cap和Join設(shè)置為弧形）；使用Canvas的drawArc方法繪制圓弧及drawText繪制文本信息等；ValueAnimator設(shè)置數(shù)據(jù)及當(dāng)前圓弧進(jìn)度的動(dòng)畫效果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android衛(wèi)星菜單效果的實(shí)現(xiàn)方法
這篇文章主要介紹了Android衛(wèi)星菜單效果的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-05-05
本篇文章主要介紹了Android二維碼的生成與掃碼-zxing示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Android中隱藏狀態(tài)欄和標(biāo)題欄的方法匯總（隱藏狀態(tài)欄、標(biāo)題欄的五種方法）
這篇文章主要介紹了Android中隱藏狀態(tài)欄和標(biāo)題欄的方法匯總（隱藏狀態(tài)欄、標(biāo)題欄的五種方法）,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
Android應(yīng)用中使用TabHost組件繼承TabActivity的布局方法
這篇文章主要介紹了Android應(yīng)用中使用TabHost組件繼承TabActivity的布局方法,文中分別介紹了以Activity和以布局文件進(jìn)行布局的方式,需要的朋友可以參考下2016-04-04
activitygroup 切換動(dòng)畫效果如何實(shí)現(xiàn)
本文將詳細(xì)介紹activitygroup 切換動(dòng)畫效果實(shí)現(xiàn)過程，需要聊解的朋友可以參考下2012-12-12
android實(shí)現(xiàn)圖片驗(yàn)證碼方法解析(自繪控件)
本文主要介紹了android自繪控件的應(yīng)用--實(shí)現(xiàn)圖片驗(yàn)證碼方法案例，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Android快速實(shí)現(xiàn)觸摸移動(dòng)的懸浮窗
這篇文章主要為大家詳細(xì)介紹了Android快速實(shí)現(xiàn)觸摸移動(dòng)的懸浮窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
Android學(xué)習(xí)筆記--使用剪切板在Activity中傳值示例代碼
相對(duì)于getText和setText而言，利用ClipData對(duì)象來傳遞數(shù)據(jù)，更符合面向?qū)ο蟮乃枷耄宜軅鬟f的數(shù)據(jù)類型也多樣化了2013-06-06
聲網(wǎng)SDK教程Android UIKit 實(shí)時(shí)視頻通話添加自定義背景
這篇文章主要為大家介紹了聲網(wǎng)SDK教程Android UIKit 實(shí)時(shí)視頻通話添加自定義背景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
BLE藍(lán)牙的興起主要因?yàn)榻陙砜纱┐髟O(shè)備的流行,由于傳統(tǒng)藍(lán)牙功耗高不能滿足可穿戴設(shè)備對(duì)于續(xù)航的要求,所以大部分可穿戴設(shè)備采用藍(lán)牙4.0,即BLE藍(lán)牙技術(shù),這篇文章主要給大家介紹了關(guān)于Android?藍(lán)牙BLE開發(fā)的相關(guān)資料,需要的朋友可以參考下2021-11-11