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>