Android XML绘图精炼详解第（一）节：Shape解析和示例

一、前期基础知识储备

Android XML绘图—XML在Android系统中可不仅仅是Java中的一个布局文件、配置列表。在Android开发者的手上，它甚至可以变成一幅画，一张图。Android开发者给XML提供了四个强大的技能来帮助实现这一功能：

①Shape；②Bitmap；③Layer；④Secletor

本篇开始第一讲——Shape的使用技巧。

PS：Shape是Android XML绘图中最精华的所在，请掌握好。

（1）Shape官方文档描述：

Defines a generic graphical "shape." Any Shape can be drawn to a Canvas with its own draw() method, but more graphical control is available if you instead pass it to a ShapeDrawable.Custom Shape classes must implement clone() and return an instance of the custom Shape class.

由官方文档，我们知道，通过Shape我们可以绘制各种形状。

（2）为什么要使用Shape？

①因为用xml实现一些形状图形, 或则颜色渐变效果, 相比PNG图片, 占用空间更小; 相比自定义View, 实现起来更加简单。②android 的样式主要则是通过 shape、selector、layer-list、level-list、style、theme 等组合实现。shape是其中最基础的形状定义工具。

 

这张图是小米路由器的登录页面，样式非常常见，里面的布局元素，我们一眼就可以看出，一个标题栏，下面一个两个文字类View控件，在下面是一个按钮，注意这个按钮就和安卓默认的样式要不一样，更加圆润好看——圆角矩形+内部非填充，看起来很简洁，这样的登录按钮就给人一种想按下去的冲动，而实现这种按钮的方式就是采用了Shape，一种圆角矩形，不填充颜色，边框轮廓设为更柔和的灰色系。

二、上代码，具体实现

（1）在什么地方定义Shape，又怎么使用定义好的Shape？

定义Shape的时候需要在res/drawable/目录下建一个XML资源文件，而在使用的时候是要依靠layout布局中控件进行引用，把定义好的Shape设置为背景。因为APP界面中的元素，都是控件进行展示的，形状也是一种绘图元素，必须依附于控件。

（2）Shape一共有四种形状，形状并不多

①rectangle : 矩形，默认的形状，可以画出直角矩形、圆角矩形、弧形等

②oval : 椭圆形，用得比较多的是画正圆

③line : 线形，可以画实线和虚线

④ring : 环形，可以画环形进度条

（3）Shape真正复杂的地方——Shape所支持的参数及其之间的组合

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle">
            <!-- 矩形的圆角弧度 -->
            <corners android:radius="10dp" />
            <!-- 矩形的填充色 -->
            <solid android:color="#00FFFFFF" />
            <!--矩形的外环-->
            <stroke
                android:width="1dp"
                android:color="#ff8d28" />
</shape>

上面展示的是一段简单的黑色圆角填充背景。

以下为的Shape所支持的参数举例：

1）solid : 设置形状填充的颜色，只有android:color一个属性 
- android:color 填充的颜色

2）padding: 设置内容与形状边界的内间距，可分别设置左右上下的距离
android:left 左内间距
android:right 右内间距
android:top 上内间距
android:bottom 下内间距

3）gradient: 设置形状的渐变颜色，可以是线性渐变、辐射渐变、扫描性渐变
android:type 渐变的类型
linear 线性渐变，默认的渐变类型
radial 放射渐变，设置该项时，android:gradientRadius也必须设置
sweep 扫描性渐变
android:startColor 渐变开始的颜色
android:endColor 渐变结束的颜色
android:centerColor 渐变中间的颜色
android:angle 渐变的角度，线性渐变时才有效，必须是 45 的倍数，0 表示从左到右，90 表示从下到上
android:centerX 渐变中心的相对X坐标，放射渐变时才有效，在0.0 到 1.0 之间，默认为 0.5，表示在正中间
android:centerY 渐变中心的相对X坐标，放射渐变时才有效，在 0.0到1.0之间，默认为0.5，表示在正中间
android:gradientRadius 渐变的半径，只有渐变类型为 radial 时才使用
android:useLevel 如果为 true，则可在 LevelListDrawable 中使用

