今天我们来一起看看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>