Android自定義控制元件之水平圓點載入進度條

阿新 • • 發佈：2020-06-20

本文例項為大家分享了Android實現水平圓點載入進度條的具體程式碼，供大家參考，具體內容如下

先來看看要實現的效果

實現思路非常簡單：當前變化的圓點先從最小半徑變大到最大最大半徑再變回最小半徑的圓，然後再切換到下個圓點，同時顏色會先變淺在變會原來的顏色(可以理解為透明度變化)，而且當前圓點的上上一個圓點顏色會不斷變淺。大概就這樣(可能我實現的效果和圖片的有些出入)

先看下實現效果：

Android自定義控制元件之水平圓點載入進度條

直接上程式碼：

package com.kincai.testcustomview_pointprogress;
 
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
 
/**
 * Copyright (C) 2015 The KINCAI Open Source Project
 * .
 * Create By KINCAI
 * .
 * Time 2017-06-14 10:23
 * .
 * Desc 水平圓點進度條
 */
 
public class DotPollingView extends View {
  private final String TAG = this.getClass().getSimpleName();
  /**
   * 進度當前圓點畫筆和正常圓點畫筆
   */
  private Paint mSelectedPaint = new Paint(),mNormalPaint = new Paint();
  /**
   * 正常圓點顏色
   */
  private int mColor;
  /**
   * 變大圓點的顏色
   */
  private int mSelectedColor;
  /**
   * 圓點總數
   */
  private int mDotTotalCount = 3;
  /**
   * 正常圓點半徑
   */
  private int mDotRadius;
  /**
   * 當前變化的圓點半徑變化量 0.0 - (mDotMaxRadius - mDotRadius)之間
   */
  private float mDotCurrentRadiusChange;
  /**
   * 圓點大小變化率
   */
  private float mRadiusChangeRate;
  /**
   * 最大圓點半徑
   */
  private int mDotMaxRadius;
  /**
   * 圓點最大間距
   */
  private int mDotSpacing;
  /**
   * 當前變大的圓點索引
   */
  private int mCurrentDot = 0;
 
  private int mAlphaChange = 0;
  private int mAlphaChangeTotal = 220;
  private final int DOT_STATUS_BIG = 0X101;
  private final int DOT_STATUS_SMALL = 0X102;
  private int mDotChangeStatus = DOT_STATUS_BIG;
 
  public void setColor(int mColor) {
    this.mColor = mColor;
    mNormalPaint.setColor(mColor);
  }
 
  public void setSelectedColor(int mSelectedColor) {
    this.mSelectedColor = mSelectedColor;
    mSelectedPaint.setColor(mSelectedColor);
  }
 
  public void setDotTotalCount(int mDotTotalCount) {
    this.mDotTotalCount = mDotTotalCount;
  }
 
  public void setDotRadius(int mDotRadius) {
    this.mDotRadius = mDotRadius;
  }
 
  public void setRadiusChangeRate(float mRadiusChangeRate) {
    this.mRadiusChangeRate = mRadiusChangeRate;
  }
 
  public void setDotMaxRadius(int mDotMaxRadius) {
    this.mDotMaxRadius = mDotMaxRadius;
  }
 
  public void setDotSpacing(int mDotSpacing) {
    this.mDotSpacing = mDotSpacing;
  }
 
  public DotPollingView(Context context) {
    this(context,null);
  }
 
  public DotPollingView(Context context,@Nullable AttributeSet attrs) {
    this(context,attrs,0);
  }
 
