Android | 多种方式实现图片圆角矩形和圆形效果(续)

接上一篇，Android | 多种方式实现图片圆角矩形和圆形效果，除了上一篇中的方式，还可以通过下面的几种方式来实现对应效果。

方式七：ShapeableImageView

ShapeableImageView 是 Android Material Components 库中的一个控件，用于轻松实现自定义形状的 ImageView。通过 ShapeableImageView，开发者可以轻松地实现圆形、圆角矩形、不同角的圆角以及其他复杂形状，而无需依赖 XML 的 shape 文件或者第三方库。

为什么使用 ShapeableImageView？

复制代码

•	强大且灵活：支持圆角矩形、椭圆、三角形、多边形等形状。
•	更简单的代码：不需要再定义复杂的 shape 文件。
•	实时修改形状：可以动态改变形状和边框。
•	依赖官方库：无需引入第三方库，减少冗余。

ShapeableImageView 是 Material Components 的一部分，因此需要在 build.gradle 中添加 Material 库依赖：

kotlin 复制代码

implementation "com.google.android.material:material:1.9.0"

ShapeableImageView 的常见功能和属性

markdown 复制代码

1.	自定义形状：
•	设置为圆形、矩形、圆角矩形、其他复杂形状等。
•	通过 app:shapeAppearance 或代码设置形状。
2.	边框：
•	可以设置边框宽度和颜色。
•	支持自定义边框。
3.	动态改变形状：
•	在运行时通过 setShapeAppearanceModel() 改变形状。

以下是 ShapeableImageView 支持的主要 XML 属性：

kotlin 复制代码

app:strokeWidth	边框宽度
app:strokeColor	边框颜色
app:shapeAppearance	设置形状（使用 MaterialShape 属性）
app:shapeAppearanceOverlay	形状覆盖（便于定制不同的形状）

使用示例：

kotlin 复制代码

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/iv_shapeAble_view1"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:scaleType="centerCrop"
    android:src="@drawable/icon_cat_w"
    app:shapeAppearance="@style/roundedCornerStyle" />

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/iv_shapeAble_view2"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:layout_marginStart="10dp"
    android:scaleType="centerCrop"
    android:src="@drawable/icon_cat_w"
    app:shapeAppearance="@style/circleCornerStyle" />

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/iv_shapeAble_view3"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:layout_marginStart="10dp"
    android:padding="2dp"
    android:scaleType="centerCrop"
    android:src="@drawable/icon_cat_w"
    app:shapeAppearance="@style/roundedCornerStyle"
    app:strokeColor="@color/red"
    app:strokeWidth="4dp" />

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/iv_shapeAble_view4"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="center"
    android:layout_marginStart="10dp"
    android:padding="2dp"
    android:scaleType="centerCrop"
    android:src="@drawable/icon_cat_w"
    app:shapeAppearance="@style/circleCornerStyle"
    app:strokeColor="@color/red"
    app:strokeWidth="4dp" />

对应的style文件：

kotlin 复制代码

<style name="roundedCornerStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">10dp</item>
</style>

<style name="circleCornerStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

实现效果：

除了在XML中设置，还可以通过代码设置上述效果：

kotlin 复制代码

private val mIvShapeAble5: ShapeableImageView by id(R.id.iv_shapeAble_view5)
private val mIvShapeAble6: ShapeableImageView by id(R.id.iv_shapeAble_view6)
private val mIvShapeAble7: ShapeableImageView by id(R.id.iv_shapeAble_view7)
private val mIvShapeAble8: ShapeableImageView by id(R.id.iv_shapeAble_view8)

// 代码设置圆角 圆角矩形等效果
val shapeAppearanceModel5 = ShapeAppearanceModel.builder()
    .setAllCorners(RoundedCornerTreatment())
    .setAllCornerSizes(20f)
    .build()
mIvShapeAble5.shapeAppearanceModel = shapeAppearanceModel5

val shapeAppearanceModel6 = ShapeAppearanceModel.builder()
    .setAllCorners(RoundedCornerTreatment())
    .setAllCornerSizes(RelativeCornerSize(0.5f))
    .build()
mIvShapeAble6.shapeAppearanceModel = shapeAppearanceModel6

val shapeAppearanceModel7 = ShapeAppearanceModel.builder()
    .setAllCorners(RoundedCornerTreatment())
    .setAllCornerSizes(20f)
    .build()
mIvShapeAble7.run {
    shapeAppearanceModel = shapeAppearanceModel7
    strokeWidth = 4.dp2px().toFloat()
    strokeColor = ColorStateList.valueOf(Color.RED)
    setPadding(2.dp2px(), 2.dp2px(), 2.dp2px(), 2.dp2px())
}

val shapeAppearanceModel8 = ShapeAppearanceModel.builder()
    .setAllCorners(RoundedCornerTreatment())
    .setAllCornerSizes(RelativeCornerSize(0.5f))
    .build()
mIvShapeAble8.run {
    shapeAppearanceModel = shapeAppearanceModel8
    strokeWidth = 4.dp2px().toFloat()
    strokeColor = ColorStateList.valueOf(Color.RED)
    setPadding(2.dp2px(), 2.dp2px(), 2.dp2px(), 2.dp2px())
}

实现效果与上面截图一致，不再贴了，关于 ShapeableImageView 详细的使用参见：玩转ShapeableImageView：实现灵活的自定义形状与边框效果

方式八：ImageFilterView

ImageFilterView 是 Android 提供的一个特殊的 ImageView，它继承自 ImageView 并扩展了其功能。ImageFilterView 的主要特点是能够对图片进行一些简单的图像处理效果。ImageFilterView 是 ConstraintLayout 的一部分（需要依赖 androidx.constraintlayout.widget.ConstraintLayout），可以简化图片处理功能，而无需使用复杂的图像处理库。确保在 build.gradle 中引入 ConstraintLayout 的依赖（版本 2.0.0 或以上）：

kotlin 复制代码

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

在使用 ImageFilterView 时，可以通过 app:round 或 app:roundPercent 来设置图片的圆角或圆形效果。

app:round: 设置具体的圆角半径。
app:roundPercent: 设置圆角百分比（范围是 0.0 到 1.0），可以实现圆形图片。

当然也可以通过对应的代码来实现，下面介绍下通过代码动态实现，XML文件如下：

kotlin 复制代码

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:id="@+id/iv_filter_view1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:scaleType="centerCrop" />

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:id="@+id/iv_filter_view2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:layout_marginStart="20dp"
    android:scaleType="centerCrop" />

代码中设置：

kotlin 复制代码

private val mIvFilterView1: ImageFilterView by id(R.id.iv_filter_view1)
private val mIvFilterView2: ImageFilterView by id(R.id.iv_filter_view2)

val bitmap5 = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
val bitmap6 = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
mIvFilterView1.run {
    round = 10.dp2px().toFloat()
    setImageBitmap(bitmap5)
}

mIvFilterView2.run {
    roundPercent = 1f
    setImageBitmap(bitmap6)
}

实现效果：关于ImageFilterView 的详细使用参见： ConstraintLayout 中的ImageFilterView探索：处理图片圆角、亮度、饱和度、图片重叠等