前言：
前几个月完成了自己第一个稍微完整的App，后来由于web期末大作业和实训，一直没来得及总结一下自己使用一些轮子的体验和踩坑记录，这些感觉还是有必要记录一下，下次用的时候，就不用再踩这些坑了嘛。那下面开始介绍轮子：
内容概述：
一、效果图
二、源码和解析
三、总结
四、使用
五、源码
具体内容：
一、效果图
一个自带波浪背景的布局
波浪背景效果.gif
二、源码和解析：
- Paint对象:在初始化View时，对Paint对象的属性进行初始化，设置抗锯齿、颜色等
// 初始绘制波纹的画笔
mWavePaint = new Paint();
// 去除画笔锯齿
mWavePaint.setAntiAlias(true);
// 设置风格为实线
mWavePaint.setStyle(Paint.Style.FILL);
// 设置画笔颜色
mWavePaint.setColor(getResources().getColor(R.color.colorPrimaryDark,null));
- PaintFlagsDrawFilter对象：对PaintFlagsDrawFilter对象初始化，等到
draw方式调用时对Canvas对象进行抗锯齿处理
mDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
// 从canvas层面去除绘制时锯齿
canvas.setDrawFilter(mDrawFilter);
- 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);
}
- 波浪的本质：仔细观察波浪，其实就是两条正弦曲线在横向上不停的移动，她们每次移动的偏移量（
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();
}
}