  public DotPollingView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
    super(context,defStyleAttr);
    TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.DotPollingView,defStyleAttr,0);
    initAttributes(typedArray);
    typedArray.recycle();
    init();
  }
 
  private void initAttributes(TypedArray Attributes) {
    mColor = Attributes.getColor(R.styleable.DotPollingView_dotP_dot_color,ContextCompat.getColor(getContext(),R.color.colorPrimary));
    mSelectedColor = Attributes.getColor(R.styleable.DotPollingView_dotP_dot_selected_color,R.color.colorAccent));
    mDotRadius = Attributes.getDimensionPixelSize(R.styleable.DotPollingView_dotP_dot_radius,DensityUtils.dp2px(getContext(),3));
    mDotMaxRadius = Attributes.getDimensionPixelSize(R.styleable.DotPollingView_dotP_dot_max_radius,5));
    mDotSpacing = Attributes.getDimensionPixelSize(R.styleable.DotPollingView_dotP_dot_spacing,6));
    mDotTotalCount = Attributes.getInteger(R.styleable.DotPollingView_dotP_dot_count,3);
    mRadiusChangeRate = Attributes.getFloat(R.styleable.DotPollingView_dotP_dot_size_change_rate,0.3f);
  }
  /**
   * 初始化
   */
  private void init() {
    mDotCurrentRadiusChange = 0f;
    mSelectedPaint.setColor(mSelectedColor);
    mSelectedPaint.setAntiAlias(true);
    mSelectedPaint.setStyle(Paint.Style.FILL);
    mNormalPaint.setColor(mColor);
    mNormalPaint.setAntiAlias(true);
    mNormalPaint.setStyle(Paint.Style.FILL);
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) {
    //測量寬高
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int width;
    int height;
 
    if(widthMode == MeasureSpec.EXACTLY) {
      width = widthSize;
      Log.e(TAG,"onMeasure MeasureSpec.EXACTLY widthSize="+widthSize);
    } else {
      //指定最小寬度所有圓點加上間距的寬度,以最小半徑加上間距算總和再加上最左邊和最右邊變大後的距離
      width = (mDotTotalCount * mDotRadius * 2 + ((mDotTotalCount - 1) * mDotSpacing)) + (mDotMaxRadius - mDotRadius) * 2;
      Log.e(TAG,"onMeasure no MeasureSpec.EXACTLY widthSize="+widthSize+" width="+width);
      if(widthMode == MeasureSpec.AT_MOST) {
        width = Math.min(width,widthSize);
        Log.e(TAG,"onMeasure MeasureSpec.AT_MOST width="+width);
      }
 
    }
 
    if(heightMode == MeasureSpec.EXACTLY) {
      height = heightSize;
      Log.e(TAG,"onMeasure MeasureSpec.EXACTLY heightSize="+heightSize);
    } else {
      height = mDotMaxRadius * 2;
      Log.e(TAG,"onMeasure no MeasureSpec.EXACTLY heightSize="+heightSize+" height="+height);
      if(heightMode == MeasureSpec.AT_MOST) {
        height = Math.min(height,heightSize);
        Log.e(TAG,"onMeasure MeasureSpec.AT_MOST height="+height);
      }
 
    }
    setMeasuredDimension(width,height);
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mNormalPaint.setAlpha(255);
    mSelectedPaint.setAlpha(255);
 
    if(mDotChangeStatus == DOT_STATUS_BIG) {
      mDotCurrentRadiusChange += mRadiusChangeRate;
      mAlphaChange +=12;
    } else {
      mDotCurrentRadiusChange -= mRadiusChangeRate;
      mAlphaChange -=12;
    }
 
    if(mAlphaChange >= mAlphaChangeTotal) {
      mAlphaChange = mAlphaChangeTotal;
    }
    Log.e("DotPollingView","dot current radius change: " + mDotCurrentRadiusChange);
    //第一個圓點的圓心x座標計算：控制元件寬度的一半減去(所有圓點直徑的和以及所有間距的和相加的總和的一半)再加上一個半徑大小
    // ，為什麼要加上半徑？因為我們起點要的是圓心，但算出來的是最左邊x座標
    int startPointX = getWidth() / 2 - (mDotTotalCount * mDotRadius * 2 + ((mDotTotalCount - 1) * mDotSpacing)) / 2 + mDotRadius;
    //所有圓點的圓心y座標一致控制元件高度的一半
    int startPointY = getHeight() / 2;
    for (int i = 0; i < mDotTotalCount; i++) {
      if(mCurrentDot == i) {//當前圓點
        mSelectedPaint.setAlpha(255 - mAlphaChange);
        canvas.drawCircle(startPointX + mCurrentDot * (mDotRadius * 2 + mDotSpacing),startPointY,mDotRadius + mDotCurrentRadiusChange,mSelectedPaint);
        continue;
      } else if(mCurrentDot > 1 && mCurrentDot - 2 == i) {//當前圓點前兩個
        mNormalPaint.setAlpha(255 - mAlphaChange);
        canvas.drawCircle(startPointX + (mCurrentDot - 2)
            * (mDotRadius * 2 + mDotSpacing),mDotRadius,mNormalPaint);
        continue;
      }
 
      //畫正常的圓點
      mNormalPaint.setAlpha(255);
      canvas.drawCircle(startPointX + i * (mDotRadius * 2 + mDotSpacing),mNormalPaint);
    }
 
    //當圓點變化率達到最大或超過最大半徑和正常半徑之差時 變化率重置0，當前變大圓點移至下一圓點
    if (mDotCurrentRadiusChange >= (mDotMaxRadius - mDotRadius) && mDotChangeStatus == DOT_STATUS_BIG) {
      mDotCurrentRadiusChange = mDotMaxRadius - mDotRadius;
      mDotChangeStatus = DOT_STATUS_SMALL;
    } else if(mDotCurrentRadiusChange <= 0 && mDotChangeStatus == DOT_STATUS_SMALL) {
      mDotChangeStatus = DOT_STATUS_BIG;
      mDotCurrentRadiusChange = 0f;
      mCurrentDot = mCurrentDot == mDotTotalCount - 1 ? 0 : mCurrentDot + 1;
      mAlphaChange = 0;
    }
 
    invalidate();
 
  }
}

原始碼下載github：TestCustomView_PointProgress

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