Android自定義控件實現帶數值和動畫的圓形進度條

更新時間：2018年12月25日 09:51:16 作者：王世暉

這篇文章主要為大家詳細介紹了Android自定義控件實現帶數值和動畫的圓形進度條，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例實現一個如下圖所示的Android自定義控件，可以直觀地展示某個球隊在某個賽季的積分數和勝場、負場、平局數

首先對畫布進行區(qū)域劃分，整個控件分上下兩部分

上邊是個大的圓環(huán)，圓環(huán)中間兩行文字，沒什么難度，選好圓心坐標和半徑后直接繪制即可，繪制文字也是如此。

下部分是三個小的圓弧進度條，弧的末端繪制一個小的實心圓

首先選好坐標和半徑，然后先繪制三個圓環(huán)作為弧形進度條的背景

之后從12點鐘開始繪制進度弧，知道了圓環(huán)的圓心和半徑，也知道了弧對應于12點鐘和圓環(huán)圓心的偏移角度

通過三角函數可以計算出進度弧終點坐標，以進度弧終點坐標為圓心繪制一個小的實心圓即可

動畫效果通過Handler的postDelayed方法觸發(fā)重繪即可實現

在項目中的效果如圖所示：

測試代碼如下：

final Random random=new Random();
final ScoreBoardView myView=(ScoreBoardView)findViewById(R.id.custom_view);
myView.setOnClickListener(new View.OnClickListener(){
 @Override
 public void onClick(View v){
  myView.setColor(Color.BLUE);
  myView.setScore(random.nextInt(28));
  myView.setWinDrawLose(random.nextInt(12),random.nextInt(15),random.nextInt(26));
 }
});

完整代碼如下:

public class ScoreBoardView extends View {
 private Context context;
 /*弧的顏色*/
 private int mColor;
 /*積分數，勝場數，平局數，負場數*/
 private int mScore, mWinNumber, mDrawNumber, mLoseNumber;
 /*傳入數字的最大值*/
 private final int FULL_SCORE = 30;
 /*動畫插值器*/
 DecelerateInterpolator mDecelerateInterpolator = new DecelerateInterpolator();
 /*動畫持續(xù)時間（刷新次數）*/
 private int mDuration = 10;
 /*動畫刷新過程中的當前值*/
 private int mCurrentTime = 0;
 private TypedValue typedValue;
 private TypedValue typedValue1;
 private Handler mHandler = new Handler();
 private Runnable mAnimation = new Runnable() {
  @Override
  public void run() {
   if (mCurrentTime < mDuration) {
    mCurrentTime++;
    /*導致重繪調用onDraw，onDraw最后再次postDelay執(zhí)行此動畫，直到達到指定的次數*/
    ScoreBoardView.this.invalidate();
   }
  }
 };
 /*繪制圖形*/
 private Paint paint = new Paint();
 /*繪制文字*/
 private Paint paintText = new Paint();
 
 public ScoreBoardView(Context context) {
  super(context);
  this.context=context;
  init();
 }
 
 public ScoreBoardView(Context context, AttributeSet attrs) {
  super(context, attrs);
  this.context=context;
  init();
 }
 
