前言
一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字大小和颜色、阴影等等。web的样式用css来定义,而android的样式主要则是通过shape、selector、layer-list、level-list、style、theme等组合实现。
本文参考Keegan小钢的文章,通过自己实践进行总结。
shape
shape是Android最基础的形状定义工具。一般用shape定义的xml文件存放在drawable目录下,若项目没有该目录则新建一个,而不要将它放到drawable-hdpi等目录中。
使用shape可以自定义形状,可以定义下面四种类型的形状,通过android:shape属性指定:
rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
oval: 椭圆形,用得比较多的是画正圆
line: 线形,可以画实线和虚线
ring: 环形,可以画环形进度条
下面将对每个形状进行总结。
rectangle(矩形)
rectangle是默认的形状,也是用得最多的形状,可用于文字背景、按钮背景、控件或布局背景等,以下是一些简单的例子:
相关特性:
- solid
设置形状填充的颜色,只有android:color一个属性
<solid android:color="#1C86EE"/>
- padding
设置内容与形状边界的内间距,可分别设置左右上下的距离
<padding
android:left="10dp"
android:right="10dp"
android:top="10dp"
android:bottom="10dp"/>
- gradient
设置形状的渐变颜色,可以是线性渐变、辐射渐变、扫描性渐变。
android:type 渐变的类型
linear 线性渐变,默认的渐变类型
radial 放射渐变,设置该项时,android:gradientRadius也必须设置
sweep 扫描性渐变
android:startColor 渐变开始的颜色
android:endColor 渐变结束的颜色
android:centerColor 渐变中间的颜色
android:angle 渐变的角度,线性渐变时才有效,必须是45的倍数,0表示从左到右,90表示从下到上
android:centerX 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:gradientRadius 渐变的半径,只有渐变类型为radial时才使用
android:useLevel 如果为true,则可在LevelListDrawable中使用
示例:
<gradient android:type="linear"
android:startColor="#FFFFFF"
android:centerColor="#CAE1FF"
android:endColor="#1C86EE"
android:angle="90"
android:useLevel="false"/>
- corners
设<corners android:radius="200dp"/>置圆角,只适用于rectangle类型,可分别设置四个角不同半径的圆角,当设置的圆角半径很大时,比如200dp,就可变成弧形边了。
android:radius 圆角半径,会被下面每个特定的圆角属性重写
android:topLeftRadius 左上角的半径
android:topRightRadius 右上角的半径
android:bottomLeftRadius 左下角的半径
android:bottomRightRadius 右下角的半径
示例:
<corners android:radius="200dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
- stroke
设置描边,可描成实线或虚线。
android:color 描边的颜色
android:width 描边的宽度
android:dashWidth 设置虚线时的横线长度
android:dashGap 设置虚线时的横线之间的距离
示例:
<stroke android:color="#000000"
android:width="2dp"
android:dashWidth="8dp"
android:dashGap="8dp"/>
</shape>
“加了实线描边的矩形”示例:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#1C86EE"/>
<corners android:radius="200dp"/>
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"/>
<stroke
android:width="2dp"
android:color="#000000"
android:dashGap="8dp"
android:dashWidth="8dp"/>
</shape>
未完待续。。。