shape可以定义一个View空间的,圆角,边框,padding,大小,填充颜色,渐变颜色。
shape定义
1 新建文件
shape属于drawable资源文件,根元素为shape,需要在drawable目录下新建一个Drawable Resuorce File,如下图,设置自己的shape的名字和根元素的,这里根元素要定义为shape,文件名自己随意定义,我也定义为了shape。
然后在drawable出现一个xml文件,就是你定义的文件名.xml。我这里就为shape.xml。
2 定义shape中的内容
2.1 shape的属性
在android:shape中定义shape的属性,即shape是什么形状的。有四种:
rectangle(矩形)
oval(椭圆形)
ring(圆形)
line(线形)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
2.2 shape中的标签
shape中共有6中标签
corner:定义圆角
solid:定义内部填充色
stroke:定义边框
padding:定义padding
size:定义控件大小
gradient:定义控件内部的渐变颜色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--定义矩形的圆角,从上到下分别为定义所有的圆角,上下左右四个角的圆角
如果下面四个都定义了,则第一个定义会被自动忽略。
此属性只有在shape为rectangle时才会生效
-->
<corners
android:radius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
/>
<!--此属性定义边框,width为边框的宽度,color为颜色
dashWidth和dashGap定义虚线
dashWidth为虚线的每个条的长度
dashGap为两个虚线点之间间隔的长度
-->
<stroke
android:width="1sp"
android:color="@color/colorAccent"
android:dashGap="1sp"
android:dashWidth="1sp"/>
<!--此属性定义形状内部的填充色,只有一个color属性-->
<solid
android:color="@color/colorAccent"/>
<!--此属性定义内部的东西与外部的距离-->
<padding
android:bottom="5dp"
android:left="5sp"
android:right="5dp"
android:top="5dp"/>
<!--此属性定义形状的大小,如果使用shape的元素也定义了长宽,则size被设置为外部元素定义的长宽-->
<size
android:width="20sp"
android:height="20sp"/>
<!--gradient定义渐变-->
<gradient
android:type="linear"
android:startColor="#FFB6C1"
android:centerColor="#FF1493"
android:endColor="#4B0082"
android:angle="45"
/>
</shape>
上面的代码展示了各种标签的使用,前5种标签没什么其他可说的,再单独说一下gradient标签
gardient标签定义内部颜色的渐变。
<b>gradient的属性:</b>
type:有三种可选项,分别为linear(线性渐变),radial(圆形渐变),sweep(扫描式渐变),三种类型分别对应着不同的属性。
三种渐变公用的属性
startColor:定义渐变的起始演示
centerColor:定义渐变的中间颜色
endColor:定义渐变的结束颜色
linear渐变单独的属性
angle:定义渐变的角度,必须为45的整数倍,不能加单位
radial渐变单独的属性
gradienRadius:定义渐变的圆的半径,float类型,不能加单位
centerX,cneterY:0到1之间的数字,定义圆心的位置,值是圆心相对于整体的比例。float类型。不能加单位
sweep渐变单独的属性
centerX,cneterY:0到1之间的数字,定义扫描的中心点,值是扫描的中心点相对于整体的比例。float类型。不能加单位
举例说明
<!--linear渐变,定义三个颜色分别为红黄蓝,角度为0-->
<gradient
android:type="linear"
android:startColor="#FF0000"
android:centerColor="#FFFF00"
android:endColor="#0000FF"
android:angle="0"
/>
<!--linear渐变,定义三个颜色分别为红黄蓝,角度为45度-->
<gradient
android:type="linear"
android:startColor="#FF0000"
android:centerColor="#FFFF00"
android:endColor="#0000FF"
android:angle="45"
/>
<!--radial渐变,定义三个颜色分别为红黄蓝,半径为100-->
<gradient
android:type="radial"
android:startColor="#FF0000"
android:centerColor="#FFFF00"
android:endColor="#0000FF"
android:gradientRadius="100"
/>
<!--sweep渐变,定义三个颜色分别为红黄蓝,中心为0.5,0.5-->
<gradient
android:type="radial"
android:startColor="#FF0000"
android:centerColor="#FFFF00"
android:endColor="#0000FF"
android:centerX="0.5"
android:centerY="0.5"
/>
</shape>
2.3 不同属性的区别
rectangle:6种标签都有效果,如果不指定android:shape,则默认为rectangle
oval:corners标签对它没有效果,其他的都有效果
line:line只是一条线,用处不大,一般可以用作分割线,stroke和size标签对其有作用。size定义line所处的外层的长和宽,shroke定义线的粗细和颜色等,line只能是水平的,而且位于外层定义的框的中间。
引用虚线的view需要添加属性android:layerType,值设为"software",否则显示不了虚线。
ring:除了corner标签,其他的标签对它都有效果。除此之外,ring还有一些自己的属性。
innerRadius:内环半径
innerRadiusRatio:浮点型,内环半径的大小为size或外层元素的宽的值除以这个值得到的结果。(如果外层元素和size不同,则size默认被设置为外层元素中的值,例如该shape用于一个TextView中,TextView定义了自己的长宽)例如该值为3,size的宽度为90sp,则内环半径为90/3=30sp。如果定义了innerRadius,则此属性被覆盖,没有任何效果。
thickness:定义环的宽度
thicknessRatio:也是定义环的宽度,和innerRadiusRatio一样。
useLevel:这个值被设置为false时,环才会显示,要显示圆环,必须设置此值为false。
<?xml version="1.0" encoding="utf-8"?>
<!--定义了内环半径为size/4,环厚度为size/4-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="4"
android:thicknessRatio="4"
android:useLevel="false">
<size
android:width="50sp"
android:height="50sp"/>
<stroke
android:width="2sp"
android:color="#000000"
/>
<solid
android:color="#FF0000"/>
<gradient
android:type="linear"
android:startColor="#FF0000"
android:centerColor="#FFFF00"
android:endColor="#0000FF"
android:angle="45"
/>
</shape>
显示出来的图是这样的
说明几点:
1 内环就是空白的,所有的颜色都在定义的thickness厚度的里面显示
2 如果定义了边框,则内环外环都会有边框。
shape的使用
有了这么多类型的shape,现在需要把shape用在具体的控件中了,它其实就是drawable类型的资源文件,所以可以用在所有需要使用图片的地方,就像使用图片一样来使用它。先来说几种常用场景。
1 直接用于view控件
所有的view控件都可以应用shape
分为两类image类和非image类。
image类:让其src=@drawable/xml文件的名
非image类:让其background=@drawable/xml文件的名
前面已经定义了一个shape.xml,现在来使用
<EditText
android:layout_width="150sp"
android:layout_height="150sp"
style="@style/Text"
android:background="@drawable/shape"
android:text="dddd"/>
2 用于selector中
详情参见selector那篇文章。
3 用于layer-list中
详情参见layer-list那篇文章。
不足之处请指正。