【项目轮子】Android波浪背景效果

前言：

前几个月完成了自己第一个稍微完整的App，后来由于web期末大作业和实训，一直没来得及总结一下自己使用一些轮子的体验和踩坑记录，这些感觉还是有必要记录一下，下次用的时候，就不用再踩这些坑了嘛。那下面开始介绍轮子：

具体内容：

一、效果图

一个自带波浪背景的布局

二、源码和解析：

1. Paint对象:在初始化View时，对Paint对象的属性进行初始化，设置抗锯齿、颜色等

        // 初始绘制波纹的画笔
        mWavePaint = new Paint();
        // 去除画笔锯齿
        mWavePaint.setAntiAlias(true);
        // 设置风格为实线
        mWavePaint.setStyle(Paint.Style.FILL);
        // 设置画笔颜色
        mWavePaint.setColor(getResources().getColor(R.color.colorPrimaryDark,null));

1. PaintFlagsDrawFilter对象：对PaintFlagsDrawFilter对象初始化，等到draw方式调用时对Canvas对象进行抗锯齿处理

mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);


// 从canvas层面去除绘制时锯齿
canvas.setDrawFilter(mDrawFilter);

1. dispatchDraw方法 在绘图的三大流程中，在draw阶段时，会依次执行： 绘制该View的背景 --> 为显示渐变框做一些准备操作（setBounds()） --> 调用onDraw()方法绘制视图本身 --> 调用dispatchDraw ()方法绘制子视图。 而dispatchDraw就是用来绘制viewGroup中的子视图的，因为我们是要把波浪设置为背景，所以我们绘制波浪的时间应该放在绘制子View的前面，所以代码顺序为下面所示，super.dispatchDraw(canvas);为子View的绘制时机

@Override
protected void dispatchDraw(Canvas canvas) {
    initDrawBg(canvas);//放在super前是后景，相反是前景，前景会覆盖子布局
    super.dispatchDraw(canvas);
}

1. 波浪的本质：仔细观察波浪，其实就是两条正弦曲线在横向上不停的移动，她们每次移动的偏移量（mOffset1和mOffset2变量）不同，造成了两条曲线看似 不规则 运动，下面是曲线方程

// y = A * sin( wx + b) + h ; A： 浪高； w：周期；b：初相；  h: y轴的偏移位置
float endY = (float) (20 * Math.sin(2 * Math.PI / getWidth() * i + mOffset1) + 330);
//h:是y轴方向的偏移量
//startY: 0就是从最顶部开始
//画第一条波浪
canvas.drawLine(i, 0, i, endY, mWavePaint);

三、总结：

只要清楚了绘制view的大概流程，再结合绘制View的函数，基本就能完成这个波浪背景的实现

四、使用：

<BgRelativeLayout
	android:layout_width="match_parent"
	android:layout_height="250dp"
	android:background="#1878FF">

        <!--放子View-->

</BgRelativeLayout>

五、源码：

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PaintFlagsDrawFilter;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

import com.example.receiptsbooks.R;

public class BgRelativeLayout extends RelativeLayout {
    private PaintFlagsDrawFilter mDrawFilter;
    private Paint mWavePaint;
    //三角函数的初象
    private float mOffset1 = 0.0f;
    private float mOffset2 = 0.0f;
    private float mSpeed1 = 0.05f;
    private float mSpeed2 = 0.07f;

    public BgRelativeLayout(Context context) {
        this(context,null);
    }

    public BgRelativeLayout(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public BgRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    @SuppressLint("ResourceAsColor")
    private void initView() {
        // 初始绘制波纹的画笔
        mWavePaint = new Paint();
        // 去除画笔锯齿
        mWavePaint.setAntiAlias(true);
        // 设置风格为实线
        mWavePaint.setStyle(Paint.Style.FILL);
        // 设置画笔颜色
        mWavePaint.setColor(getResources().getColor(R.color.colorPrimaryDark,null));
        mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        initDrawBg(canvas);//放在super前是后景，相反是前景，前景会覆盖子布局
        super.dispatchDraw(canvas);
    }

    private void initDrawBg(Canvas canvas) {
        // 从canvas层面去除绘制时锯齿
        canvas.setDrawFilter(mDrawFilter);
        for (int i = 0; i < getWidth(); i++) {
            // y = A * sin( wx + b) + h ; A： 浪高； w：周期；b：初相；  h: y轴的偏移位置
            float endY = (float) (20 * Math.sin(2 * Math.PI / getWidth() * i + mOffset1) + 330);
            //h:是y轴方向的偏移量
            //startY: 0就是从最顶部开始
            //画第一条波浪
            canvas.drawLine(i, 0, i, endY, mWavePaint);
            //跟第一条线一样
            
            float endY2 = (float) (20 * Math.sin(2 * Math.PI / getWidth() * i + mOffset2) + 330);
            //画第二条波浪
            canvas.drawLine(i, 0, i, endY2, mWavePaint);
        }

        if (mOffset1 > Float.MAX_VALUE - 1) {//防止数值超过浮点型的最大值
            mOffset1 = 0;
        }
        mOffset1 += mSpeed1;

        if (mOffset2 > Float.MAX_VALUE - 1) {//防止数值超过浮点型的最大值
            mOffset2 = 0;
        }
        mOffset2 += mSpeed2;
        //刷新
        postInvalidate();
    }

}