Android的Drawable

Author Avatar
罗炜光 7月 19, 2016
  • 在其它设备中阅读本文章

Drawable汇总

  • animated-rotate
  • animated-selector
  • animated-vector
  • animation-list
  • bitmap
  • clip
  • color
  • inset
  • layer-list
  • level-list
  • nine-patch
  • ripple
  • rotate
  • scale
  • selector
  • shape
  • transition
  • vector

animated-rotate

rotate标签只是将原有的drawable转个角度变成另一个drawable,它是静态的。而animated-rotate则会让drawable不停地做旋转动画。

  • android:drawable 指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
  • android:pivotX 旋转中心的X坐标
  • android:pivotY 旋转中心的Y坐标
  • android:visible 设置初始的可见性状态,默认为false

animated-selector

  • item
  • transition
    • android:fromId 设置起始状态id
    • android:toId 设置结束状态id

animated-vector

  • android:drawable 执行动画的vector图片
  • target
    • android:animation 执行的动画
    • android:name 执行动画的部件,即vector中group的android:name属性

开始动画

 ((Animatable) drawable).start();

animation-list

通过animation-list可以将一系列drawable构建成帧动画,就是将一个个drawable,一帧一帧的播放

  • android:oneshot属性设置是否循环播放,设为true时,只播放一轮就结束,设为false时,则会轮询播放。
  • android:duration属性设置该帧持续的时间,以毫秒数为单位。

animation-list对应的Drawable类为AnimationDrawable,要让动画运行起来,需要主动调用AnimationDrawable的start()方法。另外,如果在Activity的onCreate()方法里直接调用start()方法会没有效果,因为view还没有初始化完成是播放不了动画的。

bitmap

图片是最常用的drawable资源,格式包括:png(推荐)、jpg(可接受)、gif(不建议)。用图片资源需要根据不同屏幕密度提供多张不同尺寸的图片,它们的关系如下表:

密度分类 密度值范围 代表分辨率 图标尺寸 图片比例
mdpi 120~160dpi 320x480px 48x48px 1
hdpi 160~240dpi 480x800px 72x72px 1.5
xhdpi 240~320dpi 720x1280px 96x96px 2
xxhdpi 320~480dpi 1080x1920px 144x144px 3
xxxhdpi 480~640dpi 1440x2560px 192x192px 4

本来还有一个ldpi的,但现在这种小屏幕的设备基本灭绝了,所以不需要再考虑适配。如上表所示,一套图片一般需要提供5张不同比例的图片。还好有切图工具,可以让切图变得简单,这里推荐两款:Cutterman和Cut&Slice me,都是Photoshop下的插件,输出支持android、ios和web三种平台。
使用切图工具虽然方便了,但还是无法避免一套图片需要提供多张不同尺寸的图片,这会加大安装包的大小。另外,需要对图片做改动时,比如换个颜色,必须更换所有尺寸图片。所以,建议尽量减少引入图片,而通过使用shape、layer-list等自己画,易于修改和维护,也减少了安装包大小,适配性也更好。

  • android:src 图片资源id
  • android:alpha 设置图片的透明度,取值范围为0.0~1.0之间,0.0为全透明,1.0为全不透明,API Level最低要求是11,即Android 3.0
  • android:autoMirrored 图片是否需要镜像反转,当布局方向是RTL,即从右到左布局时才有用,API Level 19(Android 4.4)才添加的属性
  • android:antialias 是否开启抗锯齿.开启后会让图片变得平滑,同时也会在一定程度上降低图片的清晰度,但是这个降低的幅度较低以至于可以忽略,因此抗锯齿选项应该开启。
  • android:dither 是否开启抖动效果,当图片的像素配置和手机屏幕的像素配置不一致时,开启这个选项可以让高质量的图片在低质量的屏幕上还能保持较好的显示效果,一般情况下应该开启
  • android:filter 是否开启过滤效果,对图片尺寸被拉伸或者压缩时,开启过滤效果可以保持较好的显示效果
  • android:gravity 设置图片的对齐方式
    |可选项|含义|
    |–|–|
    |top|图片放于容器顶部,不改变图片大小|
    |bottom|图片放于容器底部,不改变图片大小|
    |left|图片放于容器左边,不改变图片大小|
    |right|图片放于容器右边,不改变图片大小|
    |center|图片放于容器中心位置,包括水平和垂直方向,不改变图片大小|
    |fill|拉伸整张图片以填满容器的整个高度和宽度,默认值|
    |center_vertical|图片放于容器垂直方向的中心位置,不改变图片大小|
    |center_horizontal|图片放于容器水平方向的中心位置,不改变图片大小|
    |fill_vertical|在垂直方向上拉伸图片以填满容器的整个高度|
    |fill_horizontal|在水平方向上拉伸图片以填满容器的整个宽度|
    |clip_vertical|附加选项,裁剪基于垂直方向的gravity设置,设置top时会裁剪底部,设置bottom时会裁剪顶部,其他情况会同时裁剪顶部和底部|
    |clip_horizontal |附加选项,裁剪基于水平方向的gravity设置,设置left时会裁剪右侧,设置right时会裁剪左侧,其他情况会同时裁剪左右两侧|
  • android:mipMap 一种图片相关的处理技术,也叫纹理映射,默认值为false,但API Level最低要求是17,即Android 4.2
  • android:tileMode 设置图片平铺的方式,取值为下面四种之一:
取值 说明
disable 不做任何平铺,默认设置
repeat 图片重复铺满
mirror 使用交替镜像的方式重复图片的绘制
clamp 复制图片边缘的颜色来填充容器剩下的空白部分,比如引入的图片如果是白色的边缘,那么图片所在的容器里除了图片,剩下的空间都会被填充成白色
  • android:tileModeX 和tileMode一样设置图片的平铺方式,只是这个属性只设置水平方向的平铺方式,这是API Level 21(Android 5.0)才添加的属性
  • android:tileModeY 和tileMode一样设置图片的平铺方式,只是这个属性只设置垂直方向的平铺方式,这是API Level 21(Android 5.0)才添加的属性
  • android:tintMode 着色模式,也是API Level 21(Android 5.0)才添加的属性

clip

使用clip标签可以对drawable进行裁剪,在做进度条时很有用。通过设置level值控制裁剪多少,level取值范围为0~10000,默认为0,表示完全裁剪,图片将不可见;10000则完全不裁剪,可见完整图片。

  • android:drawable 指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
  • android:clipOrientation 设置裁剪的方向
    |值|说明|
    |–|–|
    |horizontal|在水平方向上进行裁剪,条状的进度条就是水平方向的裁剪在垂直方向上进行裁剪|
    |vertical|在垂直方向上进行裁剪|
  • android:gravity 设置裁剪的位置,可取值如下,多个取值用 | 分隔:
说明
top 图片放于容器顶部,不改变图片大小。当裁剪方向为vertical时,会裁掉图片底部
bottom 图片放于容器底部,不改变图片大小。当裁剪方向为vertical时,会裁掉图片顶部
left 图片放于容器左边,不改变图片大小,默认值。当裁剪方向为horizontal,会裁掉图片右边部分
right 图片放于容器右边,不改变图片大小。当裁剪方向为horizontal,会裁掉图片左边部分
center 图片放于容器中心位置,包括水平和垂直方向,不改变图片大小。当裁剪方向为horizontal时,会裁掉图片左右部分;当裁剪方向为vertical时,会裁掉图片上下部分
fill 拉伸整张图片以填满容器的整个高度和宽度。这时候图片不会被裁剪,除非level设为了0,此时图片不可见
center_vertical 图片放于容器垂直方向的中心位置,不改变图片大小。裁剪和center时一样
center_horizontal 图片放于容器水平方向的中心位置,不改变图片大小。裁剪和center时一样
fill_vertical 在垂直方向上拉伸图片以填满容器的整个高度。当裁剪方向为vertical时,图片不会被裁剪,除非level设为了0,此时图片不可见
fill_horizontal 在水平方向上拉伸图片以填满容器的整个宽度。当裁剪方向为horizontal时,图片不会被裁剪,除非level设为了0,此时图片不可见
clip_vertical 附加选项,裁剪基于垂直方向的gravity设置,设置top时会裁剪底部,设置bottom时会裁剪顶部,其他情况会同时裁剪顶部和底部
clip_horizontal 附加选项,裁剪基于水平方向的gravity设置,设置left时会裁剪右侧,设置right时会裁剪左侧,其他情况会同时裁剪左右两侧

设置level呢?android没有提供直接在xml里设置level的属性,这需要通过代码去设置。举例用法如下:

ImageView img =  (ImageView) findViewById(R.id.img);
img.getDrawable().setLevel(5000); //level范围值0~10000

color

