Android Notes｜玩转 ShapeableImageView

第

100

次推文

LZ-Says

随着年龄的增加，心里愈加感觉家的重要。

前言

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

不足之处欢迎拍砖～

GitHub 地址：

• https://github.com/HLQ-Struggle/ShapeableImageViewDemo

最终效果图： 

属性一览

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

欢迎各位关注

不按期发布

见证成长路

以为不错，右下角点个好看呗～

本文分享自微信公众号 - 贺利权（hlq_struggle）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。