一、简介
最近产品要实现一个UI类似于相册堆叠那种,一看就知道是相册,并且能够点进去检查图片,然后就用自定义View的方式实现了下,作用图如下:
二、原理
其实它的原理也很简单,对照着下图来看:
- 要实现堆叠的作用,我们需要先将View的宽高获取到,如图最外边的矩形
- 然后依据最外边的矩形去将Bitmap进行缩放
- 依据自己定义的偏移值,先画第三个图(红色),画到View视图的右边,然后画中心,最后才画第一个Bitmap
三、代码
class StackingView @JvmOverloads constructor(
private val context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0
) :
View(context, attrs, defStyleAttr) {
private val bitmapList = mutableListOf<Bitmap>()
//距离巨细
private val padding = 120
init {
this.post {
val photo01 = BitmapFactory.decodeResource(context.resources, R.mipmap.photo_01)
val photo02 = BitmapFactory.decodeResource(context.resources, R.mipmap.photo_02)
val photo03 = BitmapFactory.decodeResource(context.resources, R.mipmap.photo_03)
//将Bitmap缩放统一巨细
val reSizeWidth = width-padding
val reSizeHeight = height-padding
val scale01 = photo01.scale(reSizeWidth, reSizeHeight, true)
val scale02 = photo02.scale(reSizeWidth, reSizeHeight, true)
val scale03 = photo03.scale(reSizeWidth, reSizeHeight, true)
bitmapList.add(scale01)
bitmapList.add(scale02)
bitmapList.add(scale03)
invalidate()
}
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
val offset = padding/2f
if (bitmapList.isNotEmpty()) {
//这儿倒序绘制
for (i in 2 downTo 0) {
canvas?.drawBitmap(bitmapList[i], offset*i, -offset*(i-2),null)
}
}
}
}
代码也很简单,这儿就不多说了,总体来说这个功能还是很好实现的