Android实现波浪滑动

一.布局

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

    <comp.bwei.day021.WaveView
        android:id="@+id/waveView"
        android:layout_width="match_parent"
        android:layout_height="40px"
        android:layout_alignParentBottom="true" />

    <ImageView
        android:id="@+id/image1"
        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 Paint mpaint1;
private Paint mpaint2;
private Path path1;
private Path path2;
private DrawFilter drawFilter;
private float fai = 0;

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 onChanged(float y);
}

private OnWaveChangeListener listener;

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

private void init() {
    //自定义画笔
    mpaint1 = new Paint();
    //设置颜色
    mpaint1.setColor(Color.WHITE);
    //设置抗锯齿
    mpaint1.setAntiAlias(true);
    //设置样式

// 画笔样式分三种：
// 1.Paint.Style.STROKE：描边
// 2.Paint.Style.FILL_AND_STROKE：描边并填充
// 3.Paint.Style.FILL：填充
mpaint1.setStyle(Paint.Style.FILL);
//设置笔刷的粗细度
mpaint1.setStrokeWidth(5f);

    //在写一个画笔
    mpaint2 = new Paint();
    mpaint2.setColor(Color.WHITE);
    mpaint2.setAntiAlias(true);
    mpaint2.setStyle(Paint.Style.FILL);
    mpaint2.setStrokeWidth(5);
    mpaint2.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 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);
        }

        path1.lineTo(x, y1);
        path2.lineTo(x, y2);

    }

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


    canvas.drawPath(path1, mpaint1);
    canvas.drawPath(path2, mpaint2);


    postInvalidateDelayed(50);
  }
}

三.在Mainactivity中
public class MainActivity extends AppCompatActivity {

private WaveView waveView;
private ImageView imageView;

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

    waveView = (WaveView) findViewById(R.id.waveView);
    imageView = (ImageView) findViewById(R.id.image1);

    WaveView.OnWaveChangeListener listener=new WaveView.OnWaveChangeListener() {
        @Override
        public void onChanged(float y) {
            RelativeLayout.LayoutParams layoutParams= (RelativeLayout.LayoutParams) imageView.getLayoutParams();
            layoutParams.setMargins(0,0,0,(int )y);
            imageView.setLayoutParams(layoutParams);
        }
    };

    waveView.setOnWaveChangeListener(listener);
 }
}