Android實現兩圓點之間來回移動加載進度

本文實例為大家分享了Android實現兩圓點之間來回移動加載進度的具體代碼，供大家參考，具體內容如下

一、前言

最近喜歡上自定義控件，喜歡實現一些簡約有趣的控件，也好鞏固下以前學得知識和不斷的學習新知識，程序員嘛，活到老學到老。

這篇文章接著上一篇文章：Android_自定義控件之水平圓點加載進度條，類似的實現方式，都是些比較簡單的view繪製。

二、實現

先看下實現的效果吧：

說下實現思路：圓點x軸會有個位移變化量，當位移達到圓點直徑+圓點間距之和就回改變方向（改變方向就是通過變化量值不斷增加和不斷減少來實現），可能寫的有點模糊，接下來看代碼：

  package com.kincai.testcustomview_dotalternatelyprogress;     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-16 21:44   * .   * Desc 兩個源點來回移動   */     public class DotAlternatelyView extends View {   private final String TAG = this.getClass().getSimpleName();   private Paint mPaint = new Paint();   /**    * 可視為左邊圓點顏色值    */   private int mLeftColor;   /**    * 可視為右邊圓點顏色值    */   private int mRightColor;   /**    * 圓點半徑    */   private int mDotRadius;   /**    * 圓點間距    */   private int mDotSpacing;   /**    * 圓點位移量    */   private float mMoveDistance;   /**    * 圓點移動率    */   private float mMoveRate;   /**    * 以剛開始左邊圓點為準 向右移    */   private final int DOT_STATUS_RIGHT = 0X101;   /**    * 以剛開始左邊圓點為準 圓點移動方向-向左移    */   private final int DOT_STATUS_LEFT = 0X102;   /**    * 以剛開始左邊圓點為準，圓點移動方向    */   private int mDotChangeStatus = DOT_STATUS_RIGHT;   /**    * 圓點透明度變化最大(也就是透明度在255-mAlphaChangeTotal到255之間)    */   private int mAlphaChangeTotal = 130;   /**    * 透明度變化率    */   private float mAlphaChangeRate;   /**    * 透明度改變量    */   private float mAlphaChange;      public DotAlternatelyView(Context context) {    this(context, null);   }      public DotAlternatelyView(Context context, @Nullable AttributeSet attrs) {    this(context, attrs, 0);   }      public DotAlternatelyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DotAlternatelyView, defStyleAttr, 0);    initAttributes(typedArray);    typedArray.recycle();    init();   }      private void initAttributes(TypedArray Attributes) {    mLeftColor = Attributes.getColor(R.styleable.DotAlternatelyView_dot_dark_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));    mRightColor = Attributes.getColor(R.styleable.DotAlternatelyView_dot_light_color, ContextCompat.getColor(getContext(), R.color.colorAccent));    mDotRadius = Attributes.getDimensionPixelSize(R.styleable.DotAlternatelyView_dot_radius, DensityUtils.dp2px(getContext(), 3));    mDotSpacing = Attributes.getDimensionPixelSize(R.styleable.DotAlternatelyView_dot_spacing, DensityUtils.dp2px(getContext(), 6));    mMoveRate = Attributes.getFloat(R.styleable.DotAlternatelyView_dot_move_rate, 1.2f);   }      /**    * 初始化    */   private void init() {    //移動總距離/移動率 = alpha總變化/x    //x = 移動率 * alpha總變化 / 移動總距離    mAlphaChangeRate = mMoveRate * mAlphaChangeTotal / (mDotRadius * 2 + mDotSpacing);    mPaint.setColor(mLeftColor);    mPaint.setAntiAlias(true);    mPaint.setStyle(Paint.Style.FILL);    Log.e(TAG, " aaaa " + mAlphaChangeRate);   }      @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 = (mDotRadius * 2) * 2 + mDotSpacing;     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 = mDotRadius * 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) {    //左邊圓點起點x軸    int startPointX = getWidth() / 2 - (2 * mDotRadius * 2 + mDotSpacing) / 2 + mDotRadius;    //左邊圓點起點y軸    int startPointY = getHeight() / 2;    //向右移 位移要增加對應透明度變化量也需要增加 反之都需要減小    if (mDotChangeStatus == DOT_STATUS_RIGHT) {     mMoveDistance += mMoveRate;     mAlphaChange += mAlphaChangeRate;    } else {     mAlphaChange -= mAlphaChangeRate;     mMoveDistance -= mMoveRate;    }    Log.e(TAG, "mAlphaChange " + mAlphaChange);    //當移動到最右 那麼需要改變方向 反過來    if (mMoveDistance >= mDotRadius * 2 + mDotSpacing && mDotChangeStatus == DOT_STATUS_RIGHT) {     mDotChangeStatus = DOT_STATUS_LEFT;     mMoveDistance = mDotRadius * 2 + mDotSpacing;     mAlphaChange = mAlphaChangeTotal;    } else if (mMoveDistance <= 0 && mDotChangeStatus == DOT_STATUS_LEFT) { //當移動到最座 那麼需要改變方向 反過來     mDotChangeStatus = DOT_STATUS_RIGHT;     mMoveDistance = 0f;     mAlphaChange = 0f;    }       //因為兩個圓點可能會給定不同的顏色來顯示 所以提供兩種顏色設置mLeftColor和mRightColor    mPaint.setColor(mLeftColor);    mPaint.setAlpha((int) (255 - mAlphaChange));    canvas.drawCircle(startPointX + mMoveDistance, startPointY, mDotRadius, mPaint);    mPaint.setColor(mRightColor);    mPaint.setAlpha((int) (255 - mAlphaChange));    canvas.drawCircle(startPointX + mDotRadius * 2 - mMoveDistance + mDotSpacing, startPointY, mDotRadius, mPaint);       invalidate();   }  }

要是不容易理解的話，下載源碼運行再對著源碼看會容易理解