color标签是drawable里最简单的标签了,只有一个属性:android:color,指定颜色值。这个标签一般很少用,因为基本都可以通过其他更方便的方式定义颜色。

inset

使用inset标签可以对drawable设置边距,其用法和View的padding类似,只不过padding是设置内容与边界的距离,而inset则可以设置背景drawable与View边界的距离。

  • android:drawable 指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
  • android:visible 设置初始的可见性状态,默认为false
  • android:insetLeft 左边距
  • android:insetRight 右边距
  • android:insetTop 顶部边距
  • android:insetBottom 底部边距
  • android:inset 设置统一边距,会覆盖上面四个属性,但API Level要求为21,即Android 5.0

layer-list

layer-list可以将多个drawable按照顺序层叠在一起显示

layer-list可以作为根节点,也可以作为selector中item的子节点。layer-list可以添加多个item子节点,每个item子节点对应一个drawable资源,按照item从上到下的顺序叠加在一起,再通过设置每个item的偏移量就可以看到阴影等效果了。layer-list的item可以通过下面四个属性设置偏移量

  • android:top 顶部的偏移量
  • android:bottom 底部的偏移量
  • android:left 左边的偏移量
  • android:right 右边的偏移量

level-list

当需要在一个View中显示不同图片的时候,比如手机剩余电量不同时显示的图片不同,level-list就可以派上用场了。level-list可以管理一组drawable,每个drawable设置一组level范围,最终会根据level值选取对应的drawable绘制出来。level-list通过添加item子标签来添加相应的drawable,其下的item只有三个属性:

  • android:drawable 指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
  • android:minLevel 该item的最小level值
  • android:maxLevel 该item的最大level值

item的匹配规则是从上到下的,当设置的level值与前面的item的level范围匹配,则采用。一般item的添加按maxLevel从小到大排序下来,此时minLevel可以不用指定也能匹配到。

设置切换

ImageView img =  (ImageView) findViewById(R.id.img);
img.getDrawable().setLevel(5000); //level范围值0~10000

nine-patch

使用nine-patch标签可以对点九图片做一些设置处理

  • android:src 必填项,必须指定点九类型的图片
  • android:dither 设置是否抖动,图片与屏幕的像素配置不同时会用到,比如图片是ARGB 8888的,而屏幕是RGB565
  • android:tint 给图片着色,比如图片本来是黑色的,着色后可以变成白色
  • android:tintMode 着色模式,API Level 21(Android 5.0)才添加的属性
  • android:alpha 设置图片的透明度,取值范围为0.0~1.0之间,0.0为全透明,1.0为全不透明,API Level最低要求是11
  • android:autoMirrored 设置图片是否需要镜像反转,当布局方向是RTL,即从右到左布局时才有用,API Level 19(Android 4.4)才添加的属性

ripple

波纹效果

  • android:color 更改默认的触摸反馈颜色

rotate

使用rotate标签可以对一个drawable进行旋转操作

  • android:drawable 指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
  • android:fromDegrees 起始的角度度数
  • android:toDegrees 结束的角度度数,正数表示顺时针,负数表示逆时针
  • android:pivotX 旋转中心的X坐标,浮点数或是百分比。浮点数表示相对于drawable的左边缘距离单位为px,如5; 百分比表示相对于drawable的左边缘距离按百分比计算,如5%; 另一种百分比表示相对于父容器的左边缘,如5%p; 一般设置为50%表示在drawable中心
  • android:pivotY 旋转中心的Y坐标
  • android:visible 设置初始的可见性状态,默认为false

要让它可以旋转,还需要设置level值。level取值范围为0~10000,应用到rotate,则与fromDegrees~toDegrees相对应,如上面例子的角度范围为0~180,那么,level取值0时,则旋转为0度;level为10000时,则旋转180度;level为5000时,则旋转90度。因为level默认值为0,所以图片没有转变。那么,我们想转180度,其实可以将fromDegrees设为180,而不设置toDegrees,这样,不用再在代码里设置level图片就可以旋转180了。

scale

使用scale标签可以对drawable进行缩放操作,和clip一样是通过设置level来控制缩放的比例。

  • android:drawable 指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
  • android:scaleHeight 设置可缩放的高度,用百分比表示,格式为XX%,0%表示不做任何缩放,50%表示只能缩放一半
  • android:scaleWidth 设置可缩放的宽度,用百分比表示,格式为XX%,0%表示不做任何缩放,50%表示只能缩放一半
  • android:scaleGravity 设置drawable缩放后的位置,取值和bitmap标签的一样,就不一一列举说明了,不过默认值是left
  • android:useIntrinsicSizeAsMinimum 设置drawable原有尺寸作为最小尺寸,设为true时,缩放基本无效,API Level最低要求为11

