Material Design 系列

1. Material Design UI方案使用讲解
2. Material TextInputLayout使用详解
3. Material ShapeableImageView 使用详解

博客创建时间：2022.08.23
博客更新时间：2022.08.05

以Android studio build=7.0.0，SDKVersion 31来分析讲解。如图文和网上其他资料不一致，可能是别的资料版本较低而已。

前言

继承自ImageView，可以为image添加描边大小、颜色，以及圆角、裁切等，这得益于它新增了一个属性shapeAppearance，具体实现在ShapeAppearanceModel，可以通过style来配置，也可以通过代码实现。

属性&方法

样式控制

ShapeableImageView 的样式只要由shapeAppearanceOverlay或shapeAppearance控制。

ShapeableImageView本质是通过ViewOutlineProvider实现剪裁的。ViewOutlineProvider的效率比传统的Xfermode进行剪裁的方式高很多。

        <!-- 圆角图片 -->
        <!-- shapeAppearanceOverlay或shapeAppearance 加载style -->
        <!-- strokeColo描边颜色 -->
        <!-- strokeWidth描边宽度 -->
        <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/image1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:padding="1dp"
        android:src="@mipmap/home3"
        app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
        app:strokeColor="#F44336"
        app:strokeWidth="2dp" />

1. 圆形图

    <!-- 圆形图片 -->
    <style name="circleImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

2、 菱形

  <!-- 菱形图片 -->
    <style name="diamondImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">50%</item>
    </style>

3. 水滴形

    <!-- 水滴 -->
    <style name="waterImageStyle">
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeBottomLeft">25dp</item>
        <item name="cornerSizeBottomRight">25dp</item>
        <item name="cornerSizeTopLeft">70%</item>
        <item name="cornerSizeTopRight">70%</item>
    </style>

4. 火箭头

    <!-- 火箭头图片 -->
    <style name="rocketImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopLeft">70%</item>
        <item name="cornerSizeTopRight">70%</item>
    </style>

5. 叶子形

    <!-- 叶子图片 -->
    <style name="leafImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">70%</item>
        <item name="cornerSizeBottomRight">70%</item>
    </style>

6. 八角形

    <!-- 切角图片 -->
    <style name="cutImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">28%</item>
    </style>

7. 圆角

    <!-- 圆角图片 -->
    <style name="roundedCornerImageStyle">
        <item name="cornerFamily">rounded</item>
        <!--  可以是具体的Dp-->
          <item name="cornerSize">25dp</item>
        <!--  也可以是%,以高为基准-->
<!--        <item name="cornerSize">15%</item>-->
    </style>

8. tip形

    <!-- tip图片 -->
    <style name="tipImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">50%</item>
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerSizeBottomLeft">50%</item>

        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerSizeTopRight">50%</item>
        <item name="cornerFamilyBottomRight">cut</item>
        <item name="cornerSizeBottomRight">50%</item>
    </style>

9.代码控制

        mBinding.simageView.shapeAppearanceModel = ShapeAppearanceModel.builder()
            .setAllCorners(CornerFamily.ROUNDED, 20f)
            .setTopLeftCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))
            .setTopRightCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))
            .setBottomRightCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))
            .setBottomLeftCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))

            .setAllCornerSizes(ShapeAppearanceModel.PILL)
            .setTopLeftCornerSize(20f)
            .setTopRightCornerSize(RelativeCornerSize(0.5f))
            .setBottomLeftCornerSize(10f)
            .setBottomRightCornerSize(AbsoluteCornerSize(30f))
            .build()

关于Stroke

ShapeableImageView指定strokeWidth描边的时候，其描边会被覆盖掉一半，如strokeWidth=4dp，上下左右会被覆盖，实际的效果是只有2dp被显示。

ShapeableImageView指定strokeWidth描边的时候，没有设置padding，那笔画可能一半看不见，需要设置padding, 设置描边的时候，需要添加padding属性，padding的值为strokeWidth的一半。

总结

有兴趣可以查看源码源码Demo：https://gitee.com/luofaxin/CodeAanalysis.git

相关链接：

1. Material Design UI方案使用讲解
2. Material TextInputLayout使用详解
3. Material ShapeableImageView 使用详解

扩展链接：

1. 强大无匹的自定义下拉列表
2. Lottie动画 轻松使用
3. PNG、JPG等普通图片高保真转SVG图
4. Android 完美的蒙层方案

博客书写不易，您的点赞收藏是我前进的动力，千万别忘记点赞、 收藏 ^ _ ^ !