Android水波纹效果

在这里插入图片描述
布局按钮


    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="水波纹View"
        />

选择跳转MainActivity

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.btn1).setOnClickListener(this);
    }
    @Override
    public void onClick(View view) {
        switch (view.getId()){
             case R.id.btn1:
                 Intent intent = new Intent(MainActivity.this,WatorActivity.class);
                 startActivity(intent);
                 break;
        }
    }

自定义一个View,实现继承方法onDraw进行绘制

package com.example.appview1.veiw;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
/*
  View
*自定义水波纹
* //1、moveTo
   //moveTo 不会进行绘制,只用于移动移动画笔。
    //2、lineTo
   //lineTo 用于进行直线绘制。
* */
public class WatorView extends View {
    private   Callback callback;
    private Paint mpaint;
    private Path path;
    private float mx;

    public WatorView(Context context) {
        super(context);
        //初始化
        init(context);
     }
     public WatorView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
      //初始换画笔,路径
    private void init(Context context) {
        //创建一个画笔
        mpaint = new Paint();
        //设置颜色为红色
        mpaint.setColor(Color.RED);
        //设置画笔的粗细
        mpaint.setStrokeWidth(5);
        //设置抗锯齿
        mpaint.setAntiAlias(true);
        //接下来初始化路径
        path = new Path();
        //接下来进行绘制
     }

     //绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //让路径重置
         path.reset();
         //记录起始位置,从左向右在从底部向上来进行波动
         path.moveTo(getLeft(),getBottom());
         //记录波动的位置Math函数*Pl是180度在诚意2为360度再除以getRight等于每一个宽度值所在的位置
         float mpi= (float) (Math.PI*3/getRight());//每一个宽度值所站的度数

        //定义一个值每次都减一个值
         mx -=0.1f;
        //如果要实现波动那么一定要便利以下宽度然后一点一点进行波动
         for(int x=0;x<=getRight();x+=20){
             //得到从左向右波动x的坐标获取xy/运用函数进行波动再通过每个宽度值所站的度数乘以加上的波动
            //path.lineTo(x, (float) (10*Math.sin(mpi*x-mx)+10));
             float y=(float) (10*Math.sin(mpi*x+mx)+10);
             path.lineTo(x,y);
             if (callback!=null){
                 callback.Callback(y);
             }

        }


          //记录结束位置
        path.lineTo(getRight(),getBottom());
        //接下来通过canvas进行绘制路径path,绘制的颜色与粗细mpaint
        canvas.drawPath(path,mpaint);
        //定时刷新
        postInvalidateDelayed(20);

    }

    public void setCallback(Callback callback){
        this.callback=callback;
    }

    //利用接口回调将水波纹上下波动的度数回传给acyivity
   public interface Callback{
         void Callback( float y);
    }
}

布局实现自定义view

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        >
        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher_round"
            />

    </RelativeLayout>
    <com.example.appview1.veiw.WatorView
        android:id="@+id/WatorView1"
        android:layout_width="wrap_content"
        android:layout_height="20dp">

    </com.example.appview1.veiw.WatorView>

水波纹对应的Activity接口回调设置图片波动

package com.example.appview1.activiy;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.example.appview1.R;
import com.example.appview1.veiw.WatorView;

public class WatorActivity extends AppCompatActivity {

    private ImageView image;
    private WatorView mWatorView1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wator);
        image = findViewById(R.id.image);

        mWatorView1 = findViewById(R.id.WatorView1);


        mWatorView1.setCallback(new WatorView.Callback() {
            @Override
            public void Callback(float y) {
                RelativeLayout.LayoutParams params= (RelativeLayout.LayoutParams) image.getLayoutParams();
                params.setMargins(0,(int)y,0,0);
                image.setLayoutParams(params);

            }
        });

    }
}

猜你喜欢

转载自blog.csdn.net/qq_42609613/article/details/88710888