Android xml绘制基本图形

shape使用：
在drawable文件夹下创建xml文件

内容如下：
①绘制类型

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

设置图形为 oval (椭圆形) 还可以设置为 line(线) 、rectangle(矩形)、ring(环形)

通过椭圆来学习用法

②椭圆
设置为oval时，可以设置大小

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    >
    <solid android:color="#00FFFF" />
    <size
        android:height="20dp"
        android:width="20dp"
        />
</shape> 

当设置高度和宽度相同的时候则会显示为圆形。特别要注意的是，当组件调用该drawable作为背景时，组件的长和宽要保持一致背景才会显示为圆形。

③设置填充色
在上面的椭圆绘制中的solid标签即为填充色的配置。

接下来设置边框填充

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <solid android:color="#00FFFF" />
    <size
        android:height="20dp"
        android:width="20dp"
        />
    <stroke
        android:width="2dp"
        android:color="#FFFFFF"
        />
</shape> 

stroke标签用来设置边框。

④当设置为矩形时，可以设置矩形的圆角：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <solid android:color="#00FFFF" />
    <corners android:radius="100dp" />
    <size
        android:height="20dp"
        android:width="20dp"
        />
    <stroke
        android:width="2dp"
        android:color="#000000"
        />
</shape> 

corners标签设置矩形的圆角。

⑤设置颜色渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <solid android:color="#00FFFF" />
    <corners android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp"   />
    <size
        android:height="20dp"
        android:width="20dp"
        />
    <gradient
        android:startColor="#000000" android:endColor="#FFFFFFFF" android:angle="270"
        />
    <stroke
        android:width="2dp"
        android:color="#000000"
        />
</shape> 

设置了颜色从黑色到白色的渐变，android:angle=”270”设置了旋转角度为270度。

android:angle=”270”设置了旋转角度为270度。 的理解：
当angle设置为0时，黑色到白色的渐变是从左到右的。旋转度数为 渐变色逆时针旋转的度数。

1. layer-list使用

layer-list可以将上述绘制的图形整合到一起，拼接各个item

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

    <item>
        <shape>
            <corners android:radius="26dp" />
            <solid android:color="@color/white" />
            <size android:width="52dp"
                android:height="52dp"/>
            <stroke android:width="1dp" android:color="@color/bg_grey"/>
        </shape>
    </item>
    <item android:top="8dp">
        <shape>
            <solid android:color="@color/white" />
            <size android:width="52dp" android:height="26dp"/>
        </shape>
    </item>
</layer-list>

第一个shape是一个圆，第二个是一个长方形。两个图形重叠在一起。形成长方形上边拱形。

变换图形使用
比如矩形我们希望他根据中心点旋转一下，比如这样

xml代码如下：

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

    <!--加left和right是因为 对角线长度是比边长长的-->
    <item
        android:width="12dp"
        android:height="12dp"
        android:left="12dp"
        android:right="20dp"
        android:gravity="bottom|center"
        >
        <!--fromDegrees:动画进入时旋转的角度
        pivotX：旋转中心点X轴位置
        toDegrees：动画结束时旋转的角度-->
        <rotate
            android:fromDegrees="45"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@color/g_white" />
                <size
                    android:width="24dp"
                    android:height="24dp" />
            </shape>
        </rotate>
    </item>
</layer-list>

再比如这样：

xml代码：

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

    <item
        android:bottom="6dp"
        android:width="12dp"
        android:height="12dp"
        android:gravity="bottom|center"
        >
        <rotate
            android:fromDegrees="45"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@color/g_white" />
                <size
                    android:width="24dp"
                    android:height="24dp" />
            </shape>
        </rotate>
    </item>

    <item android:bottom="12dp">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="@color/g_white" />
            <size
                android:width="40dp"
                android:height="40dp" />
        </shape>
    </item>
</layer-list>

一些UI的背景图，可以用这种方式实现。

不要说什么照UI要个.9图就好了，记住能自己解决的事情，别去麻烦别人。

关于边框只显示特定的边问题
有时候我们需要只有上边和下边有边框的效果，但是发现stroke不能设置位置，即一旦设置就是四个边框都绘制了。
叠加的方式，将不需要显示的边框遮住

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

        <shape
            android:shape="rectangle"
            >
            <solid
                android:color="@color/g_white"
                />
            <stroke
                android:width="1dp"
                android:color="@color/g_title_bg"
                />

        </shape>

    </item>

    <item
        android:top="1dp"
        android:bottom="1dp"
        >
        <shape
            android:shape="rectangle"
            >
            <solid
                android:color="@color/g_white"
                />
        </shape>
    </item>
</layer-list>

其中第二个item上下设置了距离，该距离与第一个item的stroke width一致。即挡住了第一个item左右两边的边框，漏出了上下边框