Android 使用 Shape 自定义图形

shape

size

设置 shape 的 width 和 height

solid

设置 shape 的背景色

paddding

设置 shape 的内边距，这个是控制后面 item 距前一个 item 的边距，单独设置感觉没有什么用。

stroke

设置 shape 的 border，可设置 color、width、dashGap、dashWidth。

dashGap: 虚线的间隔 dashWidth: 虚线小点的长度

但是 css 里面的 border 没法支持虚线间隔和长度的设置

corners

设置 shape 的圆角，可分别设置四个角的圆角

gradient

设置 shape 的背景为渐变色

代码很简单，就不演示了~

bitmap

略

layer-list

layer-list 可以将多个 drawable 按照顺序层叠在一起显示，默认情况下，所有的 item 中的 drawable 都会自动根据它附上的 view 的大小而进行缩放。

layer-list 中的 item 是按照顺序从下往上叠加的，即先定义的 item 在下面，后面的依次往上面叠放。

item 可设置属性

heigth | width
left | top | right | bottom
id | gravity | drawable

item 内部可以包含一个 shape 元素或者 bitmap 元素。

后面的 item 的属性会继承第一个 item 的属性。第一个 item 会根据内部的 shape 计算出大小，后面的在 shape 中即使再次设置 size 也无效，只能设置 item 的位置大小修改。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <size android:width="100dp" android:height="100dp" />
            <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp" />
            <solid android:color="@color/color_fab" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/color_aab"/>
            // 即使这里写了 size 也没有用处!!!
            <size android:width="100dp" android:height="100dp" />
            <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/color_0fc"/>
        </shape>
    </item>
</layer-list>

常见图形

同心圆

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <size android:width="100dp" android:height="100dp" />
            <padding android:bottom="10dp" android:top="10dp" android:right="10dp" android:left="10dp" />
            <stroke android:width="1dp" android:dashWidth="4dp" android:dashGap="4dp" android:color="@color/color_fab" />
            <corners android:radius="100dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/color_fab" />
            <corners android:radius="100dp" />
        </shape>
    </item>

</layer-list>

双边线

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <size android:height="100dp" android:width="100dp" />
            <solid android:color="@color/color_fab" />
        </shape>
    </item>
    <item android:bottom="90dp">
        <shape>
            <solid android:color="@color/color_0fc" />
        </shape>
    </item>

    <item android:top="90dp">
        <shape>
            <solid android:color="@color/color_0fc" />
        </shape>
    </item>

</layer-list>

超复杂图形

后面画个哆啦 A 梦出来，现在没时间，略