设置属性

ImageView img =  (ImageView) findViewById(R.id.img);
img.getDrawable().setLevel(5000); //level范围值0~10000

selector

selector标签,可以添加一个或多个item子标签,而相应的状态是在item标签中定义的。定义的xml文件可以作为两种资源使用:drawable和color。作为drawable资源使用时,一般和shape一样放于drawable目录下,item必须指定android:drawable属性;作为color资源使用时,则放于color目录下,item必须指定android:color属性

  • android:state_enabled: 设置触摸或点击事件是否可用状态,一般只在false时设置该属性,表示不可用状态
  • android:state_pressed: 设置是否按压状态,一般在true时设置该属性,表示已按压状态,默认为false
  • android:state_selected: 设置是否选中状态,true表示已选中,false表示未选中
  • android:state_checked: 设置是否勾选状态,主要用于CheckBox和RadioButton,true表示已被勾选,false表示未被勾选
  • android:state_checkable: 设置勾选是否可用状态,类似state_enabled,只是state_enabled会影响触摸或点击事件,而state_checkable影响勾选事件
  • android:state_focused: 设置是否获得焦点状态,true表示获得焦点,默认为false,表示未获得焦点
  • android:state_window_focused: 设置当前窗口是否获得焦点状态,true表示获得焦点,false表示未获得焦点,例如拉下通知栏或弹出对话框时,当前界面就会失去焦点;另外,ListView的ListItem获得焦点时也会触发true状态,可以理解为当前窗口就是ListItem本身
  • android:state_activated: 设置是否被激活状态,true表示被激活,false表示未激活,API Level 11及以上才支持,可通过代码调用控件的setActivated(boolean)方法设置是否激活该控件
  • android:state_hovered: 设置是否鼠标在上面滑动的状态,true表示鼠标在上面滑动,默认为false,API Level 14及以上才支持
  • android:enterFadeDuration 状态改变时,新状态展示时的淡入时间,以毫秒为单位,API Level 11及以上才支持
  • android:exitFadeDuration 状态改变时,旧状态消失时的淡出时间,以毫秒为单位,API Level 11及以上才支持

item是从上往下匹配的,如果匹配到一个item那它就将采用这个item,而不是采用最佳匹配的规则;所以设置默认的状态,一定要写在最后,如果写在前面,则后面所有的item都不会起作用了

关于ListView的ListItem样式,有两种设置方式,一种是在ListView标签里设置android:listSelector属性,另一种是在ListItem的布局layout里设置android:background。但是,这两种设置的结果却有着不同。同时,使用ListView时也有些其他需要注意的地方,总结如下:

android:listSelector设置的ListItem默认背景是透明的,不管你在selector里怎么设置都无法改变它的背景。所以,如果想改ListItem的默认背景,只能通过第二种方式,在ListItem的布局layout里设置android:background。
当触摸点击ListItem时,第一种设置方式下,state_pressed、state_focused和state_window_focused设为true时都会触发,而第二种设置方式下,只有state_pressed会触发。
当ListItem里有Button或CheckBox之类的控件时,会抢占ListItem本身的焦点,导致ListItem本身的触摸点击事件会无效。那么,要解决此问题,有三种解决方案:
将Button或CheckBox换成TextView或ImageView之类的控件
设置Button或CheckBox之类的控件设置focusable属性为false
设置ListItem的根布局属性android:descendantFocusability=”blocksDescendants”
第三种是最方便,也是推荐的方式,它会将ListItem根布局下的所有子控件都设置为不能获取焦点。android:descendantFocusability属性的值有三种,其中,ViewGroup是指设置该属性的View,本例中就是ListItem的根布局:

beforeDescendants:ViewGroup会优先其子类控件而获取到焦点
afterDescendants:ViewGroup只有当其子类控件不需要获取焦点时才获取焦点
blocksDescendants:ViewGroup会覆盖子类控件而直接获得焦点

shape

shape可以自定义形状,可以定义下面四种类型的形状,通过android:shape属性指定:

  • rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
  • oval: 椭圆形,用得比较多的是画正圆
  • line: 线形,可以画实线和虚线
  • ring: 环形,可以画环形进度条

