电商_自定义水波纹

布局

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

    <com.example.myapplication.view.WaterView
        android:id="@+id/waterview"
        android:layout_width="match_parent"
        android:layout_height="20dp" />

</LinearLayout>

Activity

package com.example.myapplication.activity;

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

import com.example.myapplication.R;
import com.example.myapplication.view.WaterView;


//自定义水波纹
public class WaterActivity extends AppCompatActivity {

    private ImageView mImage;
    private WaterView mWaterView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_water);
        mImage = findViewById(R.id.iamge);

        mWaterView = findViewById(R.id.waterview);

        //让头像随着水波纹上下移动
        mWaterView.setAnimatorListener(new WaterView.AnimatorListener() {
            @Override
            public void Animator(float y) {
                RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mImage.getLayoutParams();
                params.setMargins(0, (int) y, 0, 0);
                mImage.setLayoutParams(params);
            }
        });
    }
}

自定义View

package com.example.myapplication.view;

import android.animation.Animator;
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;


public class WaterView extends View {
    private Paint mPaint;
    private Path mPath;
    private float mX;
    private AnimatorListener mAnimatorListener;

    public WaterView(Context context) {
        super(context);
        init(context);
    }

    public WaterView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    //初始化画笔，路径
    private void init(Context context) {
        mPath = new Path();

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(5);
        mPaint.setAntiAlias(true);
    }

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

        mPath.reset();//路径重置

        //记录起始位置
        mPath.moveTo(getLeft(), getBottom());

        //记录波动位置
        float mPi= (float) (Math.PI*2/getRight());//获取每一个宽度所占的度数

        mX-=0.1f;
        for (int x=0;x<=getRight();x+=20){
            //mPath.lineTo(x, (float) (10*Math.cos(mPi*x+mX)+10));
            float y=(float) (10*Math.sin(mPi*x+mX)+10);
            mPath.lineTo(x, y);
            if(mAnimatorListener!=null){
                mAnimatorListener.Animator(y);
            }
        }

        //记录下结束位置
        mPath.lineTo(getRight(), getBottom());

        canvas.drawPath(mPath, mPaint);

        postInvalidateDelayed(20);//定时刷新


    }

    public void setAnimatorListener(AnimatorListener mAnimatorListener){
        this.mAnimatorListener=mAnimatorListener;
    }

    public interface AnimatorListener{
        void Animator(float y);
    }
}

效果图