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:roundapp: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探索:处理图片圆角、亮度、饱和度、图片重叠等

相关推荐
CYRUS_STUDIO8 小时前
深入 Android syscall 实现:内联汇编系统调用 + NDK 汇编构建
android·操作系统·汇编语言
死也不注释9 小时前
【第一章编辑器开发基础第一节绘制编辑器元素_6滑动条控件(6/7)】
android·编辑器
程序员JerrySUN10 小时前
Linux 文件系统实现层详解:原理、结构与驱动衔接
android·linux·运维·数据库·redis·嵌入式硬件
2501_9160137411 小时前
iOS 加固工具使用经验与 App 安全交付流程的实战分享
android·ios·小程序·https·uni-app·iphone·webview
南棱笑笑生11 小时前
20250715给荣品RD-RK3588开发板刷Android14时打开USB鼠标
android·计算机外设
hy.z_77713 小时前
【数据结构】反射、枚举 和 lambda表达式
android·java·数据结构
幻雨様13 小时前
UE5多人MOBA+GAS 20、添加眩晕
android·ue5
没有了遇见14 小时前
开源库 XPopup 资源 ID 异常修复:从发现 BUG 到本地 AAR 部署全流程
android
雮尘14 小时前
一文读懂 Android 屏幕适配:从基础到实践
android·前端
用户20187928316714 小时前
浅谈焦点冲突导致异常背景色的机制
android