开头
Android中的Drawable不仅仅可以用图片,还可以用一些xml来描述,实现某些效果。
比较常见有Selector、Shape、Layer-list、Vector
Selector
用于在不同状态时显示不同的图像。
主要状态如下:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable=""/>
<item android:state_focused="true" android:drawable=""/>
<item android:state_enabled="true" android:drawable=""/>
<item android:state_pressed="true" android:drawable=""/>
<item android:state_selected="true" android:drawable=""/>
<item android:state_window_focused="true" android:drawable=""/>
<item android:state_checked="true" android:drawable=""/>
</selector>
最上面四个使用比较频繁。
android:state_selected 选中
android:state_focused 获得焦点
android:state_pressed 点击
android:state_enabled 设置是否响应事件,指所有事件
有时候会出现单独是否android:state_pressed="true" 无效的情况,这时候可以尝试把normal的图片设置属性android:state_pressed="false"
Shape
可以用来画矩形,圆角矩形,用起来比较方便,做简单背景什么的可以不用UI作图了。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 圆角 -->
<corners android:radius="10dp"/>
<!-- 渐变 -->
<gradient android:type="linear"
android:startColor="#ff0000ff"
android:endColor="#ff00ff00"/>
<!-- 内边距 -->
<padding
android:left="2dp"
android:right="2dp"
android:top="2dp"
android:bottom="2dp"/>
<size android:width="50dp"
android:height="50dp"/>
<!-- 填色
和渐变只能用一个-->
<solid android:color="#ffff0000"/>
<!-- 描边 -->
<stroke android:width="2dp"
android:color="#ff033333"
android:dashWidth="3dp"
android:dashGap="2dp"/>
</shape>
Ripple
涟漪;点击时的水波纹;
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/mask_color"
>
<item>
<shape
android:shape="rectangle">
<solid android:color="#D9DCE4"/>
<corners android:radius="5dp"/>
</shape>
</item>
</ripple>
Layer-list
图片集,层叠式的,可以设置上下左右的边距。
完成图片组合,做阴影之类的都不错。
和上面的的Shape常常被一起使用。
animation-list
动画,可以直接用start播放;
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_fp_0" android:duration="80"/>
<item android:drawable="@drawable/ic_fp_1" android:duration="80"/>
<item android:drawable="@drawable/ic_fp_2" android:duration="80"/>
<item android:drawable="@drawable/ic_fp_3" android:duration="80"/>
<item android:drawable="@drawable/ic_fp_4" android:duration="80"/>
<item android:drawable="@drawable/ic_fp_5" android:duration="80"/>
</animation-list>
((AnimationDrawable)icon.getDrawable()).start();
((AnimationDrawable)icon.getDrawable()).stop();
Vector(矢量图)
这东西比较复杂,主要是SVG算法不好搞。一般来说,SVG图片是UI提供的,然后身为程序猿的我们主要通过AS转换成XML就够了。Vector的一个好处就是可以自己改代码设置大小,还能兼容多分辨率,不怕拉伸。
下面是画哭脸的代码。
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
<!-- size of the drawable -->
android:width="200dp"
android:height="200dp"
<!-- size of the virtual canvas -->
android:viewportWidth="200"
android:viewportHeight="200">
<path
android:fillColor="#ffff00"
android:pathData="M50,50 m-48,0 a48,48 0 1,0 96,0 a48,48 0 1,0 -96,0"/>
<path
android:fillColor="@android:color/black"
android:pathData="M35,40 m-7,0 a7,7 0 1,0 14,0 a7,7 0 1,0 -14,0"/>
<path
android:fillColor="@android:color/black"
android:pathData="M65,40 m-7,0 a7,7 0 1,0 14,0 a7,7 0 1,0 -14,0"/>
<path
android:name="mouth"
android:strokeColor="@android:color/black"
android:strokeWidth="4"
android:strokeLineCap="round"
android:pathData="M30,75 Q50,55 70,75"/>
</vector>
大概记一下里面用的一些属性,要实际使用的时候网上再查。
每画一笔都是一个path。
fillColor填充的颜色,strokeColor线的颜色。这里画嘴巴用的就是线。
pathData,要画的内容。
内容涉里面有些语法,www.w3.org/TR/SVG11/paths.html#PathData
大概提下,如下。
其中每个语法都有大小写,大写绝对位置,小写相对上次位置。
M/m(x,y):把画笔移动x,y,装备从这里开始画
Z/z:闭合。差不多就是把起点和终点连接起来的意思。
L/l(x,y): 画直线连接到x,y
H/h(x):画直线水平连接到x
V/v(y):画直线竖直连接到y
C/c(x1 y1 x2 y2 x y):控制点x1 y1 x2 y2,终点x y。三次贝塞尔曲线
S/s(x2 y2 x y):控制点x2 y2, 终点x y。三次贝塞尔曲线
Q/q(x1 y1 x y):控制点x1 y1,终点x y。两次贝塞尔曲线
T/t(x y):终点x y。两次贝塞尔曲线
A/a(rx ry x-axis-rotation large-arc-flag sweep-flag x y):
rx ry:椭圆半径
x-axis-rotation: x轴旋转角度
large-arc-flag:为0时表示取小弧度,为1时取大弧度
sweep-flag: 0取逆时针方向,1取顺时针方向。
x y:终点。
Vector动画
这是一个更高阶使用了,暂时没用到,需要有想法的UI一起配合,GOOGLE官方有demo,看起来很酷炫。