自定义水波纹布局

最新推荐文章于 2021-05-26 11:25:00 发布

原创最新推荐文章于 2021-05-26 11:25:00 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

博客内容提及布局，布局在信息技术领域如前端开发等方面有重要应用，可用于页面元素的排列与展示。

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

布局

Activity  布局
<?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=".MainActivity">

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

    <bw.com.ljm.shuibowengbuju.WaterView
        android:id="@+id/waterview"
        android:layout_width="match_parent"
        android:layout_height="20dp" />

</LinearLayout>

WaterView  类

package bw.com.ljm.shuibowengbuju;

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;

/**
 * author:AbnerMing
 * date:2019/3/20
 * 自定义水波纹
 */
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);
    }
}

Activity
package bw.com.ljm.shuibowengbuju;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import android.widget.ImageView;
import android.widget.RelativeLayout;



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

    private ImageView mImage;
    private WaterView mWaterView;

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

        mWaterView = (WaterView) 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);
            }
        });
    }
}