ImageView 圆角的秘密大公开！

2024-01-15 08:08:46

ImageView 圆角是一种常见的 UI 设计元素，它能为你的应用程序增添一丝精致感和现代感。但在 Android 中实现它可能有点棘手，尤其是当布局为 centerCrop 时。在这篇文章中，我们将深入探讨实现 ImageView 圆角的不同方法，并解决圆角在 centerCrop 布局中失效的问题。

方法 1：使用 Shape Drawable

使用 Shape Drawable 是实现 ImageView 圆角最简单的方法之一。通过创建一个 GradientDrawable 对象并设置其形状和圆角半径，可以创建自定义的形状。然后将此 Drawable 设置为 ImageView 的背景。

val shape = GradientDrawable()
shape.shape = GradientDrawable.OVAL
shape.cornerRadius = 20f
imageView.background = shape

方法 2：使用圆形 ImageView

Android 提供了一个专门用于显示圆形图片的 CircularImageView 类。CircularImageView 继承自 ImageView，并提供了一个简单的 API 来设置圆角半径。

<com.example.CircularImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/image"
    app:cornerRadius="20dp" />

方法 3：使用第三方库

还有一些第三方库可以帮助你实现 ImageView 圆角，例如：

Glide-transformations ：一个 Glide 扩展库，提供多种图像转换功能，包括圆角。
Picasso-transformations ：一个 Picasso 扩展库，提供与 Glide-transformations 类似的功能。
CornerView ：一个独立的库，提供了一个自定义的 ImageView，可轻松实现圆角。

解决 centerCrop 圆角失效的问题

当 ImageView 的布局属性设置为 centerCrop 时，上面的方法可能无法实现圆角。这是因为 centerCrop 会裁剪图像以填充整个 ImageView，从而覆盖掉圆角。

要解决这个问题，可以将 ImageView 的 adjustViewBounds 属性设置为 true。这会调整 ImageView 的边界以匹配图像的纵横比，从而在不裁剪图像的情况下显示圆角。

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:src="@drawable/image" />

总结

通过使用 Shape Drawable、CircularImageView 或第三方库，你可以轻松地在 Android 中实现 ImageView 圆角。通过调整 adjustViewBounds 属性，还可以解决 centerCrop 布局中圆角失效的问题。通过遵循这些方法，你可以为你的应用程序增添圆角的魅力，提升用户体验。