2018-02-07 • AndroidView

自定义一个水波球状控件

转载请注明出处：https://juejin.im/post/5a8e773751882524713df4e3

写在开头

一个似水波的球状控件，WaterWaveBallView，其实际用途同 ProgressBar 进度显示控件。

我们先构思，它由哪些部分构成，它需要定义些什么属性。

水波：两条正弦或余弦曲线。
球状：圆形视图。
颜色：两条曲线与控件底部间的填充颜色。
高度：两条曲线的水平线位置。

当然了，这只是我们前期的设想，在实际的实现过程中会遇到很多的未知问题。

发车…

引狼，镇贴

实现过程

水波

public class GoiWaveView extends View {

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mTotalWidth = w; // 控件的宽度
        mTotalHeight = h; // 控件的高度
        // 定义波形的周期为控件的宽度，即 ω：周期
        FACTOR_W = (float) (2 * Math.PI / mTotalWidth); 
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for(int i = 0; i < mTotalHeight; i ++){
            // 计算出横坐标 i 对应的 纵坐标值 positionY
            float positionY = (float) (numberA * Math.sin(FACTOR_W *i) + OFFSET_Y);
            // 画竖线，从起始位置(0, mTotalHeight - 0 - 100)画到终点坐标(0, mTotalHeight)
            canvas.drawLine(i, mTotalHeight - positionY - 100, i, mTotalHeight, sinPaint);
        }

    }}

解释下 canvas.drawLine(i, mTotalHeight - positionY - 100, i, mTotalHeight, sinPaint);

假设控件的高度 mTotalHeight = 300，当 i = 0 时
drawLine的四个参数：
startX，此时是 0；
startY，此时是 300 - 0 - 100；
stopX，此时是 0；
stopY，此时是 300。

左上角的坐标是(0, 0)，所以是 mTotalHeight - positionY，-100是为了我们看到曲线的全貌。
可以看到，实际上画正弦曲线的过程就是画一根一根的竖线，它们是连续的，所以我们看到的是填充了的曲线图。

再加一个余弦曲线…

sin+cos.png

然后，让两条曲线，都移动起来。

移动两条曲线

其思路是，将一个完整的曲线向左或右移动，如何移动呢？
将一个周期曲线的横纵坐标点，记录下来。

for(int i = 0; i < mTotalWidth; i ++){
            // 计算出横坐标 i 对应的 纵坐标值 positionY
            yOnePosition[i] = (float) (Y_FUNCTION_NUMBER_A * Math.sin(FACTOR_W *i) + OFFSET_Y);
            yTwoPosition[i] = (float) (Y_FUNCTION_NUMBER_A * Math.cos(FACTOR_W *i) + OFFSET_Y);
        }

xOneOffset 是移动偏移量，通过 System.arraycopy 方法将在移动中超出屏幕部分的点，添加到新数组的后面。
即： 1 2 3 4 5 6 7 8 9 10 向左移动两个数
变成：3 4 5 6 7 8 9 10
这时把 1 2 追加到 10 的后面，使其变成
3 4 5 6 7 8 9 10 1 2

在正弦和余弦曲线中，他们还是首尾相连的。

int xOnePoint = yOnePosition.length - xOneOffset;
System.arraycopy(yOnePosition, xOneOffset, yOneResetPosition, 0, xOnePoint);
System.arraycopy(yOnePosition, 0, yOneResetPosition, xOnePoint, xOneOffset);

核心代码

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int xOnePoint = yOnePosition.length - xOneOffset;
    System.arraycopy(yOnePosition, xOneOffset, yOneResetPosition, 0, xOnePoint);
    System.arraycopy(yOnePosition, 0, yOneResetPosition, xOnePoint, xOneOffset);

    int xTwoPoint = yTwoPosition.length - xTwoOffset;
    System.arraycopy(yTwoPosition, xTwoOffset, yTwoResetPosition, 0, xTwoPoint);
    System.arraycopy(yTwoPosition, 0, yTwoResetPosition, xOnePoint, xTwoOffset);

    for(int i = 0; i < mTotalHeight; i ++){
        // 画竖线，从起始位置(0, mTotalHeight - 0 - 100)画到终点坐标(0, mTotalHeight)
        canvas.drawLine(i, mTotalHeight - yOneResetPosition[i] - 50, i, mTotalHeight, sinPaint);
        canvas.drawLine(i, mTotalHeight - yTwoResetPosition[i] - 50, i, mTotalHeight, cosPaint);
    }

    // 每次移动多少个坐标
    xOneOffset += xOneSpeed;
    xTwoOffset += xTwoSpeed;
    // 横坐标如果超过控件的宽度，则从0开始循环
    if(xOneOffset >= mTotalWidth){
        xOneOffset = 0;
    }
    if(xTwoOffset >= mTotalWidth){
        xTwoOffset = 0;
    }
    postInvalidate();

}

