自定义view-波纹扩散（圆扩散）

Posted 2021-09-05 Jason_Lee155

前言

有时候涉及到等待状态，会用到波纹扩散，可能还会在扩散中间加一张图片，具体根据自己需要再修改。这里仅提供扩散设计思路。

实现步骤

1.先画一个圆，同时将圆的半径抽出一个变量（半径是可变的）
2.添加新圆的时机，采用数组遍历画多个圆
3.处理数组中数据

代码

自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="WaveView">
        <attr name="wavecolor" format="color"/> <!--view颜色-->
        <attr name="fillstyle" format="boolean"/><!--Paint的填充风格-->
        <attr name="space" format="integer"/><!--每个圆形间距-->
        <attr name="width" format="integer"/><!--扩散的宽度-->
    </declare-styleable>
</resources>

这里提一下，name最好跟class名一致。

WaveView的实现

package partyhistorymuseum.lixiaoqian.com.custom_1;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
 * Description :水波纹Imageview
 * 步骤:拆分式实现
 * 1.先画个圆,通过属性动画扩散(根据圆的radius)
 * 2.通过255f/view宽*当前drawCiry 去设置透明度
 * 3.间隔多久(间距)在画一个圆
 * @author LiGuangjin
 * @date 2021/8/12
 */
public class WaveView extends View {
    private static int centerColor;
    private Paint mPaint;
    // 透明度比例，按照扩散圆范围，递减
    private float alpharate;
    private boolean isStartAnim = false;
    // 圆心
    private float centerX, centerY;
    // 新增圆的节点，到达此点增加一个圆
    private int mSpace;
    // 圆扩散宽度
    private int mWidth;
    // 圆是否填充满
    private boolean isFillstyle;
    private List<Float> mCount= new ArrayList();
    private List<Integer> mAlphas = new ArrayList();


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

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveView);
        centerColor = typedArray.getColor(R.styleable.WaveView_wavecolor, Color.BLUE);
        mSpace = typedArray.getInteger(R.styleable.WaveView_space, 100);
        isFillstyle = typedArray.getBoolean(R.styleable.WaveView_fillstyle, true);
        mWidth = typedArray.getInteger(R.styleable.WaveView_width, 400);
        typedArray.recycle();
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        if (isFillstyle) {
            mPaint.setStyle(Paint.Style.FILL);
        } else {
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(3);
        }
        alpharate = 255f / mWidth; //注意这里 如果为int类型就会为0,除数中f一定要加,默认int ;
        mAlphas.add(255);
        mCount.add(0f);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //圆心位置
        centerX = w / 2;
        centerY = h / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (isStartAnim) {
            // 自身调用自身不停的刷新
            invalidate();
        }
        mPaint.setColor(centerColor);
        for (int i = 0; i < mCount.size(); i++) { //遍历圆数目
            Integer cuAlpha = mAlphas.get(i);
            mPaint.setAlpha(cuAlpha);
            Float aFloat = mCount.get(i);
            canvas.drawCircle(centerX, centerY, aFloat, mPaint); //画圆
            if (aFloat < mWidth) {  //扩散直径和透明度
                mAlphas.set(i, (int) (255 - alpharate * aFloat));
                mCount.set(i, aFloat + 1);
            }
            //Log.d("WaveWiew", "onDraw: "+cuAlpha+" "+aFloat);
        }
        // 始终保持仅有五个圆扩散
        if (mCount.size() >= 8) {
            mAlphas.remove(0);
            mCount.remove(0);
        }
        // 如果圆到达此点，增加一个圆
        if (mCount.get(mCount.size() - 1) == mSpace) {
            mAlphas.add(255);
            mCount.add(0f);
        }
    }

    public void startAnim() {
        isStartAnim = true;
        invalidate();
    }

    public void pauseAnim() {
        isStartAnim = false;
    }

    public boolean isAniming(){
        return isStartAnim;
    }
}

• alpharate的值是float类型的，如果采用int类型在mWidth大于255的时候永远都是0，int类型对于余数都是直接舍去取整。
• 对于if (isStartAnim) { invalidate();}代码建议放在onDraw最前面，Why？ 考虑到切换activity要立马暂停扩散动画，如果不这样，会有延迟，造成视觉上的卡顿。
• 在onDraw中最好不要new对象，请都放在构造函数中初始化。

xml布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:zhibo="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.custom_1.MainActivity">

    <com.custom_1.WaveView
        android:id="@+id/waveView"
        android:layout_width="400dp"
        android:layout_height="400dp"
        zhibo:wavecolor="@color/colorPrimary"
        zhibo:space="100"
        zhibo:width="400"
        zhibo:fillstyle="false"
        android:layout_centerInParent="true" />
</RelativeLayout>