自定义布局。水波纹

首先第一步。我们要创建自定义一个类

package com.example.lianxi1;

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

public class Myview extends View {

    private Paint mPaintTop;
    private Paint mPaintBottom;
    private Path mPathTop;
    private Path mPathBottom;
    private float φ;
    public Myview(Context context) {
        super(context);
        init(context);
    }
    public Myview(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }
    public Myview(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }
    private void init(Context context) {
        mPaintTop = new Paint();
        mPaintTop.setColor(Color.WHITE);
        mPaintTop.setAntiAlias(true);
        mPaintBottom = new Paint();
        mPaintBottom.setColor(Color.BLUE);
        mPaintBottom.setAntiAlias(true);
        mPaintBottom.setAlpha(60);

        mPathTop = new Path();
        mPathBottom = new Path();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPathTop.reset();
        mPathBottom.reset();
        //路径开始位置
        mPathTop.moveTo(getLeft(),getBottom());
        mPathBottom.moveTo(getLeft(),getBottom());
        //获取每个宽度值所占的度数
        double mY= Math.PI*2/getWidth();
        φ-=0.1f;
        for (float x=0;x<=getWidth();x+=20){
            float y = (float) (10*Math.cos(mY*x+φ)+10);
            mPathTop.lineTo(x, y);
            mPathBottom.lineTo(x, (float) (10*Math.sin(mY*x+φ)));
            listener.animation(y);
        }
        //路径结束位置
        mPathTop.lineTo(getWidth(),getBottom());
        mPathBottom.lineTo(getWidth(),getBottom());
        canvas.drawPath(mPathTop,mPaintTop);
        canvas.drawPath(mPathBottom,mPaintBottom);
        postInvalidateDelayed(20);
    }
    private AnimationListener listener;
    public void animation(AnimationListener listener){
        this.listener=listener;
    }
    public interface AnimationListener{
        void animation(float y);
    }

}

然后第二部写布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#d43c3c"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"
            android:layout_above="@+id/wave_view"
            android:layout_centerHorizontal="true"
            android:id="@+id/logo"
            />
        <com.example.lianxi1.Myview
            android:id="@+id/wave_view"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="20dp" />
    </RelativeLayout>

</RelativeLayout>

3.然后主界面

package com.example.lianxi1;

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

public class MainActivity extends AppCompatActivity {

    private ImageView logo;
    private Myview wave_view;

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

        final RelativeLayout.LayoutParams params= (RelativeLayout.LayoutParams) logo.getLayoutParams();

        wave_view.animation(new Myview.AnimationListener() {
            @Override
            public void animation(float y) {
                params.setMargins(0,0,0,(int)y);
                logo.setLayoutParams(params);
            }
        });


    }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值