android幻灯片效果自定义,Android波浪效果自定义View实现

前言

最近在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中使用即可：

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中查看。如发现有改进之处，望指正，万分感谢！