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. 圆角图片

对应 style：

2. 圆形图片

对应 style：

3. 切角图片

对应 style：

4. 菱形图片

对应 style：

5. 右上角圆角图片

对应 style：

6. 鸡蛋图片

对应 style：

7. 组合弧度图片

对应 style：

8. 小 Tips

对应 style：

番外篇 - 通过源码学知识

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

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