在没有ShapeableImageView之前，我们要想实现圆形图片效果，要么自己进行绘制，裁剪，要么导入第三方库，曾经的CircleImageView更是风靡一时，当我们要实现圆角效果时，还得再导入一个框架，或者一开始就考虑到圆角样式，总之，系统提供的ImageView功能非常有限，要想实现设计的效果，多多少少都需要自己来处理。

效果展示

随着网络的发展，现在对图片的需求越来越多，也越来越高了。官方也顺势在material中推出了ShapeableImageView这个组件，来实现图片的各种效果，这里先给一张部分样式效果图

实现原理

这还只是一部分，我们可以看到支持的样式确实非常多。这些效果总结一下就是图片的四个角有两种样式，一种是rounded圆角，另一种是cut斜切，就是直接将角剪掉。裁剪大小有两种方式，一种是百分比，从0%到100%，另一种是设置具体的大小。将两种样式，四个角，不同的大小任意组合，就能实现丰富多彩的样式。

样式演示

• 例如我们想实现圆形图片

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

<com.google.android.material.imageview.ShapeableImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/image"
            app:shapeAppearance="@style/imageRounded" />

通过shapeAppearance来加载样式

• 例如我们想实现一个标签样式

<style name="imageRounded2">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerFamilyBottomRight">cut</item>
        <item name="cornerSize">50%</item>
</style>
<style name="imageRounded3">
        <item name="cornerFamilyTopLeft">cut</item>
        <item name="cornerFamilyBottomLeft">cut</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSize">50%</item>
</style>

• 例如我们想实现一个扇形效果

<style name="imageRounded4">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerFamilyBottomLeft">cut</item>
        <item name="cornerFamilyBottomRight">cut</item>
        <item name="cornerSize">50%</item>
</style>

• 再例如我们要实现一个水滴效果

<style name="imageRounded23">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">70%</item>
        <item name="cornerSizeTopRight">70%</item>
        <item name="cornerSizeBottomLeft">30%</item>
        <item name="cornerSizeBottomRight">30%</item>
</style>

大家可以尝试不同的组合，会有意想不到的效果。