球状

猜想：

利用 Xfermode 使一个圆形与波形图混合；
利用 Xfermode 使一个圆形与一个与控件同等高宽的矩形混合；
找 UI 小姐姐给一个遮罩图。

经过测试：

圆形与波形图混合，可能因为 Xfermode 混合图层消耗也是很大的，再加上不断地 draw 波形图，每 draw 一次都会去混合一次，所以运行起来很不流畅，很卡顿的感觉。
第一个方法行不通，所以采用的这个方法。这时新建了一个图层来混合，使其形成一个空心的圆，放在波形图的上面。只会混合一次，所以消耗不大。
第三种方法，我是最先尝试的，这个必然是可行的，在 layout 布局文件中处理。只是毕竟程序猿都喜欢用代码来解决。

方法2 的核心代码如下：

for (int i = 0; i < mTotalWidth; i++) {
	canvas.drawLine(i, mTotalHeight - mResetOneYPositions[i] - getLevelNumber(),
            i, mTotalHeight, mWavePaint);

	canvas.drawLine(i, mTotalHeight - mResetTwoYPositions[i] - getLevelNumber(),
            i, mTotalHeight, mWavePaintN);
}
// 将当前画布保存起来，在此行代码以后的绘制，都是在新的图层中。
int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
mWavePaint.setColor(Color.WHITE);
// 画一个和控件宽高相同的矩形
canvas.drawRect(0, 0, getWidth(), getHeight(), mWavePaint);
// 设置混合模式为 DST_OUT，即在矩形中掏一个圆出来。
mWavePaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
// 画一个半径为控件宽高 1/2 的圆
canvas.drawCircle(getWidth()/2, getHeight()/2, circleRadius, mWavePaint);
mWavePaint.setXfermode(null);
// 还原保存的画布
canvas.restoreToCount(sc);
mWavePaint.setColor(WAVE_COLOR);

本文主要讲控件的实现，关于更多的 Xfermode 学习烦请自行搜索，它还有很多神奇的用法，相信不会让你失望。

颜色

为了使波形的颜色值可以动态控制，可通过布局文件中自定义属性来实现。

创建资源文件

定义两个颜色属性名，和类型

2.在自定义控件的构造函数中获取属性值

public GoiWaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.GoiWaveView);
    SIN_WAVE_COLOR = typedArray.getColor(R.styleable.GoiWaveView_sin_color, Color.BLUE);
    COS_WAVE_COLOR = typedArray.getColor(R.styleable.GoiWaveView_cos_color, Color.RED);
}

3.在 layout 布局文件中给值

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

    <com.goileo.cview.view.GoiWaveView
        android:id="@+id/wave_view_goi"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:cos_color="@color/colorPrimary"
        app:sin_color="#abcdef"
        android:layout_gravity="center" />

</LinearLayout>

运行就能看到效果了。

高度

高度则需通过公共方法来传参。

public float getLevelNumber() {
	return levelNumber;
}

public void setLevelNumber(double levelNumbers) {
	levelNumber = (int)((double)(levelNumbers * (double)mTotalHeight / 1000));
	this.invalidate();
}

这里设置成 1000 ，是为了让波形上升时看上去更平缓。

写在后头

本文主要记录了自定义球状水波纹升级控件的实现过程，其中包括波形绘制、Xfermode混合技术应用、自定义属性等。

如果有错误之处，烦请告知或指正。

演示：

记录在此，仅为学习！
感谢您的阅读！欢迎指正！
欢迎加入 Android 技术交流群，群号：155495090。