rectangle

rectangle是默认的形状,也是用得最多的形状,一些文字背景、按钮背景、控件或布局背景等

  • solid: 设置形状填充的颜色,只有android:color一个属性
    • android:color 填充的颜色
  • padding: 设置内容与形状边界的内间距,可分别设置左右上下的距离
    • android:left 左内间距
    • android:right 右内间距
    • android:top 上内间距
    • android:bottom 下内间距
  • 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中使用
  • corners: 设置圆角,只适用于rectangle类型,可分别设置四个角不同半径的圆角,当设置的圆角半径很大时,比如200dp,就可变成弧形边了
    • android:radius 圆角半径,会被下面每个特定的圆角属性重写
    • android:topLeftRadius 左上角的半径
    • android:topRightRadius 右上角的半径
    • android:bottomLeftRadius 左下角的半径
    • android:bottomRightRadius 右下角的半径
  • stroke: 设置描边,可描成实线或虚线。
    • android:color 描边的颜色
    • android:width 描边的宽度
    • android:dashWidth 设置虚线时的横线长度
    • android:dashGap 设置虚线时的横线之间的距离

oval

oval用来画椭圆,而在实际应用中,更多是画正圆,比如消息提示,圆形按钮等

  • size: 设置形状默认的大小,可设置宽度和高度
    • android:width 宽度
    • android:height 高度

line

line主要用于画分割线,是通过stroke和size特性组合来实现的

  1. 只能画水平线,画不了竖线;
  2. 线的高度是通过stroke的android:width属性设置的;
  3. size的android:height属性定义的是整个形状区域的高度;
  4. size的height必须大于stroke的width,否则,线无法显示;
  5. 线在整个形状区域中是居中显示的;
  6. 线左右两边会留有空白间距,线越粗,空白越大;
  7. 引用虚线的view需要添加属性android:layerType,值设为”software”,否则显示不了虚线。

ring

shape根元素有些属性只适用于ring类型

  • android:innerRadius 内环的半径
  • android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖
  • android:thickness 环的厚度
  • android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖
  • android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true

transition

transition其实是继承自layer-list的,只是,transition只能管理两层drawable,另外提供了两层drawable之间切换的方法,切换时还会有淡入淡出的动画效果

transition标签生成的Drawable对应的类为TransitionDrawable,要切换时,需要主动调用TransitionDrawable的startTransition()方法,参数为动画的毫秒数,也可以调用reverseTransition()方法逆向切换。

((TransitionDrawable)drawable).startTransition(500); //正向切换,即从第一个drawable切换到第二个
((TransitionDrawable)drawable).reverseTransition(500); //逆向切换,即从第二个drawable切换回第一个

vector

  • vector

    • android:name 定义该drawable的名字
    • android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸,通常使用 dp
    • android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸,通常使用 dp
    • android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布
    • android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布
    • android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
    • android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in
    • android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片。比如 阿拉伯语。
    • android:alpha 该图片的透明度属性
  • group

  • android:name 定义 group 的名字
  • android:rotation 定义该 group 的路径旋转多少度
  • android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 - vector 的 viewport 值来指定的。
  • android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 - vector 的 viewport 值来指定的。
  • android:scaleX 定义 X 轴的缩放倍数
  • android:scaleY 定义 Y 轴的缩放倍数
  • android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
  • android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。
  • path
    • android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径
    • android:pathData 和 SVG 中 d 元素一样的路径信息。
    • android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径
    • android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框
    • android:strokeWidth 定义路径边框的粗细尺寸
    • android:strokeAlpha 定义路径边框的透明度
    • android:fillAlpha 定义填充路径颜色的透明度
    • android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 0 到1
    • android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 0 到1
    • android:trimPathOffset 设置路径截取的范围
    • android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.
    • android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
    • android:strokeMiterLimit 设置斜角的上限注:当strokeLineJoin设置为 “miter” 的时候, 绘制两条线段以锐角相交的时候,所得的斜面可能相当长。当斜面太长,就会变得不协调。strokeMiterLimit 属性为斜面的长度设置一个上限。这个属性表示斜面长度和线条长度的比值。默认是 10,意味着一个斜面的长度不应该超过线条宽度的 10 倍。如果斜面达到这个长度,它就变成斜角了。当 strokeLineJoin 为 “round” 或 “bevel” 的时候,这个属性无效。

参考资料

Android样式的开发
VectorDrawable 详解
Android开发艺术探索
Android群英传