这里是针对“Android中ShapeableImageView使用实例详解(告别shape、三方库)”这篇文章的详细讲解。

1. ShapeableImageView的介绍

在介绍ShapeableImageView之前，我们先来看看XML中我们通常使用来定义图片形状的几个标签：

1.1 ImageView+Shape

我们可以使用ShapeDrawable来通过在XML中定义图形来创建自定义形状和背景。常见的Shape包括矩形、圆形、椭圆等。例如，下面展示了一个带有圆角的矩形的XML定义：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/red" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

我们通常会在XML中创建一个ImageView，然后将这个ShapeDrawable作为ImageView的背景设置进去。

1.2 使用三方库

除此之外，我们还可以使用第三方库来实现更为复杂的形状。例如，Glide RoundedCorners库可以用来给ImageView设置圆角等复杂形状。

1.2.1 Glide RoundedCorners的使用示例

Glide.with(this)
    .load("image_url")
    .transform(RoundedCorners(30))
    .into(imageView)

但是这样使用第三方库会增加我们应用的体积和复杂度，而且这些库不一定都实现了我们需要的形状类型。

1.3 ShapeableImageView

于是，ShapeableImageView应运而生。它是Android 5.0中一个新的控件，用于替代传统的ImageView+ShapeDrawable方式。它支持用XML定义图形、圆角、边框、阴影等属性，同时也可以支持自定义形状。

2. ShapeableImageView的使用方法

2.1 在XML中定义ShapeableImageView

我们可以在XML中使用<com.google.android.material.imageview.ShapeableImageView>来创建一个ShapeableImageView。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/shapeableImageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/your_image"
        app:shapeAppearanceOverlay="@style/radius_8"
        android:background="@drawable/shape_rectangle"
        />

    // ...

</LinearLayout>

如上面示例所示，我们需要定义app:shapeAppearanceOverlay来指定控件的形状，同时也可以设置其他的属性如android:background等。

2.2 在代码中对ShapeableImageView进行操作

ShapeableImageView的使用和其他的ImageView一样。例如，我们可以使用下面的代码来获取并使用ShapeableImageView控件：

findViewById<ShapeableImageView>(R.id.shapeableImageView1).setImageResource(R.drawable.your_image)

2.3 自定义ShapeableImageView的形状

ShapeableImageView的最大优点是可以自定义控件的形状。为此，我们可以通过指定ShapeAppearanceModel来自定义形状。这里提供一个示例来说明。

val shapeAppearanceModel = ShapeAppearanceModel.builder()
    .setTopRightCorner(CornerFamily.CUT, 50F)
    .setTopLeftCorner(CornerFamily.ROUNDED, 10F)
    .setBottomLeftCorner(CornerFamily.ROUNDED, 10F)
    .setBottomRightCorner(CornerFamily.ROUNDED, 10F)
    .build()
val shapeableImageView:ShapeableImageView = findViewById(R.id.shapeableImageView2)
shapeableImageView.shapeAppearanceModel = shapeAppearanceModel

如上述示例所示，我们可以使用ShapeAppearanceModel来指定各个角落的大小以及形状。

3. ShapeableImageView的两个示例

3.1 圆形头像

下面，我们来看看如何使用ShapeableImageView来实现圆形头像。我们需要先在XML中定义一个形状：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFBB22" />
</shape>

然后，在MainActivity中，我们来设置ShapeableImageView的形状：

val radius = resources.getDimension(R.dimen.rounded_image_radius)
val shapeAppearanceModel = ShapeAppearanceModel.builder()
    .setAllCornerSizes(radius)
    .build()
findViewById<ShapeableImageView>(R.id.shapeableImageView1)
    .shapeAppearanceModel = shapeAppearanceModel

最后，我们就可以在Activity中使用ShapeableImageView了。

3.2 带圆角的矩形

下面，我们再来看看如何实现带圆角的矩形。我们需要先在XML中定义一个矩形的形状：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorPrimary" />
    <corners android:radius="10dp" />
</shape>