Material Design 系列

1. Material Design UI方案使用講解
2. Material TextInputLayout使用詳解
3. Material ShapeableImageView 使用詳解

博客創建時間：2022.08.23
博客更新時間：2022.08.05

以Android studio build=7.0.0，SDKVersion 31來分析講解。如圖文和網上其他資料不一致，可能是別的資料版本較低而已。

前言

繼承自ImageView，可以為image添加描邊大小、顏色，以及圓角、裁切等，這得益于它新增了一個屬性shapeAppearance，具體實現在ShapeAppearanceModel，可以通過style來配置，也可以通過代碼實現。

屬性&方法

樣式控制

ShapeableImageView 的樣式只要由shapeAppearanceOverlay或shapeAppearance控制。

ShapeableImageView本質是通過ViewOutlineProvider實現剪裁的。ViewOutlineProvider的效率比傳統的Xfermode進行剪裁的方式高很多。

        <!-- 圓角圖片 -->
        <!-- shapeAppearanceOverlay或shapeAppearance 加載style -->
        <!-- strokeColo描邊顏色 -->
        <!-- strokeWidth描邊寬度 -->
        <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/image1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:padding="1dp"
        android:src="@mipmap/home3"
        app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
        app:strokeColor="#F44336"
        app:strokeWidth="2dp" />

1. 圓形圖

    <!-- 圓形圖片 -->
    <style name="circleImageStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

2、 菱形

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

3. 水滴形

    <!-- 水滴 -->
    <style name="waterImageStyle">
        <item name="cornerFamilyBottomLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeBottomLeft">25dp</item>
        <item name="cornerSizeBottomRight">25dp</item>
        <item name="cornerSizeTopLeft">70%</item>
        <item name="cornerSizeTopRight">70%</item>
    </style>

4. 火箭頭

    <!-- 火箭頭圖片 -->
    <style name="rocketImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopLeft">70%</item>
        <item name="cornerSizeTopRight">70%</item>
    </style>

5. 葉子形

    <!-- 葉子圖片 -->
    <style name="leafImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerFamilyBottomRight">rounded</item>
        <item name="cornerSizeTopLeft">70%</item>
        <item name="cornerSizeBottomRight">70%</item>
    </style>

6. 八角形

    <!-- 切角圖片 -->
    <style name="cutImageStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">28%</item>
    </style>

7. 圓角

    <!-- 圓角圖片 -->
    <style name="roundedCornerImageStyle">
        <item name="cornerFamily">rounded</item>
        <!--  可以是具體的Dp-->
          <item name="cornerSize">25dp</item>
        <!--  也可以是%,以高為基準-->
<!--        <item name="cornerSize">15%</item>-->
    </style>

8. tip形

    <!-- tip圖片 -->
    <style name="tipImageStyle">
        <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>

9.代碼控制

        mBinding.simageView.shapeAppearanceModel = ShapeAppearanceModel.builder()
            .setAllCorners(CornerFamily.ROUNDED, 20f)
            .setTopLeftCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))
            .setTopRightCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))
            .setBottomRightCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))
            .setBottomLeftCorner(CornerFamily.CUT, RelativeCornerSize(0.3f))

            .setAllCornerSizes(ShapeAppearanceModel.PILL)
            .setTopLeftCornerSize(20f)
            .setTopRightCornerSize(RelativeCornerSize(0.5f))
            .setBottomLeftCornerSize(10f)
            .setBottomRightCornerSize(AbsoluteCornerSize(30f))
            .build()

關于Stroke

ShapeableImageView指定strokeWidth描邊的時候，其描邊會被覆蓋掉一半，如strokeWidth=4dp，上下左右會被覆蓋，實際的效果是只有2dp被顯示。

ShapeableImageView指定strokeWidth描邊的時候，沒有設置padding，那筆畫可能一半看不見，需要設置padding, 設置描邊的時候，需要添加padding屬性，padding的值為strokeWidth的一半。

總結

有興趣可以查看源碼源碼Demo：https://gitee.com/luofaxin/CodeAanalysis.git

相關鏈接：

1. Material Design UI方案使用講解
2. Material TextInputLayout使用詳解
3. Material ShapeableImageView 使用詳解

擴展鏈接：

1. 強大無匹的自定義下拉列表
2. Lottie動畫 輕松使用
3. PNG、JPG等普通圖片高保真轉SVG圖
4. Android 完美的蒙層方案

博客書寫不易，您的點贊收藏是我前進的動力，千萬別忘記點贊、 收藏 ^ _ ^ !