【项目轮子】Android波浪背景效果
![](https://imgs.sunofbeaches.com/group1/M00/00/27/rBsADV8fCVWAD6Q1AAALDTAEzR0088.png)
Android
自定义View
轮子
前言:
前几个月完成了自己第一个稍微完整的App,后来由于web期末大作业和实训,一直没来得及总结一下自己使用一些轮子的体验和踩坑记录,这些感觉还是有必要记录一下,下次用的时候,就不用再踩这些坑了嘛。那下面开始介绍轮子:
具体内容:
一、效果图
一个自带波浪背景的布局
二、源码和解析:
- 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();
}
}