Android Notes｜玩转 ShapeableImageView

随着年龄的增长，内心越发感受家的重要。

前言

前段时间看到 Google 推送了一篇关于 Material Design 更新到 1.2.0，其中有个 ImageView 的更新觉得蛮有意思的，这次正好借着韩总重构的机会实战一波～

不足之处欢迎拍砖～

GitHub 地址：

• ShapeableImageViewDemo

最终效果图：

属性一览

属性名	作用	参数以及含义
shapeAppearance	ShapeableImageView 的形状外观样式	引用 style 样式
shapeAppearanceOverlay	ShapeableImageView 的形状外观叠加样式	引用 style 样式
cornerFamily	shape 属性/样式	- rounded： 圆角 0 - cut： 切角 1
cornerSize	ShapeAppearance 弧度

cornerSize：

• cornerSizeTopLeft/cornerSizeTopRight/cornerSizeBottomRight：左、右、上、下弧度

cornerFamily：

• cornerFamilyTopLeft/cornerFamilyTopRight/cornerFamilyBottomRight/cornerFamilyBottomLeft：样式

不足之处，欢迎沟通学习～

ShapeableImageView 搞起来

据官方说明，此 ImageView 提供了对于 Shape 更简介的使用方式。

引入依赖：

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

1. 圆角图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_round"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/roundedCornerStyle" />

对应 style：

    <!-- 圆角图片 -->
    <style name="roundedCornerStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">8dp</item>
    </style>

2. 圆形图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_circle"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/circleStyle" />

对应 style：

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

3. 切角图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_cut"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/cutCornerStyle" />

对应 style：

    <!-- 切角图片 -->
    <style name="cutCornerStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
    </style>

4. 菱形图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_diamond"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/diamondStyle" />

对应 style：

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

5. 右上角圆角图片

   <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_top_right"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/topRightCornerStyle" />

对应 style：

    <!-- 右上角圆角图片 -->
    <style name="topRightCornerStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
    </style>

6. 鸡蛋图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_egg"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/eggStyle" />

对应 style：

    <!-- 小鸡蛋图片 -->
    <style name="eggStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
        <item name="cornerSizeTopLeft">50dp</item>
        <item name="cornerFamilyTopLeft">rounded</item>
    </style>

7. 组合弧度图片

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_com_corner"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:scaleType="fitXY"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/comCornerStyle" />

对应 style：

    <!-- 组合图片效果 -->
    <style name="comCornerStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopRight">50%</item>
        <item name="cornerSizeBottomLeft">50%</item>
    </style>

8. 小 Tips

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/siv_tip"
        android:layout_width="100dp"
        android:layout_height="30dp" 
        android:scaleType="centerCrop"
        android:src="@drawable/hlq_test" 
        app:shapeAppearanceOverlay="@style/tipsCornerStyle" />

对应 style：

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

番外篇 - 通过源码学知识

通过 R 文件可以查看当前 ShapeableImageView 具有的属性：

    <declare-styleable name="ShapeAppearance">
      <!-- Corner size to be used in the ShapeAppearance. All corners default to this value -->
      <attr format="dimension|fraction" name="cornerSize"/>
      <!-- Top left corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeTopLeft"/>
      <!-- Top right corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeTopRight"/>
      <!-- Bottom right corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeBottomRight"/>
      <!-- Bottom left corner size to be used in the ShapeAppearance. -->
      <attr format="dimension|fraction" name="cornerSizeBottomLeft"/>

      <!-- Corner family to be used in the ShapeAppearance. All corners default to this value -->
      <attr format="enum" name="cornerFamily">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Top left corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyTopLeft">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Top right corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyTopRight">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Bottom right corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyBottomRight">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
      <!-- Bottom left corner family to be used in the ShapeAppearance. -->
      <attr format="enum" name="cornerFamilyBottomLeft">
        <enum name="rounded" value="0"/>
        <enum name="cut" value="1"/>
      </attr>
    </declare-styleable>
      <declare-styleable name="ShapeableImageView">
      <attr name="strokeWidth"/>
      <attr name="strokeColor"/>

      <!-- Shape appearance style reference for ShapeableImageView. Attribute declaration is in the
           shape package. -->
      <attr name="shapeAppearance"/>
      <!-- Shape appearance overlay style reference for ShapeableImageView. To be used to augment
           attributes declared in the shapeAppearance. Attribute declaration is in the shape package.
           -->
      <attr name="shapeAppearanceOverlay"/>
    </declare-styleable>

Google 注释写的很明确，参考 Google 翻译以及实践可以初步了解。

随后通过继续查看源码的方式获取到当前版本提供的样式，例如：

    @IntDef({CornerFamily.ROUNDED, CornerFamily.CUT})
    @Retention(RetentionPolicy.SOURCE)
    public @interface CornerFamily {
      /** Corresponds to a {@link RoundedCornerTreatment}. */
      int ROUNDED = 0;
      /** Corresponds to a {@link CutCornerTreatment}. */
      int CUT = 1;
    }

最后同样找到对应上右下左获取方式：

欢迎大佬提供更好的方式～

参考资料

• ShapeableImageView
• Material Components for Android 1.2.0 is now available
• About shape
• Shape Theming