android 中一些代码实现的Drawable资源

开头

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>

Layer-list

图片集,层叠式的,可以设置上下左右的边距。

完成图片组合,做阴影之类的都不错。

和上面的的Shape常常被一起使用。

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,看起来很酷炫。

猜你喜欢

转载自blog.csdn.net/weixin_39821531/article/details/88739720