4）corners: 设置圆角，只适用于rectangle类型，可分别设置四个角不同半径的圆角
android:radius 圆角半径，会被下面每个特定的圆角属性重写
android:topLeftRadius 左上角的半径
android:topRightRadius 右上角的半径
android:bottomLeftRadius 左下角的半径
android:bottomRightRadius 右下角的半径

5）stroke: 设置描边，可描成实线或虚线。
android:color 描边的颜色
android:width 描边的宽度
android:dashWidth 设置虚线时的横线长度
android:dashGap 设置虚线时的横线之间的距离

//以下为只在ring中可以使用
android:innerRadius 内环的半径
android:innerRadiusRatio 浮点型，以环的宽度比率来表示内环的半径，默认为 3，表示内环半径为环的宽度除以 3，该值会被 android:innerRadius 覆盖
android:thickness 环的厚度
android:thicknessRatio 
浮点型，以环的宽度比率来表示环的厚度，默认为 9，表示环的厚度为环的宽度除以 9，该值会被 android:thickness 覆盖
android:useLevel 一般为 false，否则可能环形无法显示，只有作为LevelListDrawable 使用时才设为 true

（4）笔者具体实现了几个，读者可以参考一下

①定义了一个圆角非填充的矩形，类似于上面的登录页面

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- padding设置内容区域离边界的间距 -->
    <padding
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp" />
    <!-- corners设置圆角，只适用于rectangle @color/background_all-->
    <corners android:radius="5dp" />
    <!-- stroke设置描边 -->
    <gradient
        android:type = "linear"
        android:startColor = "#424242"
        android:endColor = "#F1EFED" />
</shape>

②定义了一个线型渐变的圆形（PS：渐变有三种形式：线型渐变、放射渐变、扫描渐变，读者可参考下面运行效果图）

<?xml version="1.0" encoding="utf-8"?>
<!-- android:shape指定形状类型，默认为rectangle -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- padding设置内间距 -->
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
    <!-- size设置形状的大小 -->
    <size
        android:width="100dp"
        android:height="100dp" />
    <!-- gradient设置渐变 -->
    <gradient
        android:endColor="#2F90BD"
        android:gradientRadius="40dp"
        android:startColor="#FFFFFF"
        android:type="linear" />
</shape>

③定义了一个扫描渐变的圆环

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="9"
    android:useLevel="false">
    <gradient
        android:endColor="#2F90BD"
        android:startColor="#FFFFFF"
        android:type="sweep" />
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>

运行效果如图：

④阴影圆角

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <!-- 相当于padding -->
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="3dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <item >
                <shape>
                    <solid android:color="#33000000" />
                    <corners android:radius="3dp"/>
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <!-- 相当于padding -->
            <item android:bottom="1dp" android:right="1dp"
                android:left="1dp" android:top="1dp">
                <shape>
                    <solid android:color="#ffffff" />
                    <corners android:radius="3dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

效果如图：只要记住一点 padding是相对于“当事层”而言的。

小结：其实大家可以发现，其实Shape的使用还是比较简单的，只要在drawable中写好XML的布局代码，然后在layout中对控件进行背景的设置，就可以达到使用的目的。所有酷炫的控件都是采用同样的方式进行实现的，不同的只是组合方式的不同。建议读者可以多练习练习，一次性掌握了，以后开发中使用会非常的方便。

 

最后，读者在写Shape圆环形布局的时候，报错“XML Parsing Error: XML or text declaration not at start of entity”，找了许久才发现，drawable文件夹下定义新的ring布局xml文件时，在<?xml version="1.0" encoding="UTF-8"?>这个首行代码的前面留出了空格，所以报错了。读者在写码的时候一定要小心，这个错误耽误了蛮多时间。