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

前言

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

需求

实现一个类似于波浪效果的自定义view&＃xff0c;并且可以提供一个波浪起伏变化距离的接口。

直接上效果图&＃xff1a;

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"500dp"

android:layout_alignParentBottom&＃61;"true"

app:peakHeight&＃61;"5dp"

app:waveColor&＃61;"#ffffff" />

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

constructor(context: Context, attr: AttributeSet) : super(context, attr) {

val ta &＃61; context.obtainStyledAttributes(attr, R.styleable.SugarWaveView)

waveColor &＃61; ta.getColor(R.styleable.SugarWaveView_waveColor, ContextCompat.getColor(context, R.color.colorPrimaryDark))

waveAlpha &＃61; ta.getInt(R.styleable.SugarWaveView_backWaveAlpha, 80)

cycle &＃61; ta.getInt(R.styleable.SugarWaveView_cycle, 2)

peakHeight &＃61; ta.getDimension(R.styleable.SugarWaveView_peakHeight, 8.0f)

ta.recycle()

}

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

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec)

range &＃61; cycle * Math.PI / width // range:周期&＃xff0c;决定屏幕内波浪的数量&＃xff0c;cycle&＃xff1a;常数&＃xff0c;通过改变它来改成range&＃xff0c;width在java中为getWidth()

}

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

override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {

super.onLayout(changed, left, top, right, bottom)

mAbovePaint.isAntiAlias &＃61; true

mAbovePaint.style &＃61; Paint.Style.FILL

mAbovePaint.color &＃61; waveColor

mBelowPaint.isAntiAlias &＃61; true

mBelowPaint.style &＃61; Paint.Style.FILL

mBelowPaint.color &＃61; waveColor

mBelowPaint.alpha &＃61; waveAlpha

}

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

override fun onDraw(canvas: Canvas?) {

super.onDraw(canvas)

canvas!!.drawFilter &＃61; drawFilter

mAbovePath.reset()//每次onDraw前初始化path&＃xff0c;above为不透明波浪&＃xff0c;below为透明的波浪

mBelowPath.reset()

start -&＃61; 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&＃61;0;i<&＃61;getWidth();i&＃43;&＃61;20)

/**

* 此处根据X不断变化&＃xff0c;算出Y的值&＃xff0c;得到正弦、余弦曲线的坐标点&＃xff0c;最后一个个连接起来

*/

y1 &＃61; (peakHeight * Math.cos(range * x &＃43; start) &＃43; peakHeight &＃43; 10).toFloat()

y2 &＃61; (peakHeight * Math.sin(range * x &＃43; start) &＃43; peakHeight).toFloat()

mAbovePath.lineTo(x.toFloat(), y1)

mBelowPath.lineTo(x.toFloat(), y2)

}

val middleY &＃61; (peakHeight * Math.cos(range * width/2 &＃43; start) &＃43; 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重新绘制

}

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

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

interface OnWaveChangeListener{

fun onWaveHeightChange(y:Float)

}

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

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