自定义控件实现波浪效果

本文详细介绍了如何在应用程序中通过自定义控件实现动态的波浪效果。从绘制波浪形状到添加动画,一步步揭示了整个过程,让读者能够理解并复现这种视觉效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200px"
    android:background="#FF0000">

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

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

</RelativeLayout>

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

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) {
 //Log.i(TAG, "onChanged: y=" + 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();
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值