1. 程式人生 > 程式設計 >Android實現兩圓點之間來回移動載入進度

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

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

一、前言

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

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

二、實現

先看下實現的效果吧:

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

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

說下實現思路:圓點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,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,R.color.colorAccent));
  mDotRadius = Attributes.getDimensionPixelSize(R.styleable.DotAlternatelyView_dot_radius,DensityUtils.dp2px(getContext(),3));
  mDotSpacing = Attributes.getDimensionPixelSize(R.styleable.DotAlternatelyView_dot_spacing,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,mPaint);
 
  invalidate();
 }
}

要是不容易理解的話,下載原始碼執行再對著原始碼看會容易理解

原始碼下載github:Android移動載入進度

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