Android波浪效果自定义View实现

2018-02-13 本文已影响0人 Coder_吴磊

个人原创文章，请尊重原创，转载请注明出处：吴磊的简书:http://www.jianshu.com/p/a4c29ec5712f

前言

最近在Github上看到@1139618418 大神写了一个波浪效果的View，发现效果非常酷炫，但是代码上有很大的优化空间，就照着思路自己撸了一个。留着以后备用。

需求

实现一个类似于波浪效果的自定义view，并且可以提供一个波浪起伏变化距离的接口。
直接上效果图：

20180213_021953_20180213092027.gif

实现

波浪效果的实现思路就是初中时候学的三角函数，以下来自百度百科：
正弦曲线可表示为y=Asin(ωx+φ)+k，定义为函数y=Asin(ωx+φ)+k在直角坐标系上的图象，其中sin为正弦符号，x是直角坐标系x轴上的数值，y是在同一直角坐标系上函数对应的y值，k、ω和φ是常数（k、ω、φ∈R且ω≠0）
A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
(ωx+φ)——相位，反映变量y所处的状态。
φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
k——偏距，反映在坐标系上则为图像的上移或下移。
ω——角速度，控制正弦周期(单位弧度内震动的次数)。
所以这里我们控制φ变化来实现图像左右移动的效果。
代码实现的方式：
代码较少，此处全部贴出：

class SugarWaveView : View {

    private val mAbovePath = Path()
    private val mBelowPath = Path()
    private val mAbovePaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val mBelowPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val drawFilter = PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG)
    private var start = 0.0f //初相  正弦函数：y=Asin(ωx+φ)+k
    private var range = 0.0  //周期，决定屏幕范围内波浪的数量
    var cycle = 2    //周期乘数，自定义
    var peakHeight = 8.0f //波浪高度，dp
    var waveColor: Int = Color.WHITE
    var waveAlpha = 80
    var listenr:OnWaveChangeListener?=null


    constructor(context: Context) : super(context)

    constructor(context: Context, attr: AttributeSet) : super(context, attr) {
        val ta = context.obtainStyledAttributes(attr, R.styleable.SugarWaveView)
        waveColor = ta.getColor(R.styleable.SugarWaveView_waveColor, ContextCompat.getColor(context, R.color.colorPrimaryDark))
        waveAlpha = ta.getInt(R.styleable.SugarWaveView_backWaveAlpha, 80)
        cycle = ta.getInt(R.styleable.SugarWaveView_cycle, 2)
        peakHeight = ta.getDimension(R.styleable.SugarWaveView_peakHeight, 8.0f)
        ta.recycle()
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        range = cycle * Math.PI / width
    }

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        mAbovePaint.isAntiAlias = true
        mAbovePaint.style = Paint.Style.FILL
        mAbovePaint.color = waveColor
        mBelowPaint.isAntiAlias = true
        mBelowPaint.style = Paint.Style.FILL
        mBelowPaint.color = waveColor
        mBelowPaint.alpha = waveAlpha

    }


    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas!!.drawFilter = drawFilter
        mAbovePath.reset()//每次onDraw前初始化path，above为不透明波浪，below为透明的波浪
        mBelowPath.reset()
        start -= 0.1f//初相
        var y1: Float
        var y2: Float
        mAbovePath.moveTo(left.toFloat(), bottom.toFloat())
        mBelowPath.moveTo(left.toFloat(), bottom.toFloat())
        for (x in 0..width step 20) {//kotlin写法  java为for(int i=0;i<=getWidth();i+=20)
            /**
             * 此处根据X不断变化，算出Y的值，得到正弦、余弦曲线的坐标点，最后一个个连接起来
             */
            y1 = (peakHeight * Math.cos(range * x + start) + peakHeight + 10).toFloat()
            y2 = (peakHeight * Math.sin(range * x + start) + peakHeight).toFloat()
            mAbovePath.lineTo(x.toFloat(), y1)
            mBelowPath.lineTo(x.toFloat(), y2)
        }
        val middleY = (peakHeight * Math.cos(range * width/2 + start) + peakHeight).toFloat()
        listenr?.onWaveHeightChange(middleY)
        mAbovePath.lineTo(right.toFloat(), bottom.toFloat())
        mBelowPath.lineTo(right.toFloat(), bottom.toFloat())
        canvas.drawPath(mAbovePath, mAbovePaint)
        canvas.drawPath(mBelowPath, mBelowPaint)
        postInvalidateDelayed(10)//延迟10ms重新绘制
    }

    interface OnWaveChangeListener{
        fun onWaveHeightChange(y:Float)
    }

代码分析：

需要2个构造函数。第一个为只有上下文的构造，用在代码中动态添加。第二个用于在xml布局中设置属性的构造。
那么怎么获取xml布局中的属性呢，其实很简单，首先在value/attrs.xml中添加各属性名称，无此文件新建即可，然后直接在xml中使用即可：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SugarWaveView">
        <attr name="waveColor" format="color"/>
        <attr name="backWaveAlpha" format="integer"/>
        <attr name="cycle" format="integer"/>
        <attr name="peakHeight" format="dimension"/>
    </declare-styleable>
