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開(kāi)發(fā)中，自定義View實(shí)現(xiàn)自己想要的效果已成為一項(xiàng)必備的技能，當(dāng)然自定義View也是Android開(kāi)發(fā)中比較難的部分，涉及到的知識(shí)有Canvas（畫(huà)布）,Paint（畫(huà)筆）等，自定義控件分為三種：一是直接繼承自View，完全的自定義；二是在原有控件的基礎(chǔ)上進(jìn)行改造，達(dá)到自己想要的效果；還有一種就是自定義組合控件，將已有的控件根據(jù)自己的需要進(jìn)行組合實(shí)現(xiàn)的效果。本人對(duì)自定義View也是一知半解，簡(jiǎn)單記錄下自己學(xué)習(xí)自定義View（繼承自View）的過(guò)程，方便日后翻閱。

技術(shù)實(shí)現(xiàn)

1.ArcView繼承自View

2.Canvas（畫(huà)布）

3.Paint（畫(huà)筆）

效果圖：類(lèi)似于QQ的計(jì)步效果

1.繼承自View

（1）重寫(xiě)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）重寫(xiě)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）圓弧的畫(huà)筆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è)置畫(huà)筆的畫(huà)出的形狀
mArcPaint.setStrokeJoin(Paint.Join.ROUND);
mArcPaint.setStrokeCap(Paint.Cap.ROUND);
//設(shè)置畫(huà)筆類(lèi)型
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(dp2px(mStrokeWith));

（2）文字的畫(huà)筆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)畫(huà)效果及數(shù)據(jù)

（1）動(dòng)畫(huà)效果

/**
 * 為繪制弧度及數(shù)據(jù)設(shè)置動(dòng)畫(huà)
 *
 * @param startAngle 開(kāi)始的弧度
 * @param currentAngle 需要繪制的弧度
 * @param currentValue 需要繪制的數(shù)據(jù)
 * @param time 動(dòng)畫(huà)執(zhí)行的時(shí)長(zhǎng)
 */
private void setAnimation(float startAngle, float currentAngle,int currentValue, int time) {
 //繪制當(dāng)前數(shù)據(jù)對(duì)應(yīng)的圓弧的動(dòng)畫(huà)效果
 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();
  }
 });
 //開(kāi)始執(zhí)行動(dòng)畫(huà)
 progressAnimator.start();

 //中心數(shù)據(jù)的動(dòng)畫(huà)效果
 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;
 //開(kāi)始執(zhí)行動(dòng)畫(huà)
 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;
 //圓弧開(kāi)始的角度
 private float startAngle=135;
 //圓弧結(jié)束的角度
 private float endAngle=45;
 //圓弧背景的開(kāi)始和結(jié)束間的夾角大小
 private float mAngle=270;
 //當(dāng)前進(jìn)度夾角大小
 private float mIncludedAngle=0;
 //圓弧的畫(huà)筆的寬度
 private float mStrokeWith=10;
 //中心的文字描述
 private String mDes="";
 //動(dòng)畫(huà)效果的數(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è)置畫(huà)筆的畫(huà)出的形狀
  mArcPaint.setStrokeJoin(Paint.Join.ROUND);
  mArcPaint.setStrokeCap(Paint.Cap.ROUND);
  //設(shè)置畫(huà)筆類(lèi)型
  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)畫(huà)
  *
  * @param startAngle 開(kāi)始的弧度
  * @param currentAngle 需要繪制的弧度
  * @param currentValue 需要繪制的數(shù)據(jù)
  * @param time 動(dòng)畫(huà)執(zhí)行的時(shí)長(zhǎng)
  */
 private void setAnimation(float startAngle, float currentAngle,int currentValue, int time) {
  //繪制當(dāng)前數(shù)據(jù)對(duì)應(yīng)的圓弧的動(dòng)畫(huà)效果
  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();
   }
  });
  //開(kāi)始執(zhí)行動(dòng)畫(huà)
  progressAnimator.start();

  //中心數(shù)據(jù)的動(dòng)畫(huà)效果
  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;
  //開(kāi)始執(zhí)行動(dòng)畫(huà)
  setAnimation(0, currentAngle, currentValue,2500);
 }

 public float dp2px(float dp) {
  DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
  return dp * metrics.density;
 }
}

總結(jié)：設(shè)置Paint的畫(huà)筆形狀（Cap和Join設(shè)置為弧形）；使用Canvas的drawArc方法繪制圓弧及drawText繪制文本信息等；ValueAnimator設(shè)置數(shù)據(jù)及當(dāng)前圓弧進(jìn)度的動(dòng)畫(huà)效果。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: