Android实现两圆点之间来回移动加载进度

Ailis ·

更新时间:2024-09-20

· 976 次阅读

本文实例为大家分享了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();
 }
}

要是不容易理解的话，下载源码运行再对着源码看会容易理解

源码下载github：Android移动加载进度

您可能感兴趣的文章:Android实现图片加载进度提示Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)Android实现圆形渐变加载进度条Android仿微信公众号文章页面加载进度条Android自定义View实现加载进度条效果Android自定义View仿华为圆形加载进度条Android基于Glide v4.x的图片加载进度监听Android Material加载进度条制作代码Android自定义View基础开发之图片加载进度条Android Webview添加网页加载进度条实例详解

圆点 Android

1024 个赞