0
【项目轮子】Android波浪背景效果
感同身受 发表于 2020-07-28 01:03 143

前言:

前几个月完成了自己第一个稍微完整的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();
    }

}

评论
0/240
  • 断点-含光君
    很强
    2020-07-29 08:47  回复
    1139423796017500160
    • 拉大锯
      请问可以把你的文章转到公众号吗?
      2020-07-28 11:00  回复
      1153952789488054272
    文章目录