ShapeableImageView 的使用,告别shape、三方库

属性介绍

style 属性：

属性名	描述	作用
cornerFamily	属性/样式	-rounded： 圆角0 -cut： 切角1
cornerSize	弧度	弧度大小
cornerSizeTopLeft	左上角弧度大小
cornerSizeTopRight	右上角弧度大小
cornerSizeBottomRight	右下角弧度大小
cornerSizeBottomLeft	左下角弧度大小
cornerFamilyTopLeft	左上角样式（圆角或切角）
cornerFamilyTopRight	右上角样式（圆角或切角）
cornerFamilyBottomRight	右下角样式（圆角或切角）
cornerFamilyBottomLeft	左下角样式（圆角或切角）

布局属性：

属性名	描述	作用
shapeAppearance	shapeableImageView的形状外观样	引用style样式
shapeAppearanceOverlay	ShapeableImageView的形状外观叠加样式	引用style样式
strokeColor	描边颜色
strokeWidth	描边粗细

样式案例

build.gradle 配置

    implementation 'com.google.android.material:material:1.6.1'

对应Style如下：

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


    <!--圆角-->
    <style name="roundedCornerImageStyle10">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>

    <!--切角-->
    <style name="roundedCutStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

    <!--左上右上圆角-->
    <style name="roundedTopStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">20dp</item>
        <item name="cornerSizeTopRight">20dp</item>
    </style>

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

    <!--子弹头-->
    <style name="roundedBulletStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
        <item name="cornerSizeTopLeft">50dp</item>
        <item name="cornerFamilyTopLeft">rounded</item>
    </style>

    <!--Tips-->
    <style name="roundedTipsStyle">
        <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>

    <!-- 左上角90度扇形图片 -->
    <style name="topLeftRoundImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">100%</item>
    </style>

有个小细节需要注意，当我们使用strokeWidth属性时，一定要对应设置padding，否则会出现显示一半的效果。而padding的值设置为strokeWidth值的一半。如：

      app:strokeWidth="5dp"
      android:padding="2.5dp"

代码已上传github:
https://github.com/ljlstudio/KtMvvm/tree/master/demo/src/main/java/com/kt/ktmvvm/jetpack/shapeableimageview