Android自定義控件之水平圓點(diǎn)加載進(jìn)度條

更新時(shí)間：2020年06月19日 11:27:17 作者：kincai

這篇文章主要為大家詳細(xì)介紹了Android自定義控件之水平圓點(diǎn)加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android實(shí)現(xiàn)水平圓點(diǎn)加載進(jìn)度條的具體代碼，供大家參考，具體內(nèi)容如下

先來看看要實(shí)現(xiàn)的效果

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

先看下實(shí)現(xiàn)效果：

直接上代碼：

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 水平圓點(diǎn)進(jìn)度條
 */
 
public class DotPollingView extends View {
  private final String TAG = this.getClass().getSimpleName();
  /**
   * 進(jìn)度當(dāng)前圓點(diǎn)畫筆和正常圓點(diǎn)畫筆
   */
  private Paint mSelectedPaint = new Paint(), mNormalPaint = new Paint();
  /**
   * 正常圓點(diǎn)顏色
   */
  private int mColor;
  /**
   * 變大圓點(diǎn)的顏色
   */
  private int mSelectedColor;
  /**
   * 圓點(diǎn)總數(shù)
   */
  private int mDotTotalCount = 3;
  /**
   * 正常圓點(diǎn)半徑
   */
  private int mDotRadius;
  /**
   * 當(dāng)前變化的圓點(diǎn)半徑變化量 0.0 - (mDotMaxRadius - mDotRadius)之間
   */
  private float mDotCurrentRadiusChange;
  /**
   * 圓點(diǎn)大小變化率
   */
  private float mRadiusChangeRate;
  /**
   * 最大圓點(diǎn)半徑
   */
  private int mDotMaxRadius;
  /**
   * 圓點(diǎn)最大間距
   */
  private int mDotSpacing;
  /**
   * 當(dāng)前變大的圓點(diǎn)索引
   */
  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 {
      //指定最小寬度所有圓點(diǎn)加上間距的寬度, 以最小半徑加上間距算總和再加上最左邊和最右邊變大后的距離
      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);
    //第一個(gè)圓點(diǎn)的圓心x坐標(biāo)計(jì)算：控件寬度的一半減去(所有圓點(diǎn)直徑的和以及所有間距的和相加的總和的一半)再加上一個(gè)半徑大小
    // ，為什么要加上半徑？因?yàn)槲覀兤瘘c(diǎn)要的是圓心，但算出來的是最左邊x坐標(biāo)
    int startPointX = getWidth() / 2 - (mDotTotalCount * mDotRadius * 2 + ((mDotTotalCount - 1) * mDotSpacing)) / 2 + mDotRadius;
    //所有圓點(diǎn)的圓心y坐標(biāo)一致控件高度的一半
    int startPointY = getHeight() / 2;
    for (int i = 0; i < mDotTotalCount; i++) {
      if(mCurrentDot == i) {//當(dāng)前圓點(diǎn)
        mSelectedPaint.setAlpha(255 - mAlphaChange);
        canvas.drawCircle(startPointX + mCurrentDot * (mDotRadius * 2 + mDotSpacing), startPointY
            , mDotRadius + mDotCurrentRadiusChange, mSelectedPaint);
        continue;
      } else if(mCurrentDot > 1 && mCurrentDot - 2 == i) {//當(dāng)前圓點(diǎn)前兩個(gè)
        mNormalPaint.setAlpha(255 - mAlphaChange);
        canvas.drawCircle(startPointX + (mCurrentDot - 2)
            * (mDotRadius * 2 + mDotSpacing), startPointY, mDotRadius, mNormalPaint);
        continue;
      }
 
      //畫正常的圓點(diǎn)
      mNormalPaint.setAlpha(255);
      canvas.drawCircle(startPointX + i * (mDotRadius * 2 + mDotSpacing), startPointY, mDotRadius, mNormalPaint);
    }
 
    //當(dāng)圓點(diǎn)變化率達(dá)到最大或超過最大半徑和正常半徑之差時(shí) 變化率重置0，當(dāng)前變大圓點(diǎn)移至下一圓點(diǎn)
    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

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

您可能感興趣的文章: