[customview] glide+bitmaptransformation picture upper and lower border wave processing (wavetransformation)

### be used Glide To show pictures , You will need to add Transformation To handle the circle of the picture 、 Round corners And other styles ,Transformation There are all kinds of styles , Here we need to achieve the following effect ：

* This article encapsulates Transformation Inherited from BitmapTransformation To support Glide.

How to achieve ：
 

/**
 *  Make the top and bottom borders of the picture wavy 
 *
 * @property waveCorners  Wave diameter 
 */
class WaveTransformation(private val waveCorners: Int) : BitmapTransformation() {

    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
        messageDigest.update(ID_BYTES)
    }

    override fun transform(
        pool: BitmapPool,
        toTransform: Bitmap,
        outWidth: Int,
        outHeight: Int
    ): Bitmap {
        val canvasBitmap = Bitmap.createBitmap(
            toTransform.width,
            toTransform.height,
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(canvasBitmap)  //  Create a palette 
        val paint = Paint().apply {
            isAntiAlias = true
            shader = BitmapShader(toTransform, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        } //  Create a brush , Brush content is this  Bitmap
        
        //  Calculate how many small waves can be divided into 
        val index = canvas.width / waveCorners
        var rectLeft = 0f
        try {
            TransformationUtils.getBitmapDrawableLock().lock()
            //  Cycle drawing 
            for (i in 0 .. index) {
                val rect = RectF(
                    rectLeft,
                    0f,
                    (rectLeft + waveCorners).toInt().toFloat(),
                    canvas.height.toFloat()
                )
                canvas.drawRoundRect(rect, waveCorners / 2f, waveCorners / 2f, paint)
                rectLeft = (rectLeft + waveCorners).toInt().toFloat()
            }
            //  Determine whether the last drawing needs to be performed 
            if (rectLeft < canvas.width.toFloat()){
                val rect = RectF(
                    rectLeft,
                    0f,
                    canvas.width.toFloat(),
                    canvas.height.toFloat()
                )
                canvas.drawRoundRect(rect, waveCorners / 2f, waveCorners / 2f, paint)
            }
            canvas.setBitmap(null)
        } finally {
            TransformationUtils.getBitmapDrawableLock().unlock()
        }
        return canvasBitmap
    }

    companion object {
        private const val ID = "WaveTransformation"
        private val ID_BYTES = ID.toByteArray(CHARSET)
    }
}

stay Glide Use in ：

val requestOptions =
    RequestOptions().transform(CenterCrop(), WaveTransformation(25))
Glide.with(context)
.load(url)
.thumbnail(0.2f)
.apply(requestOptions)
.into(view)

Continue packaging ：

fun <T>ImageView.loadWaveCorner(url: T, waveCorners: Int) {
    if (context != null) {
        val requestOptions =
            RequestOptions().transform(CenterCrop(), WaveTransformation(waveCorners))
        loadImage(context, this, url, requestOptions)
    }
}

private fun <T> loadImage(
    context: Context,
    view: ImageView,
    url: T,
    requestOptions: RequestOptions,
) {
    Glide.with(context)
        .load(url)
        .thumbnail(0.2f)
        .apply(requestOptions)
        .into(view)
}

One line of code calls ： 

iv.loadWaveCorner(url, 25)

Reference resources ：

Glide： https://github.com/bumptech/glide

Transformations：https://github.com/wasabeef/glide-transformations

 

Last , Welcome to discuss .