 public ScoreBoardView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  this.context=context;
  init();
 }
 
 private void init() {
  /*數據初始化，默認屬性*/
  mColor = Color.rgb(95, 112, 72);
  mScore = 0;
  mWinNumber = 0;
  mDrawNumber = 0;
  mLoseNumber = 0;
  typedValue=new TypedValue();
  typedValue1=new TypedValue();
  context.getTheme().resolveAttribute(R.attr.maintextclor, typedValue, true);
  context.getTheme().resolveAttribute(R.attr.maintextclor_reverse,typedValue1,true);
 }
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  /*獲取控件總的寬高*/
  float totalWidth = getWidth();
  float totalHeight = getHeight();
  /*
  * DecelerateInterpolator：動畫從開始到結束，變化率是一個減速的過程。
  * AccelerateInterpolator：動畫從開始到結束，變化率是一個加速的過程。
  * CycleInterpolator：動畫從開始到結束，變化率是循環(huán)給定次數的正弦曲線
  * AccelerateDecelerateInterpolator：動畫從開始到結束，變化率是先加速后減速的過程。
  * LinearInterpolator：動畫從開始到結束，變化率是線性變化。
  * */
  /*計算當前時刻動畫進度值*/
  float AnimCurrentValue =mDecelerateInterpolator.getInterpolation(1.0f * mCurrentTime / mDuration);
 
  /*圖形畫筆設置*/
  paint.setAntiAlias(true);
  paint.setStyle(Paint.Style.STROKE);
 
  /*積分數，上邊的大圓*/
  paint.setStrokeWidth(4);
  paint.setColor(mColor);
  /*積分大圓的中心坐標和半徑*/
  float score_radius = totalHeight * 1 / 5, score_circle_x = totalWidth / 2, score_circle_y = totalHeight / 3;
  /*繪制圓弧*/
  canvas.drawCircle(score_circle_x, score_circle_y, score_radius, paint);
  /*文字畫筆基本設置*/
  paintText.setAntiAlias(true);
  paintText.setStyle(Paint.Style.STROKE);
  /*文字從中間開始繪制*/
  /*Paint.Align.CENTER：The text is drawn centered horizontally on the x,y origin*/
  paintText.setTextAlign(Paint.Align.CENTER);
  /*文字畫筆大小和顏色設置*/
  paintText.setTextSize(score_radius * 3 / 4);
  paintText.setColor(getResources().getColor(typedValue.resourceId));
  /*圓心位置繪制積分數值*/
  canvas.drawText("" + mScore, score_circle_x, score_circle_y, paintText);
  /*縮小字體繪制文本信息*/
  paintText.setTextSize(score_radius * 1 / 4);
  paintText.setAlpha(80);
  /*圓心下邊繪制文本*/
  canvas.drawText("積分", score_circle_x, score_circle_y + score_radius / 2, paintText);
 
  /*設置畫筆，畫下邊的三個小圓*/
  paint.setStrokeWidth(4);
  paint.setAlpha(255);
  /*下邊三個小圓的半徑*/
  float small_radius = totalHeight / 10;
  /*三個小圓的圓心的x坐標*/
  float[] circleXs = new float[]{totalWidth / 2 - score_radius * 3 / 2,
          totalWidth / 2,
          totalWidth / 2 + score_radius * 3 / 2};
  /*三個小圓的圓心的y坐標*/
  float circleY = totalHeight * 3 / 4;
  /*計算三個小圓弧掃過的角度*/
  float[] theta_values = new float[]{360 * mWinNumber / FULL_SCORE* AnimCurrentValue,
           360 * mDrawNumber / FULL_SCORE* AnimCurrentValue,
           360 * mLoseNumber / FULL_SCORE* AnimCurrentValue};
  /*設置畫筆顏色，繪制外圍圓環(huán)*/
  paint.setColor(getResources().getColor(typedValue1.resourceId));
  /*分別繪制三個外圍圓環(huán)*/
  canvas.drawCircle(circleXs[0], circleY, small_radius, paint);//畫WIN背景圓
  canvas.drawCircle(circleXs[1], circleY, small_radius, paint);//畫DRAW背景圓
  canvas.drawCircle(circleXs[2], circleY, small_radius, paint);//畫LOSE背景圓
  /*更改畫筆顏色，繪制圓弧進度條*/
  paint.setColor(mColor);
  /*drawArc的起始角度是3點鐘方向，因此要從12點鐘方向開始繪制，起始角度為270度*/
  canvas.drawArc(new RectF(circleXs[0] - small_radius,
         circleY - small_radius,
         circleXs[0] + small_radius,
         circleY + small_radius),
      270, theta_values[0], false, paint);//畫WIN圓形進度條
  canvas.drawArc(new RectF(circleXs[1] - small_radius,
         circleY - small_radius,
         circleXs[1] + small_radius,
         circleY + small_radius),
      270, theta_values[1], false, paint);//畫DRAW圓形進度條
  canvas.drawArc(new RectF(circleXs[2] - small_radius,
         circleY - small_radius,
         circleXs[2] + small_radius,
         circleY + small_radius),
      270, theta_values[2], false, paint);//畫LOSE圓形進度條
  /*繪制圓弧結束處的小圓點，實心圓*/
  paint.setStyle(Paint.Style.FILL);
  /*已知半徑、圓心位置、便宜角度，根據三角函數很方便計算出小實心圓圓心坐標*/
  canvas.drawCircle(circleXs[0] + small_radius * (float) Math.sin(theta_values[0] * Math.PI / 180),
    circleY - small_radius * (float) Math.cos(theta_values[0] * Math.PI / 180), 6, paint);//畫WIN末尾小圓點
  canvas.drawCircle(circleXs[1] + small_radius * (float) Math.sin(theta_values[1] * Math.PI / 180),
    circleY - small_radius * (float) Math.cos(theta_values[1] * Math.PI / 180), 6, paint);//畫DRAW末尾小圓點
  canvas.drawCircle(circleXs[2] + small_radius * (float) Math.sin(theta_values[2] * Math.PI / 180),
    circleY - small_radius * (float) Math.cos(theta_values[2] * Math.PI / 180), 6, paint);//畫LOSE末尾小圓點
 
  /*繪制文字*/
  paintText.setColor(getResources().getColor(typedValue.resourceId));
  paintText.setTextSize(small_radius * 2 / 3);
  /*測量文字大小，確定繪制文字時垂直方向的位置*/
  Paint.FontMetrics fontMetrics = paint.getFontMetrics();
  float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
  /*在三個小圓的正中心位置繪制相應的數字*/
  canvas.drawText("" + (int)(mWinNumber * AnimCurrentValue), circleXs[0], circleY + textBaseLineOffset, paintText);
  canvas.drawText("" + (int)(mDrawNumber * AnimCurrentValue), circleXs[1], circleY + textBaseLineOffset, paintText);
  canvas.drawText("" + (int)(mLoseNumber * AnimCurrentValue), circleXs[2], circleY + textBaseLineOffset, paintText);
  /*調整字體大小，繪制文本信息*/
  paintText.setTextSize(small_radius * 4 / 9);
  canvas.drawText("勝場", circleXs[0], circleY - small_radius*4/3, paintText);
  canvas.drawText("平局", circleXs[1], circleY - small_radius*4/3, paintText);
  canvas.drawText("負場", circleXs[2], circleY - small_radius*4/3, paintText);
  /*20ms刷新一次數據*/
  mHandler.postDelayed(mAnimation, 20);//啟動動畫
 }
 
 public void setColor(int mColor) {
  this.mColor = mColor;
  invalidate();
 }
 
 public void setScore(int score) {
  this.mScore = score;
  invalidate();
 }
 
 public void setWinDrawLose(int win,int draw,int lose) {
  this.mWinNumber = win;
  this.mDrawNumber = draw;
  this.mLoseNumber = lose;
  mCurrentTime =0;
  invalidate();
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android邊框裁切的正確姿勢實現示例
這篇文章主要為大家介紹了Android邊框裁切的正確姿勢實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
android自定義組件實現儀表計數盤
這篇文章主要為大家詳細介紹了android自定義組件實現儀表計數盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
Flutter彈性布局Flex水平排列Row垂直排列Column使用示例
這篇文章主要為大家介紹了Flutter彈性布局Flex水平排列Row垂直排列Column使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
android自定義Camera拍照并查看圖片
這篇文章主要為大家詳細介紹了android自定義Camera拍照并查看圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
Android四種數據存儲的應用方式
這篇文章主要介紹了Android四種數據存儲的應用方式的相關資料,希望通過本文能幫助到大家，讓大家理解掌握Android存儲數據的方法，需要的朋友可以參考下
2017-10-10
Dialog底部彈出自定義view并且伴隨動畫彈出和消失
這篇文章主要介紹了Dialog底部彈出自定義view并且伴隨動畫彈出和消失的相關資料,需要的朋友可以參考下
2016-12-12
Android實現偵聽電池狀態(tài)顯示、電量及充電動態(tài)顯示的方法
這篇文章主要介紹了Android實現偵聽電池狀態(tài)顯示、電量及充電動態(tài)顯示的方法,非常實用的功能,需要的朋友可以參考下
2014-09-09
Android中獲取狀態(tài)欄高度的兩種方法分享
在android應用中，有時需要計算個View的位置，導致需要計算狀態(tài)欄高度。為以后方便，在此做個簡單記錄。下面這篇文章主要介紹了Android中獲取狀態(tài)欄高度的兩種方法，兩種方法分別給出了示例代碼，有需要的朋友可以參考借鑒。
2017-02-02
Android實現點匯聚成字的動態(tài)效果詳解
在引入?fl_chart?繪制圖表的時候，看到插件有下面這樣的動效，隨機散亂的圓點最后組合成了?Flutter?的?Logo，挺酷炫的。本篇我們來探討類似的效果怎么實現
2022-07-07
android dialog背景模糊化效果實現方法
這篇文章主要為大家詳細介紹了android dialog背景模糊化效果的實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-04-04