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