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;
  /**
   * 圓點總數(shù)
   */
  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, attrs, 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, ContextCompat.getColor(getContext(),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,DensityUtils.dp2px(getContext(),5));
    mDotSpacing = Attributes.getDimensionPixelSize(R.styleable.DotPollingView_dotP_dot_spacing,DensityUtils.dp2px(getContext(),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), startPointY, mDotRadius, mNormalPaint);
        continue;
      }
 
      //畫正常的圓點
      mNormalPaint.setAlpha(255);
      canvas.drawCircle(startPointX + i * (mDotRadius * 2 + mDotSpacing), startPointY, mDotRadius, 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 &#63; 0 : mCurrentDot + 1;
      mAlphaChange = 0;
    }
 
    invalidate();
 
  }
}