xml佈局:

<RelativeLayout
    android:background="#f00"
    android:layout_width="match_parent"
    android:layout_height="200dp">

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

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher"
        />

</RelativeLayout>
 

首先 新建一個class WaveView 繼承View

public class WaveView extends View {

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

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

public WaveView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

//波動浮動監聽
public interface OnWaveChangeListener {
    void onchange(float y);
}

private OnWaveChangeListener listener;

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

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

    paint2 = new Paint();
    paint2.setColor(Color.WHITE);
    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 v = 2 * Math.PI / getMeasuredWidth();

    canvas.setDrawFilter(drawFilter);

    fai -= 0.1f;

    int i = getMeasuredHeight() / 2;

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

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

    //從最左側開始 畫到最右側 每20px畫一條線
    for (int x = 0; x <= getMeasuredWidth(); x += 20) {

        float y1 = i * (float) Math.sin(v * x + fai) + i;
        float y2 = -i * (float) Math.sin(v * x + fai) + i;

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

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

}

java程式碼:

public class MainActivity extends AppCompatActivity {

private static final String TAG = "MainActivity";
private WaveView waveView;
private ImageView image;

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

    waveView = (WaveView) findViewById(R.id.waveview);
    image = (ImageView) findViewById(R.id.image);

    WaveView.OnWaveChangeListener listener = new WaveView.OnWaveChangeListener() {

        @Override
        public void onchange(float y) {
            RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) image.getLayoutParams();
            layoutParams.setMargins(0, 0, 0, (int) y);
            image.setLayoutParams(layoutParams);
        }
    };
    waveView.setOnWaveChangeListener(listener);
}
 

}