ShapeableImageView 的使用,告别shape、三方库

属性介绍

style 属性：

布局属性：

样式案例

build.gradle 配置

    implementation 'com.google.android.material:material:1.6.1'
1

对应Style如下：

    <!--圆形-->
    <style name="roundStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>


    <!--圆角-->
    <style name="roundedCornerImageStyle10">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>

    <!--切角-->
    <style name="roundedCutStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

    <!--左上右上圆角-->
    <style name="roundedTopStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopLeft">20dp</item>
        <item name="cornerSizeTopRight">20dp</item>
    </style>

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

    <!--子弹头-->
    <style name="roundedBulletStyle">
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeTopRight">50dp</item>
        <item name="cornerSizeTopLeft">50dp</item>
        <item name="cornerFamilyTopLeft">rounded</item>
    </style>

    <!--Tips-->
    <style name="roundedTipsStyle">
        <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>

    <!-- 左上角90度扇形图片 -->
    <style name="topLeftRoundImageStyle">
        <item name="cornerFamilyTopLeft">rounded</item>
        <item name="cornerSizeTopLeft">100%</item>
    </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

有个小细节需要注意，当我们使用strokeWidth属性时，一定要对应设置padding，否则会出现显示一半的效果。而padding的值设置为strokeWidth值的一半。如：

      app:strokeWidth="5dp"
      android:padding="2.5dp"
1
2

代码已上传github:
https://github.com/ljlstudio/KtMvvm/tree/master/demo/src/main/java/com/kt/ktmvvm/jetpack/shapeableimageview