</resources>

<com.wulei.uikit.SugarWaveView
    android:id="@+id/waveview"
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:layout_alignParentBottom="true"
    app:peakHeight="5dp"
    app:waveColor="#ffffff" />

在构造函数中获取xml设置的自定义属性，首先拿到typedArray对象 val ta = context.obtainStyledAttributes(attr, R.styleable.SugarWaveView) ，然后通过在attrs定义好的名称，一个个获取，敲黑板：获取完记得recycle()：

    constructor(context: Context, attr: AttributeSet) : super(context, attr) {
        val ta = context.obtainStyledAttributes(attr, R.styleable.SugarWaveView)
        waveColor = ta.getColor(R.styleable.SugarWaveView_waveColor, ContextCompat.getColor(context, R.color.colorPrimaryDark))
        waveAlpha = ta.getInt(R.styleable.SugarWaveView_backWaveAlpha, 80)
        cycle = ta.getInt(R.styleable.SugarWaveView_cycle, 2)
        peakHeight = ta.getDimension(R.styleable.SugarWaveView_peakHeight, 8.0f)
        ta.recycle()
    }

拿到屏幕的宽度，只有拿到宽度后才知道曲线需要画多长，拿宽度比较合适的时机是在onMeasure之后，在这之前，是拿不到的。

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        range = cycle * Math.PI / width // range:周期，决定屏幕内波浪的数量，cycle：常数，通过改变它来改成range，width在java中为getWidth()
    }

根据构造函数中拿到的自定义属性，来初始化画笔，mBelowPaint用于画出一个半透明的波浪，看起来有交错感，此处参照了原作者的思路：

    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
        super.onLayout(changed, left, top, right, bottom)
        mAbovePaint.isAntiAlias = true
        mAbovePaint.style = Paint.Style.FILL
        mAbovePaint.color = waveColor
        mBelowPaint.isAntiAlias = true
        mBelowPaint.style = Paint.Style.FILL
        mBelowPaint.color = waveColor
        mBelowPaint.alpha = waveAlpha
    }

OK，下面是最重要的画曲线部分。首先，给定一个初始的初相，画出正弦曲线，正弦曲线的画法为：通过改变x轴的坐标，不断通过y=Asin(ωx+φ)+k来算出y轴坐标。每N个像素算出一个点，将这些点连接起来，此处需要使用到path，然后不断的lineTo(x,y)，当点足够密集的时候，看起来就是曲线了。代码如下：

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas!!.drawFilter = drawFilter
        mAbovePath.reset()//每次onDraw前初始化path，above为不透明波浪，below为透明的波浪
        mBelowPath.reset()
        start -= 0.1f//初相
        var y1: Float
        var y2: Float
        mAbovePath.moveTo(left.toFloat(), bottom.toFloat())
        mBelowPath.moveTo(left.toFloat(), bottom.toFloat())
        for (x in 0..width step 20) {//kotlin写法  java为for(int i=0;i<=getWidth();i+=20)
            /**
             * 此处根据X不断变化，算出Y的值，得到正弦、余弦曲线的坐标点，最后一个个连接起来
             */
            y1 = (peakHeight * Math.cos(range * x + start) + peakHeight + 10).toFloat()
            y2 = (peakHeight * Math.sin(range * x + start) + peakHeight).toFloat()
            mAbovePath.lineTo(x.toFloat(), y1)
            mBelowPath.lineTo(x.toFloat(), y2)
        }
        val middleY = (peakHeight * Math.cos(range * width/2 + start) + peakHeight).toFloat()
        listenr?.onWaveHeightChange(middleY)
        mAbovePath.lineTo(right.toFloat(), bottom.toFloat())
        mBelowPath.lineTo(right.toFloat(), bottom.toFloat())
        canvas.drawPath(mAbovePath, mAbovePaint)
        canvas.drawPath(mBelowPath, mBelowPaint)
        postInvalidateDelayed(10)//延迟10ms重新绘制
    }

然后，通过postInvalidateDelayed来延迟一段时间重新绘制，此时只需改变初相，图像就会得到移动的效果。

最后，定义一个返回中心位置波浪Y轴变化的接口，用于实现其他控件的联动：

    interface OnWaveChangeListener{
        fun onWaveHeightChange(y:Float)
    }

如果使用java实现此自定义view的话，还需要写set各种参数的public 方法，以及setOnWaveChangeListener方法。

到这里就完成了整个自定义View的编写、使用。完整代码及Demo可以在我的Github中查看。如发现有改进之处，望指正，万分感谢！

个人原创文章，请尊重原创，转载请注明出处：吴磊的简书:http://www.jianshu.com/p/a4c29ec5712f

欢迎联系我：
Github:https://github.com/MondeoWu/
E-mail:331948214@qq.com
QQ:331948214

Android波浪效果自定义View实现

前言

需求

实现

猜你喜欢

热点阅读