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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。