Android实现仿iOS菊花加载圈动画效果

目录

• 常见的实现方式

• 效果图：

• 完整代码

• 布局代码

常见的实现方式

• 切图，做旋转动画

• 自定义View，绘制效果

• gif图

1、切图会增加体积，但相对简单，不过在换肤的场景下，会使用不同颜色，需要准备多张图，不够灵活。

2、由于自定义的好处，不同颜色只需要提供自定义属性，换肤时切换属性设置即可，比较灵活。

3、gif图普遍比较大，而且加载gif没有原生支持，需要引入第三方库，而且消耗内存比较大，不推荐。

效果图：

完整代码

自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <declare-styleable name="ActivityIndicatorView">
       <!--  菊花颜色  -->
       <attr name="aiv_color" format="color" />
       <!--  开始角度  -->
       <attr name="aiv_startAngle" format="integer" />
       <!--  线条宽度  -->
       <attr name="aiv_strokeWidth" format="dimension" />
       <!--  是否自动开始  -->
       <attr name="aiv_auto_start" format="boolean" />
   </declare-styleable>
</resources>

Java代码实现过程：

public class ActivityIndicatorView extends View {
   /**
    * 菊花颜色
    */
   private int mColor = Color.argb(255, 255, 255, 255);
   /**
    * 开始角度
    */
   private int mStartAngle = 0;
   /**
    * 每条线的宽度
    */
   private float mStrokeWidth = 0;
   /**
    * 是否自动开始旋转
    */
   private boolean isAutoStart;
   /**
    * 一共多少条先
    */
   private final int mLineCount = 12;
   private final int minAlpha = 0;
   /**
    * 每一条线叠加的
    */
   private final int mAngleGradient = 360 / mLineCount;
   /**
    * 每条线的颜色
    */
   private int[] mColors = new int[mLineCount];
   /**
    * 画笔
    */
   private Paint mPaint;
   /**
    * 动画Handler
    */
   private Handler mAnimHandler = new Handler(Looper.getMainLooper());
   /**
    * 动画任务
    */
   private Runnable mAnimRunnable = new Runnable() {
       @Override
       public void run() {
           mStartAngle += mAngleGradient;
           invalidate();
           mAnimHandler.postDelayed(mAnimRunnable, 50);
       }
   };

public ActivityIndicatorView(Context context) {
       this(context, null);
   }

public ActivityIndicatorView(Context context, AttributeSet attrs) {
       this(context, attrs, 0);
   }

public ActivityIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       setup(context, attrs, defStyleAttr, 0);
   }

private void setup(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
       TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ActivityIndicatorView, defStyleAttr, defStyleRes);
       mColor = typedArray.getColor(R.styleable.ActivityIndicatorView_aiv_color, mColor);
       mStartAngle = typedArray.getInt(R.styleable.ActivityIndicatorView_aiv_startAngle, mStartAngle);
       mStrokeWidth = typedArray.getDimension(R.styleable.ActivityIndicatorView_aiv_strokeWidth, mStrokeWidth);
       isAutoStart = typedArray.getBoolean(R.styleable.ActivityIndicatorView_aiv_auto_start, true);
       typedArray.recycle();
       initialize();
   }

private void initialize() {
       mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
       int alpha = Color.alpha(mColor);
       int red = Color.red(mColor);
       int green = Color.green(mColor);
       int blue = Color.blue(mColor);
       int alphaGradient = Math.abs(alpha - minAlpha) / mLineCount;
       for (int i = 0; i < mColors.length; i++) {
           mColors[i] = Color.argb(alpha - alphaGradient * i, red, green, blue);
       }
       mPaint.setStrokeCap(Paint.Cap.ROUND);
   }

@Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       int centerX = getWidth() / 2;
       int centerY = getHeight() / 2;
       float radius = Math.min(getWidth() - getPaddingLeft() - getPaddingRight(), getHeight() - getPaddingTop() - getPaddingBottom()) * 0.5f;
       if (mStrokeWidth == 0) {
           mStrokeWidth = pointX(mAngleGradient / 2, radius / 2) / 2;
       }
       mPaint.setStrokeWidth(mStrokeWidth);
       for (int i = 0; i < mColors.length; i++) {
           mPaint.setColor(mColors[i]);
           canvas.drawLine(
                   centerX + pointX(-mAngleGradient * i + mStartAngle, radius / 2),
                   centerY + pointY(-mAngleGradient * i + mStartAngle, radius / 2),
                   //这里计算Y值时, 之所以减去线宽/2, 是防止没有设置的Padding时,图像会超出View范围
                   centerX + pointX(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),
                   //这里计算Y值时, 之所以减去线宽/2, 是防止没有设置的Padding时,图像会超出View范围
                   centerY + pointY(-mAngleGradient * i + mStartAngle, radius - mStrokeWidth / 2),
                   mPaint);
       }
   }

private float pointX(int angle, float radius) {
       return (float) (radius * Math.cos(angle * Math.PI / 180));
   }

private float pointY(int angle, float radius) {
       return (float) (radius * Math.sin(angle * Math.PI / 180));
   }

@Override
   protected void onAttachedToWindow() {
       super.onAttachedToWindow();
       if (isAutoStart) {
           start();
       }
   }

@Override
   protected void onDetachedFromWindow() {
       super.onDetachedFromWindow();
       if (mAnimHandler != null) {
           stop();
       }
   }

/**
    * 开始动画
    */
   public void start() {
       mAnimHandler.post(mAnimRunnable);
   }

/**
    * 停止动画
    */
   public void stop() {
       mAnimHandler.removeCallbacks(mAnimRunnable);
   }

/**
    * 设置菊花颜色
    */
   public void setColor(int color) {
       this.mColor = color;
   }

/**
    * 设置线宽
    */
   public void setStrokeWidth(float strokeWidth) {
       this.mStrokeWidth = strokeWidth;
   }

/**
    * 设置开始的角度
    */
   public void setStartAngle(int startAngle) {
       this.mStartAngle = startAngle;
   }
}

布局代码

布局中添加控件，适当时候显示、隐藏即可，最好都设置宽、高、颜色以及线宽，默认效果比较不符合使用。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

<com.tongwei.bootrunsample.base.widget.ActivityIndicatorView
       android:id="@+id/activity_indicator"
       android:layout_width="25dp"
       android:layout_height="25dp"
       android:layout_gravity="center"
       android:layout_centerInParent="true"
       app:aiv_color="#A2A3B0"
       app:aiv_strokeWidth="2.5dp" />
</RelativeLayout>

到这里就结束了.

来源：https://mp.weixin.qq.com/s/iYhoz9a_vNtmkcZjAB8ruQ