一、简介

最近产品要实现一个UI类似于相册堆叠那种,一看就知道是相册,并且能够点进去检查图片,然后就用自定义View的方式实现了下,作用图如下:

Android自定义View-实现图片堆叠效果

二、原理

其实它的原理也很简单,对照着下图来看:

Android自定义View-实现图片堆叠效果

  1. 要实现堆叠的作用,我们需要先将View的宽高获取到,如图最外边的矩形
  2. 然后依据最外边的矩形去将Bitmap进行缩放
  3. 依据自己定义的偏移值,先画第三个图(红色),画到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)
            }
        }
    }
}

代码也很简单,这儿就不多说了,总体来说这个功能还是很好实现的

Android自定义View-实现图片堆叠效果