波形浮动

最新推荐文章于 2024-04-23 21:34:07 发布

原创最新推荐文章于 2024-04-23 21:34:07 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用自定义View实现动态波形效果的方法，通过数学正弦函数结合动画更新绘制路径，实现了波形的动态变化。文章详细展示了WaveView类的实现过程，包括属性设置、绘制逻辑和事件监听，以及如何在布局中使用该组件。

1.WaveView

package com.bwie.waveview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DrawFilter;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
*
*/

public class WaveView extends View {

    private static final String TAG = "WaveView";
    private float fai = 0;
    private Paint paint1;
    private Paint paint2;
    private Path path1;
    private Path path2;
    private DrawFilter drawFilter;

    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);
        init();
    }

    // 波形浮动的监听
    public interface OnWaveChangeListener {
        void onChanged(float y);
    }

private OnWaveChangeListener listener;

    public void setOnWaveChangeListener(OnWaveChangeListener listener) {
        this.listener = listener;
    }

    private void init() {
        paint1 = new Paint();
        paint1.setColor(Color.WHITE);
        paint1.setAntiAlias(true);
        paint1.setStyle(Paint.Style.FILL);
        paint1.setStrokeWidth(5);

        paint2 = new Paint();
        paint2.setColor(Color.WHITE);
        paint2.setStyle(Paint.Style.FILL);
        paint2.setAntiAlias(true);
        paint2.setStrokeWidth(5);
        paint2.setAlpha(60);

path1 = new Path();
path2 = new Path();

drawFilter = new PaintFlagsDrawFilter(0, Paint.FILTER_BITMAP_FLAG | Paint.ANTI_ALIAS_FLAG);
}

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

double Ω = 2 * Math.PI / getMeasuredWidth();

canvas.setDrawFilter(drawFilter);

fai -= 0.1f;

int A = getMeasuredHeight() / 2;

path1.reset();
path2.reset();

        // 起始点在左下角
        path1.moveTo(getLeft(), getBottom());
        path2.moveTo(getLeft(), getBottom());

// 从最左侧开始，画到最右侧，每20px画一条线
for (int x = 0; x <= getMeasuredWidth(); x += 20) {

//            float y = Asin(Ωx+φ)+k
            float y1 = A * (float) Math.sin(Ω * x + fai) + A;
            float y2 = -A * (float) Math.sin(Ω * x + fai) + A;

            if (x > getMeasuredWidth() / 2 - 10 && x < getMeasuredWidth() / 2 + 10) {
                listener.onChanged(y2);
            }

//            Log.i(TAG, "onDraw: (" + x + ", " + y + ")");
            path1.lineTo(x, y1);
            path2.lineTo(x, y2);

}

        // 终止点在右下角
        path1.lineTo(getWidth(), getBottom());
        path2.lineTo(getWidth(), getBottom());

canvas.drawPath(path1, paint1);
canvas.drawPath(path2, paint2);

postInvalidateDelayed(50);

}

Layout

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

        <com.bwie.waveview.WaveView
            android:id="@+id/wv"
            android:layout_width="match_parent"
            android:layout_height="40px"
            android:layout_alignParentBottom="true" />

</RelativeLayout>

</LinearLayout>

2 MainActivity

package com.bwie.waveview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private WaveView wv;
    private ImageView imgCursor;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

wv = findViewById(R.id.wv);
imgCursor = findViewById(R.id.img_cursor);

        WaveView.OnWaveChangeListener listener = new WaveView.OnWaveChangeListener() {
            @Override
            public void onChanged(float y) {

                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) imgCursor.getLayoutParams();
                layoutParams.setMargins(0, 0, 0, (int) y);
                imgCursor.setLayoutParams(layoutParams);
            }
        };

        wv.setOnWaveChangeListener(listener);
        // 会调用onMeasure和onLayout方法
//        wv.requestLayout();
    }
}