Android ShapeableImageView

Android ShapeableImageView

概述

ShapeableImageView是material控件之一，继承于ImageView，作用是为了让开发者更方便的ImageView进行变形处理。

依赖库

implementation 'com.google.android.material:material:1.4.0'

基本使用

样式：

• cornerFamily：圆角方式；rounded圆角处理，cut切角处理
• cornerSize：圆角尺寸
• strokeColor：边框颜色
• strokeWidth：边框宽度

不变形

圆角样式

圆形样式

添加边框

切角样式

菱形样式

叶子样式

半圆样式

层叠效果

ViewOutlineProvider

ShapeableImageView本质是通过ViewOutlineProvider实现剪裁的。ViewOutlineProvider的效率比传统的Xfermode进行剪裁的方式高很多。

实现圆角效果

//绘制圆角
imageView01.apply {
    outlineProvider = object : ViewOutlineProvider() {
        override fun getOutline(view: View, outline: Outline) {
            outline.setRoundRect(0, 0, view.width, view.height, dp2px(30F))
        }
    }
    clipToOutline = true
}

实现圆形效果

//绘制圆形
imageView02.apply {
    outlineProvider = object : ViewOutlineProvider() {
        override fun getOutline(view: View, outline: Outline) {
            outline.setOval(0, 0, view.width, view.height)
        }
    }
    clipToOutline = true
}

其他形状

imageView03.apply {
    outlineProvider = object : ViewOutlineProvider() {
        override fun getOutline(view: View, outline: Outline) {
            view.elevation = 10F
            val gap = 20F
            val path = Path()
            path.moveTo(-gap, -gap)
            path.lineTo(-gap, view.measuredHeight.toFloat() + gap) //左下点
            path.lineTo(
                (view.measuredWidth / 2).toFloat(),
                (view.measuredHeight + 50).toFloat()
            )
            path.lineTo(
                view.measuredWidth.toFloat() + gap,
                view.measuredHeight.toFloat() + gap
            )
            path.lineTo(view.measuredWidth.toFloat() + gap, -gap) //右上点
            path.close()
            outline.setConvexPath(path)
            view.scaleX = 0.5F
            view.scaleY = 0.5F
        }
    }
}