Android 自定义 View 集锦｜实现水波纹扩散效果

通过自定义 View 来满足 UI 中的特殊设计在工作中是很常见的事情，比如带图例的柱状图、带进度的进度条等。这些实现起来相对简单的自定义 View 往往也需要费点时间在实现方式上多多思考。

自工作以来，也写过不少各式各样的自定义 View，但很少汇总起来，供日后参考。导致后续需要的时候都得重新设计、Coding，比较费时费力。于是打算将这些自定义 View 汇总到一个 Demo 工程中，并上传至 GitHub 网站，供自己备用的同时，也能给他人带来帮助。

https://github.com/Mike-bel/android-custom-views

考虑到这种简单的自定义 View 并不需要通过 Library 的形式引入第三方开源库，所以也没有做成 Gradle 依赖的形式。可以找到对应 View 的源码，直接复制使用即可。

目前已经上传第一个自定义 View，实现的效果是带图标的水波纹扩散效果，效果如图：

实现方式可以有很多种，简单描述一下我的实现思路是：

1. 由于中间是一张圆形图片，不同半径大小的静态水波纹可以通过绘制不同圆环宽度的方式实现，圆环内径也就是圆形图片的半径；

2. 动态的扩散效果实际上就是定时改变每条波纹的圆环宽度，然后不停地重新绘制便产生了动画效果；

3. 不同大小的波纹可以使用画笔 Paint 对象的 Alpha 值实现渐变效果，而这个值可以根据当前圆环宽度与最大值的对比计算得出。

有了清晰的实现思路，写起代码来就会很得心应手，完整代码如下：

package com.yifeng.view.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

import com.yifeng.view.R;

/**
 * Created by lxf on 2017/7/23.
 * 水波纹效果
 */
public class WaterRippleView extends View {

    private boolean mRunning = false;

    private int[] mStrokeWidthArr;
    private int mMaxStrokeWidth;
    private int mRippleCount;
    private int mRippleSpacing;

    private Paint mPaint;
    private Bitmap mBitmap;

    private int mWidth;
    private int mHeight;

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

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

    public WaterRippleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(context, attrs);
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaterRippleView);
        int waveColor = typedArray.getColor(R.styleable.WaterRippleView_rippleColor,
                ContextCompat.getColor(context, R.color.colorPrimary));
        Drawable drawable = typedArray.getDrawable(R.styleable.WaterRippleView_rippleCenterIcon);
        mRippleCount = typedArray.getInt(R.styleable.WaterRippleView_rippleCount, 2);
        mRippleSpacing = typedArray.getDimensionPixelSize(R.styleable.WaterRippleView_rippleSpacing,
                16);
        mRunning = typedArray.getBoolean(R.styleable.WaterRippleView_rippleAutoRunning, false);
        typedArray.recycle();

        mBitmap = ((BitmapDrawable) drawable).getBitmap();

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(waveColor);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int size = (mRippleCount * mRippleSpacing + mBitmap.getWidth() / 2) * 2;
        mWidth = resolveSize(size, widthMeasureSpec);
        mHeight = resolveSize(size, heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);

        mMaxStrokeWidth = (mWidth - mBitmap.getWidth()) / 2;
        initArray();
    }

    private void initArray() {
        mStrokeWidthArr = new int[mRippleCount];
        for (int i = 0; i < mStrokeWidthArr.length; i++) {
            mStrokeWidthArr[i] = - mMaxStrokeWidth / mRippleCount * i;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawBitmap(canvas);
        if (mRunning) {
            drawRipple(canvas);
            postInvalidateDelayed(50);
        }
    }

    private void drawBitmap(Canvas canvas) {
        int left = (mWidth - mBitmap.getWidth()) / 2;
        int top = (mHeight - mBitmap.getHeight()) / 2;
        canvas.drawBitmap(mBitmap, left, top, null);
    }

    private void drawRipple(Canvas canvas) {
        for (int strokeWidth : mStrokeWidthArr) {
            if (strokeWidth < 0) {
                continue;
            }
            mPaint.setStrokeWidth(strokeWidth);
            mPaint.setAlpha(255 - 255 * strokeWidth / mMaxStrokeWidth);
            canvas.drawCircle(mWidth / 2, mHeight / 2, mBitmap.getWidth() / 2 + strokeWidth/2,
                    mPaint);
        }

        for (int i = 0; i < mStrokeWidthArr.length; i++) {
            if ((mStrokeWidthArr[i] += 4) > mMaxStrokeWidth) {
                mStrokeWidthArr[i] = 0;
            }
        }
    }

    public void start() {
        mRunning = true;
        postInvalidate();
    }

    public void stop() {
        mRunning = false;
        initArray();
        postInvalidate();
    }

}

需要注意的是：整个自定义 View 的宽度是由水波纹的波纹条数和波纹间距控制的。事实上，感官上的波纹移动速度也是由这两个属性间接体现出来的。

再看看 attrs 中的自定义属性内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="WaterRippleView">
        <attr name="rippleSpacing" format="dimension|reference"/>
        <attr name="rippleCount" format="integer|reference"/>
        <attr name="rippleColor" format="color|reference"/>
        <attr name="rippleCenterIcon" format="reference"/>
        <attr name="rippleAutoRunning" format="boolean"/>
    </declare-styleable>

</resources>

如上所示，相邻波纹间距、波纹数量、波纹颜色、图标和是否自动开启动画都能够通过 Layout 中的设置自由定制。并且能够通过 Java 代码动态启动或停止动画效果。

这样，一个完整的水波纹扩散效果的自定义 View 就完成了，并且使用起来灵活度很高。

android-custom-views 慢慢也会添加更多项目中常用的自定义 View 内容，喜欢的话欢迎给个 Star，或者通过 issue 的方式提出你的意见，和我一起交流，共同进步。

---

本文由 亦枫 创作并首发于 亦枫的个人博客 ，同步推送微信公众号：安卓笔记侠（androidnotebyyifeng）。

欢迎各种形式地交流与转载，注明作者、出处和微信公众号即可。

本文标题为: Android 自定义 View 集锦｜实现水波纹扩散效果

本文链接为：https://woyifeng.com/2017/07/24/android-custom-views-water-ripple-effect/

赏

请我喝咖啡，资瓷资瓷~

支付宝

微信