Android开罐头——ShapeDrawable全面解析

Drawable种类繁多，ShapeDrawable 是一种很常见的Drawable,可以理解为通过颜色来构造的图形，它既可以是纯色的图形，也可以是具有渐变效果的图形。

一、ShapeDrawable语法

ShapeDrawable语法稍显复杂，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

需要注意的是<shape>标签创建的Drawable，其实体类实际上是GradientDrawable，下面分别介绍各个属性的含义。

二、各属性含义

• android:shape

根元素shape表示图形的形状，有四个选项：

• rectangle 矩形
• oval 椭圆
• line 横线
• ring 圆环

另外四个当中，line 和 ring 一定需要通过<stroke>标签来指定线的宽和和颜色信息等。

• <corners>

表示shape图形四个交的角度，即四个角的圆角程度。单位是px，只适用于矩形shape。

android:radius优先级较低，会被其他四个属性覆盖。属性含义望文生义即可。注意：每个圆角半径值都必须大于1，否侧就没有圆角。

• <solid>

表示纯色填充，利用 android:color 就可以指定shape的颜色。

• <gradient>

渐变效果，和<solid>标签互斥。

gradient标签属性	作用
android:angle	渐变的角度，默认是0，其值必须是45的整数倍。0表示从左边到右，90表示从上到下。具体效果随着角度的调整而产生变化，角度影响渐变方向。
android:centerX	渐变中心的横坐标点
android:centerY	渐变中心的纵坐标点
android:startColor	渐变色的起始色
android:centerColor	渐变色的中间色
android:endColor	渐变色的结束色
android:type	渐变的类型，分3种，linear（线性渐变），radio（径向渐变），sweep（扫描线渐变），默认值是 线性渐变 。
android:gradientRadius	渐变的半径（仅当 android:type 为radio时有效）
android:useLevel	一般为false，当Drawable作为StateListDrawable时有效。

• <stroke>

Shape的描边，有如下几个属性：

stroke标签属性	作用
android:width	描边的宽度，越大则shape的边缘线越粗
android:color	描边的颜色
android:dashWidth	虚线的宽度
android:dashGap	虚线的空隙的间隔

注：如果 android:dashWidth 和 android:dashGap 两者有任意一个为0，那么虚线效果就无法显示。

• <padding>

不是shape的空白，而是包含它的View的空白

• <size>

shape没有宽/高的概念，总结来说，标签设置的宽高就是ShapeDrawable的固有宽高（这时调用getIntrinsicWidth获得的就不是-1了），但是作为View的背景时，它还是会拉伸或缩小自适应View的大小。

三、示例代码

3.1 搜索框渐变背景：

xml代码：

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

   <gradient
        android:angle="90"
        android:startColor="@color/color_fed952"
        android:endColor="#ff9b00"
        />

</shape>

实际效果：

渐变实际效果.png

3.2 搜索框文字背景：

xml代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle"
>
    <corners android:radius="6dp"/>
    <solid android:color="@color/white"/>
</shape>

其实就是个editText的背景是白色的圆角矩形，配合上渐变背景，最后搜索框整体效果图：

整体效果图.png

3.3 搜索框布局文件代码

xml代码：

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_home_search"
        android:padding="8dp"
    >
    <TextView
            android:id="@+id/qrcode_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:background="@drawable/bar_code_scan_icon"
        />

   <TextView
            android:id="@+id/category_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/category"
       />
        <TextView
            android:id="@+id/search_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_toLeftOf="@id/category_view"
            android:layout_toRightOf="@id/qrcode_view"
            android:background="@drawable/bg_home_edittext"
            android:gravity="center"
            android:padding="6dp"
            android:text="@string/home_edittext_hint"
            android:textColor="@color/color_cdcdcd"
            android:textSize="16sp"
        />
    </RelativeLayout>