写在开头
一个似水波的球状控件，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);
}
}}
sin.png
解释下 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 学习烦请自行搜索，它还有很多神奇的用法，相信不会让你失望。
颜色
为了使波形的颜色值可以动态控制，可通过布局文件中自定义属性来实现。
- 创建资源文件
image.png
定义两个颜色属性名，和类型
image.png
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 热修复 - 各框架原理学习及对比
Android 热修复 - Tinker 实现及踩过的坑
记录在此，仅为学习！
感谢您的阅读！欢迎指正！
欢迎加入 Android 技术交流群，群号：155495090。
