本文出自 “阿敏其人” 简书博客，转载或引用请注明出处。

ShapeDrawable 一种创建的Drawable，可以理解为通过颜色来狗仔的图形，它既可以是纯色的图形，也可以是具有渐变效果的图形。

ShapeDrawable的xml的根元素是 shape

一、语法

<?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>

.
.

二、子节点

分别这么几个：corners（角度）、gradient（渐变）、padding（距离）、size（大小）、solid（纯色填充）、stroke（描边）。

.
.

根元素：shape

android:shape
表示图形的形状，有四种选项

rectabgle 矩形
oval 椭圆
line 横线
ring 圆环

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

针对ring有5个特殊的属性

值	作用
android:innerRadius	圆内的内半径，当和innerRadiusRatio同时存在时，以innerRadius为准
android:thickness	厚度，圆环的厚度 = 外半径 - 内半径，当和thicknessRatio一起存在时，以thickness为准
innerRadiusRatio	内半径在占整个Drawable宽度的比例，默认值是9。如果为n，那么内半径 = 宽度 / n
android:thicknessRatio	厚度占整个Drawable的宽度的比例，默认值是3。如果为n，那么厚度 = 宽度 / n 。
android:useLevel	一般都应该使用false，否则可能无法达到预期的效果，除非他被用来作为 LevelListDrawable 来使用

.
.

<corners> 角度（只适用于 shape ）

表示shape图形四个交的角度，即四个角的圆角程度。单位是px，他有5个属性

注意：每个圆角半径值都必须大于1，否侧就没有圆角。

.
.

<solid> 纯色填充

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

<gradient> 渐变效果（与solid互斥，纯色或者渐变只能要一个）

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> 描边

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

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

.
.

<padding>

这个没什么好讲的，就是padding，分上下左右
.
.

<size> shape大小（只是大小并不是指定了固定了大小）

android:width 指定shape宽
android:height 指定shape高

严格来说shape没有宽高，但是我们指定size就有了所谓的宽高。
当时当shape作为View 的背景的时候，shape还是会被拉伸的，所以这个宽高并不是指定多少就一定多少（对于Drawable都是没有绝对的宽高的）

三、Demo

首先先来四个最简单的图像，矩形、椭圆、线，圆形。

先上xml代码，后上展示图。

�就是这四个.png

线 simple_line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
    >
    <!--line一定需要描边stroke-->
    <stroke
        android:width="10dp"
        android:color="#0000ff"
         />

</shape>

.
.
椭圆 simple_oval.xml

<?xml version="1.0" encoding="utf-8"?>

<!--椭圆-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="#00ff00"/>
    <corners android:radius="5px"/>

</shape>

.
.
矩形 simple_rectagle.xml

<?xml version="1.0" encoding="utf-8"?>

<!--椭圆-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="#00ff00"/>
    <corners android:radius="5px"/>

</shape>

.
.
圆形 simple_ring.xml

<?xml version="1.0" encoding="utf-8"?>

<!--  安卓的圆一般来说 外半径 = 内半径 + 厚度-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"

    android:innerRadius="20dp"
    android:thickness="3dp"
    >

    <stroke
        android:color="#ff0000" />
    <solid android:color="#ff0000" />
</shape>

图形展示.png

以上就是基本图形最基本的使用。

下面结合几个节点做一些demo

圆形的点击变换颜色

<?xml version="1.0" encoding="utf-8"?>
<!--别看这里我们使用的是ovrl（椭圆） ，但是我们得到可是 圆形 的点击效果-->
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="oval">
            <solid
                android:color="#ff0000" />
            <stroke
                android:width="4dp"
                android:color="#294736" />
        </shape>
    </item>
    <item >
        <shape android:shape="oval">
            <solid
                android:color="#848374" />
            <stroke
                android:width="4dp"
                android:color="#745863" />
        </shape>
    </item>
</selector>

圆形的点击颜色变化.gif

.
.
Edittext的背景框和焦点变化

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_window_focused="false">
        <shape android:shape="rectangle">
            <solid
                android:color="#FFFFFFFF"/>
            <corners
                android:radius="3dp"/>
            <padding
                android:left="10dp"
                android:right="10dp"/>
            <stroke
                android:width="1dp"
                android:color="#BDC7D8"/>
        </shape>
    </item>

    <item android:state_focused="true" >
        <shape android:shape="rectangle" >
            <solid
                android:color="#FFFFFFFF"/>
            <corners
                android:radius="3dp"/>
            <padding
                android:left="10dp"
                android:right="10dp"/>
            <stroke
                android:width="1dp"
                android:color="#728ea3"/>
        </shape>
    </item>
</selector>

Edittext的焦点变化.gif

如果我想画一个矩形，只有底边怎么办？
就好像在TextView里面，我们需要底线，“我们是有底线的TextView”，但是呢，我又不想弄复制的布局，弄一个背景岂不是方便多了？
嗯，你可以这么做，但是单纯的shape是实现不了的，需要用到LayerDrawable。原理就是shape组合排列。
有兴趣可以跳转一下——Drawable子类之——LayerDrawable （图层叠加）

了解更多的Drawable分类 Drawable图像资源抽象类
本篇完。

Drawable子类之—— ShapeDrawable （图形定义）

Drawable子类之—— ShapeDrawable （图形定义）

一、语法

二、子节点

根元素：shape

<corners> 角度（只适用于 shape ）

<solid> 纯色填充

<gradient> 渐变效果（与solid互斥，纯色或者渐变只能要一个）

<stroke> 描边

<padding>

<size> shape大小（只是大小并不是指定了固定了大小）

三、Demo

推荐阅读更多精彩内容

Drawable子类之—— ShapeDrawable （图形定义）

一、语法

二、子节点

根元素：shape

<corners> 角度 （ 只适用于 shape ）

<solid> 纯色填充

<gradient> 渐变效果 （与solid互斥，纯色或者渐变只能要一个）

<stroke> 描边

<padding>

<size> shape大小 （只是大小并不是指定了固定了大小）

三、Demo

推荐阅读更多精彩内容

<corners> 角度（只适用于 shape ）

<gradient> 渐变效果（与solid互斥，纯色或者渐变只能要一个）

<size> shape大小（只是大小并不是指定了固定了大小）