在Android中添加WaveLineView

WaveLineView 可以让你在Android中快速实现波浪线效果，这种效果可以用来创建不同类型的背景、进度条、指引等等。

构建WaveLineView

我们可以创建一个自定义的 View ，从而创建 WaveLineView，这个 View 包括以下两个重要的方法：

onMeasure()

这个方法会被 Android 系统自动调用，并且会用来确定 View 的大小。

在 WaveLineView 上，测量 View 的大小是比较简单的，因为我们只需要知道 View 的宽度和高度就可以。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    }

onDraw()

这个方法是自定义 View 中最重要的方法，因为它会被用来绘制这个 View。

在 WaveLineView 中，我们会使用 Path 和 Canvas 来实现波浪线的绘制。

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

        // 每次 onDraw() 都会重新绘制波浪线
        Path path = new Path();
        path.moveTo(0, getYPosition(0));

        // 通过贝塞尔曲线实现波浪线的绘制
        for (float x = 0; x <= getWidth(); x += X_SPACE) {
            path.lineTo(x, getYPosition(x));
        }

        // 绘制波浪线
        canvas.drawPath(path, mPaint);
    }

添加WaveLineView到布局

在布局中添加 WaveLineView 的步骤非常简单：

<com.example.app.WaveLineView
    android:layout_width="match_parent"
    android:layout_height="150dp" />

注意：你还需要在 WaveLineView 中设置一些自定义属性，如颜色、振幅、周期等等，具体可以根据实际需求来设置。

示例代码

public class WaveLineView extends View {

    // 控件宽度
    private float mWidth;

    // 控件高度
    private float mHeight;

    // 波浪线的振幅
    private float mAmplitude;

    // 波浪线的周期
    private float mPeriod;

    // 波浪线的颜色
    private int mLineColor;

    // 波浪线的 Paint
    private Paint mPaint;

    // 步长
    private final float X_SPACE = 10;

    public WaveLineView(Context context) {
        super(context);
        setup();
    }

    public WaveLineView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WaveLineView);

        mAmplitude = typedArray.getFloat(R.styleable.WaveLineView_amplitude, 50f);
        mPeriod = typedArray.getFloat(R.styleable.WaveLineView_period, 200f);
        mLineColor = typedArray.getColor(R.styleable.WaveLineView_waveColor, Color.BLUE);

        typedArray.recycle();

        setup();
    }

    // 初始化
    private void setup() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(2f);
        mPaint.setColor(mLineColor);
        mPaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    }

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

        // 每次 onDraw() 都会重新绘制波浪线
        Path path = new Path();
        path.moveTo(0, getYPosition(0));

        // 通过贝塞尔曲线实现波浪线的绘制
        for (float x = 0; x <= getWidth(); x += X_SPACE) {
            path.lineTo(x, getYPosition(x));
        }

        // 绘制波浪线
        canvas.drawPath(path, mPaint);
    }

    // 计算 y 坐标
    private float getYPosition(float x) {
        return (float) (mAmplitude * Math.sin(2 * Math.PI * (x / mPeriod)));
    }
}

可以按照上面的代码片段创建自己的 WaveLineView。