Android从入门到放弃——二、View 背景 shape

只是单纯的颜色作为背景并不能满足我们的需求，我们常见的一些比如圆形、圆角矩形，并且配以过渡色之类的android也是支持的。下面我们一一讲解：

首先我们要将的一个标签就是shape，它是用来定义形状的。

支持4种形状：line-线条、oval-椭圆(圆形)、rectangle-矩形、ring-环形

同时有一系列的属性来设置其样式，我们先来看这些属性：

1. size：设置大小，包含宽度和高度2个属性。
2. stroke：设置边框线条的样式。width：线条的宽度，color设置颜色，dashwidth设置虚线中实线的宽度，dashGap设置虚线的间隔。如果shape为line那就是设置的线条的样式。
3. solid：设置颜色shape为line时无效。
4. corners：设置矩形的圆角。可统一设置一样大小的圆角，也可以单独设置每个角的圆角大小。
5. gradient：设置渐变色，可设置角度，开始、中间、结束3个位置的颜色。通过type属性还可以设置渐变色的样式。
   1. linear——线性
   2. radial——径向渐变
   3. sweep——扫射状
6. padding：设置内边距。

下面我们通过实例来实际看效果：

    <View
        android:id="@+id/acMainView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/view_bg"/>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="line">
            <size android:width="200dp" android:height="200dp" />
            <stroke android:width="2dp" android:color="@color/colorAccent" android:dashWidth="30dp" android:dashGap="5dp" />
        </shape>
    </item>

</selector>

    <item>
        <shape android:shape="rectangle">
            <size android:width="200dp" android:height="200dp" />
            <stroke android:width="2dp" android:color="@color/colorAccent" android:dashWidth="30dp" android:dashGap="5dp" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="20dp" android:topLeftRadius="30dp" android:topRightRadius="40dp"/>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>

上面代码分开设置的4个角的圆角不一样，也可以直接使用<corners android:radius="30dp"/>来统一设置。

代码中使用了<solid android:color="@color/colorPrimary"/>，跟gradient是冲突的，不能一起使用。

<gradient android:startColor="@color/colorPrimary" android:centerColor="@color/colorAccent" android:endColor="@color/colorPrimaryDark" android:type="linear"/>

gradient的type样式默认为linear

上面代码的效果如下：

需要注意的是radial样式需要设置gradientRadius值，表示中心圆环的大小。

<shape  android:shape="ring"
            android:innerRadius="50dp"
            android:thickness="20dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>

这里设置圆环

这里需要注意的是android:useLevel 一般需要设置为false才能显示。这里有一个问题是不能设置内环的颜色，即内环是透明的。

oval：

<shape  android:shape="oval">
            <solid android:color="@color/colorAccent"/>
            <size android:width="20dp" android:height="20dp"/>
        </shape>

这里设置的size大小，而且宽高相同，所以就是圆形。

为什么需要使用shape来定义？ 其实默认都推荐大家能用的地方都用这种方式。它的好处个人认为有以下几点

1. 直接代码定义方便修改样式
2. 使用这种方式定义的是矢量图形，不会有在大屏幕手机上失真的问题
3. 可以有效的减少使用图片带来的apk体积变大的问题
4. 配合layer-list可以组合成比较复杂的图形

针对第4点我们再来看看。

layer-list可以包含多个item，每个item里面都可以定义其他的shape或者layer-list。

我们先来看一个效果图

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@android:color/holo_red_dark" />
                </shape>
            </item>
            <item android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp">
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@color/colorPrimary" />
                </shape>
            </item>
            <item android:bottom="20dp" android:left="20dp" android:right="20dp" android:top="20dp">
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@color/colorAccent" />
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

这里有3个item，每个item都设置了一个圆角矩形，而且越往下设置的边距越大。

item也可以指定drawable，可以设置bitmap。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <layer-list>
            <item android:drawable="@drawable/ic_launcher_background">
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@android:color/holo_red_dark" />
                </shape>
            </item>
            <item android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp">
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@color/colorPrimary" />
                </shape>
            </item>
            <item android:bottom="20dp" android:left="20dp" android:right="20dp" android:top="20dp">
                <shape android:shape="rectangle">
                    <corners android:radius="10dp" />
                    <solid android:color="@color/colorAccent" />
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

这里的组合是非常灵活的，大家可以动手试试看。