Android 形状图形

今天我们来一起看看android中一种用来描述形状定义的xml图形文件-shape图形。
形状图形的定义文件以shape元素为根节点。在我们初始创建好的xml文件中，应该是这个样子的，只有根节点shape。

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

</shape>

shape是该类型xml文档的根节点，用来描述该形状图形是那种几何图形，下面是shapge节点经常用到的属性说明。

rectangle：矩形，同时也是shape的默认值
oval：椭圆，此时corners节点会失效的
line：直线。此时必须设置stroke节点，没有边框可定不会有线的效果，不设置当然会出错了
ring：圆环

首先让我们呢看下四种不同设置的显示效果。

1.ring

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring"
    android:innerRadius="15dp"
    android:thickness="5dp"
    android:useLevel="false">
    <stroke android:width="1dp"/>
</shape>

2.rectangle

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

3.line

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="1dp"/>
</shape>

4.oval

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

上面是shape四种几何形状类型，下面我们在一一看下shape的子节点都有哪些，分别是做什么用的。

1.corners
corners是shape的下级节点，它是用来描述四个角的规格定义，如果没有设置，则表示这个形状是没有圆角效果的。它呢又有下面的属性可以让我们设置

当然了设置出来的效果是很难看的，这里写不同的值是想说这些值是可以取不同值的。

2.size
size是shape的子节点，用来描述形状图形的尺寸大小，如果没有size节点，表示宽高是自适应的。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="1dp"/>
    <corners android:radius="5dp" />
    <size android:width="50dp" android:height="50dp"/>
</shape>

width：像素类型，图形的宽度
height：像素类型，图形的高度

3.solid
solid是shape的子节点，用来描述形状图形的内部填充色。如果没有solid节点，表示无填充色。
它的属性就一个color：颜色类型，内部填充的颜色。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="1dp"/>
    <corners android:radius="5dp" />
    <size android:width="50dp" android:height="50dp"/>
    <solid android:color="#5dc5dc"/>
</shape>

4.stroke
stroke是shap的子节点，用来描述形状图形四周边线的规格定义。如果没有stroke节点，则表示不存在描边。

5.padding
用来描述形状图形与周围视图的间隔大小。如果没有padding节点，表示于四周不设间隔。
常用属性：
bottom：与下边的距离
top：与上边的距离
left：与左边的距离
right：与右边的距离

让我们先来看看不设padding的显示效果：

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

</shape>

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.easygoing.androidshapes.MainActivity">

    <TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/tv_shape_drawable"
        android:text="Hello World！"
        />

</LinearLayout>

显示效果：

然后我们加padding

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <stroke android:width="1dp"/>
    <padding android:top="10dp" android:right="10dp" android:left="10dp" android:bottom="10dp"/>
</shape>

显示效果如下：

6.gradien
用来描述形状内部颜色的渐变定义。如果没有gradien节点，表示没有渐变效果，下面是gradien的常用属性说明

angle：整形，渐变的起始角度。为0时表示时钟的九点位置，值变大的时候表示朝着逆时针方向旋转。
值为90时表示时钟的6点位置，180：3点钟位置 270：0/12点钟位置

type：渐变类型，常用的有下面三种
*linear：线性渐变，默认值
*radial：放射渐变，其实颜色是圆心颜色
*sweep：滚动渐变，即一个线段以某个端点为圆心做360度旋转

centerX:圆心X坐标， type=linear时不可用
centerY:圆心Y坐标，type=linear时不可用
gradientRadius：渐变的半径，当type=radial时需要设置该属性
centerColor：渐变的中间色
startColor：渐变的起始颜色
endColor：渐变的终止颜色
useLevel:值为true时表示无渐变色，false时有渐变色

<?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="80dp"
    android:thickness="10dp">
  <gradient android:useLevel="false"
      android:type="sweep"
      android:startColor="#6BD3FF"
      android:centerColor="#FF7121"
      android:centerY="0.50"
      android:endColor="#FFFF00"/>
</shape>

显示效果：

当然这里我修改了下页面布局来显示这个效果��

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.easygoing.androidshapes.MainActivity">

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:background="@drawable/tv_shape_drawable"
        android:text="Hello World！" />

</LinearLayout>