Android XML绘图

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

一、Bitmap

在XML中使用Bitmap非常简单，代码如下所示。

<?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@mipmap/ic_launcher">

    </bitmap>

通过这样引用图片，就可以将图片转换成了Bitmap让我们在程序中使用。

二、Shape

通过Shape可以在XML中绘制各种形状，下面展示了Shape所支持参数。

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    //默认为rectangle
    android:shape=["rectangle"|"oval"|"line"|"ring"]>
    
    <corners   /当shape="rectangle"时使用
        //半径，会后面的单个半径属性覆盖，默认为1dp

        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer"
        ></corners>

    <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"]
        ></gradient>

    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer"
        ></padding>

    <size  //指定大小，一般用在imageview配合scaleType属性使用
        android:width="integer"
        android:height="integer"
        ></size>

    <solid  //填充颜色
        android:color="color"
        ></solid>

    <stroke  //指定边框
        android:width="integer"
        android:color="color"
        //虚线宽度
        android:dashWidth="integer"
        //虚线间隔
        android:dashGap="integer"
        ></stroke>

    


</shape>

Shape可以说是XML绘图的精华所在。Shape功能十分强大，无论是扁平化、拟物化、还是渐变，它都能绘制。整个Shape的可用参数，在上面的表中已经举例的很清楚了。大家在使用中，试试相应的属性就能很快掌握。

下面就是一个简单的通过渐变来实现的阴影效果，代码如下，效果如图（1）所示。

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

    >
    <gradient
        android:startColor="#FF5DA2FF"
        android:endColor="#805FBBFF"
        android:angle="45"
        ></gradient>

    <padding
        android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp"
        ></padding>
    <corners android:radius="8dp"></corners>


</shape>

                                                                    （1）通过Shape实现阴影效果

三、Layer

Layer是在Photoshop中非常常用的功能。在Android中，同样可以通过Layer来实现类似Photoshop中图层的概念。

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

    <item
        android:drawable="@mipmap/ic_launcher"
        ></item>

    <item
        android:drawable="@mipmap/ic_launcher"
        android:left="200.0dip"
        android:top="200.0dip"
        android:right="200.0dip"
        android:bottom="200.0dip"
        ></item>

</layer-list>

通过layer、later-list可以很方便地实现Photoshpt中的图层效果，图片依次叠加，效果如图（2）所示。

                                                                                      （2）图层效果

四、Selector

Sleector的作用是帮助开发者实现静态图中的事件反馈，通过给不同的事件设置不同的图形，从而在程序中根据用户输入，返回不同的效果。

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

    <!--默认时的背景图片-->
    <item
        android:drawable="@drawable/X1">
    </item>
    <!--没有焦点时的背景图片-->
    <item
        android:state_window_focused="false"
        android:drawable="@drawable/X2"
        >
    </item>
    <!--非触摸模式下获取焦点并点击时的背景图片-->
    <item
        android:state_focused="true"
        android:state_pressed="true"
        android:drawable="@drawable/X3"
        >
    </item>
    <!--触摸模式下单击时的背景图片-->
    <item
        android:state_focused="false"
        android:state_pressed="true"
        android:drawable="@drawable/X4"
        >
    </item>
    <!--选中时的图片背景-->
    <item
        android:state_selected="true"
        android:drawable="@drawable/X5"
        >
    </item>
    <!--获得焦点时的图片背景-->
    <item
        android:state_focused="true"
        android:drawable="@drawable/X5"
        >

    </item>


</selector>

这一方法可以帮助开发者迅速制作View的触摸反馈。通过配置不同的触发事件，Selector可以自动选择不同的图片，特别是自定义Button的时候，我们就不用是使用原生Button单调的背景，而使用Selector特别定制过的背景。不用在程序中修改点击的逻辑，就能完美的实现触摸反馈。

通常情况下，上面提到的这些方法都是可以共同作用的。下面这个例子就展示了在一个Selector中使用Shape作为它的Item的例子，实现一个具有点击反馈的效果的、圆角矩形的Selector，代码如下所示。

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

    <item
        android:state_pressed="true"
        >
        <shape android:shape="rectangle">
            <!--填充的颜色-->
            <solid android:color="#f00"></solid>
            <!--设置按钮的四个圆角半径-->
            <!--android:radius 弧形的半径-->
            <corners android:radius="5dp"></corners>
            <!--padding: Button里面的文字与Button边界的间隔-->
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"></padding>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <!--填充的颜色-->
            <solid android:color="#ffffff"></solid>
            <!--设置按钮的四个圆角半径-->
            <!--android:radius 弧形的半径-->
            <corners android:radius="5dp"></corners>
            <!--padding: Button里面的文字与Button边界的间隔-->
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"></padding>

        </shape>

    </item>

</selector>

相信通过这个例子大家不仅可以体会到XML绘图的强大，更可以知道各种绘图方法所用的场景和优缺点。