android drawable
Keegan小钢 : Android样式的开发原始图片资源
- .png, .9.png, .jpg, .gif
bitmap BitmapDrawable
- BitmapDrawable
<?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/drawable_resource" <!--反锯齿--> android:antialias=["true" | "false"] android:dither=["true" | "false"] android:filter=["true" | "false"] android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] android:mipMap=["true" | "false"] android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] /> - 属性
- android:src 必填项,指定图片资源,只能是图片,不能是xml定义的drawable资源
-
android:gravity 设置图片的对齐方式,比如在layer-list中,默认会尽量填满整个视图,导致图片可能会被拉伸,为了避免被拉伸,就可以设置对齐方式,可取值为下面的值,多个取值可以用 | 分隔:
- 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:antialias 设置是否开启抗锯齿
-
android:dither 设置是否抖动,图片与屏幕的像素配置不同时会用到,比如图片是ARGB 8888的,而屏幕是RGB565
-
android:filter 设置是否允许对图片进行滤波,对图片进行收缩或者延展使用滤波可以获得平滑的外观效果
-
android:tint 给图片着色,比如图片本来是黑色的,着色后可以变成白色
-
android:tileMode 设置图片平铺的方式,取值为下面四种之一:
- disable不做任何平铺,默认设置
- repeat图片重复铺满
- mirror使用交替镜像的方式重复图片的绘制
- clamp复制图片边缘的颜色来填充容器剩下的空白部分,比如引入的图片如果是白色的边缘,那么图片所在的容器里除了图片,剩下的空间都会被填充成白色
-
android:alpha 设置图片的透明度,取值范围为0.0~1.0之间,0.0为全透明,1.0为全不透明,API Level最低要求是11,即Android 3.0
-
android:mipMap 设置是否可以使用mipmap,但API Level最低要求是17,即Android 4.2
-
android:autoMirrored 设置图片是否需要镜像反转,当布局方向是RTL,即从右到左布局时才有用,API Level 19(Android 4.4)才添加的属性
-
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)才添加的属性
nine-patch NinePatchDrawable
- nine-patch
<?xml version="1.0" encoding="utf-8"?> <nine-patch xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/drawable_resource" android:dither=["true" | "false"] /> -
拉伸区域就是图片会被拉伸的部分,可以为1个点,也可以为一条线,甚至也可以为断开的几个点或几条线,总之,有黑点的地方就会被拉伸,没有黑点的地方就不会被拉伸。而显示内容区域其实就等于默认给使用的控件设置了padding,控件的内容只能显示在内容区域内。
- 属性
- 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)才添加的属性
shape ShapeDrawable GradientDrawable
- shape drawable
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> <gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" | "radial" | "sweep"] android:useLevel=["true" | "false"] /> <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> </shape> <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- 定义填充渐变颜色 --> <gradient android:startColor="#00f" android:endColor="#00f" android:angle="45" android:type="sweep"/> <!-- 设置内填充 --> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <!-- 设置圆角矩形 --> <corners android:radius="8dp" /> </shape> - android:shape 自定义形状
- rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
- oval: 椭圆形,用得比较多的是画正圆
- line: 线形,可以画实线和虚线
- ring: 环形,可以画环形进度条
- size: 设置形状默认的大小,可设置宽度和高度
- android:width 宽度
- android:height 高度
- solid: 设置形状填充的颜色
- 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 渐变的角度,linear使用,必须是45的倍数,0表示从左到右,90表示从下到上
- android:centerX 渐变中心的相对X坐标,radial使用,在0.0到1.0之间,默认为0.5
- android:centerY 渐变中心的相对Y坐标,radial使用,在0.0到1.0之间,默认为0.5
- android:gradientRadius 渐变的半径,radial使用
- android:useLevel 如果为true,则可在LevelListDrawable中使用
- android:type 渐变的类型
- corners: 设置圆角,只适用于rectangle类型,当设置的圆角半径很大时,比如200dp,就可变成弧形边
- android:radius 圆角半径,会被下面每个特定的圆角属性重写
- android:topLeftRadius 左上角的半径
- android:topRightRadius 右上角的半径
- android:bottomLeftRadius 左下角的半径
- android:bottomRightRadius 右下角的半径
- stroke: 设置描边,可描成实线或虚线
- android:color 描边的颜色
- android:width 描边的宽度
- android:dashWidth 设置虚线时的横线长度
- android:dashGap 设置虚线时的横线之间的距离
- 引用虚线的view需要添加属性android:layerType,值设为"software",否则显示不了虚线。
- 只能画水平线,画不了竖线;
- 线的高度是通过stroke的android:width属性设置的;
- size的android:height属性定义的是整个形状区域的高度;
- size的height必须大于stroke的width,否则,线无法显示;
- 线在整个形状区域中是居中显示的;
- 线左右两边会留有空白间距,线越粗,空白越大;
- android:ring 专用shape属性
- android:innerRadius 内环的半径
- android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖
- android:thickness 环的厚度
- android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖
- android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true
selector StatelistDrawable 可做drawable和color资源
- statelist drawable
//定义 /res/drawable/xxx.xml &lr;selector android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > &lr;item android:state_xxx=”true|false” android:color|drawable="..." /> &lr;/selector> //使用 listview android:listSelector="@drawable/xxx" item android:background="@drawable/xxx" // android:cacheColorHint="@android:color/transparent" Drawable drawable = getResources().getDrawable(R.drawable.xxx); listView.setSelector(drawable); - item 状态
- 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及以上才支持
- 注意
- selector作为drawable资源时,item指定android:drawable属性,并放于drawable目录下;
- selector作为color资源时,item指定android:color属性,并放于color目录下;
- android:drawable属性除了引用@drawable资源,也可以引用@color颜色值;但android:color只能引用@color;
- item是从上往下匹配的,如果匹配到一个item那它就将采用这个item;所以设置默认的状态,一定要写在最后
- 属性
- android:enterFadeDuration状态改变时,新状态展示时的淡入时间,以毫秒为单位
- android:exitFadeDuration状态改变时,旧状态消失时的淡出时间,以毫秒为单位
- ListItem
最后,关于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会覆盖子类控件而直接获得焦点
layer-list LayerDrawable
- LayerDrawable
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" /> <item > <color android:color="#E4007F" /> </item > <item android:bottom="4dp" android:drawable="@android:color/white" /> </layer-list>
level-list LevelListDrawable
- level-list
<?xml version="1.0" encoding="utf-8"?> <level-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/drawable_resource" android:maxLevel="integer" android:minLevel="integer" /> </level-list> - drawable.setLevel(10);
当需要在一个View中显示不同图片的时候,比如手机剩余电量不同时显示的图片不同,level-list就可以派上用场了。level-list可以管理一组drawable,每个drawable设置一组level范围,最终会根据level值选取对应的drawable绘制出来。item的匹配规则是从上到下的,当设置的level值与前面的item的level范围匹配,则采用。一般item的添加按maxLevel从小到大排序下来,此时minLevel可以不用指定也能匹配到。
transition TransitionDrawable 两层drawable之间切换
- transition
<?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@[package:]drawable/drawable_resource" android:id="@[+][package:]id/resource_name" android:top="dimension" android:right="dimension" android:bottom="dimension" android:left="dimension" /> </transition> -
transition其实是继承自layer-list的,只是,transition只能管理两层drawable,另外提供了两层drawable之间切换的方法,切换时还会有淡入淡出的动画效果
- 使用
((TransitionDrawable)drawable).startTransition(500); //正向切换,即从第一个drawable切换到第二个
((TransitionDrawable)drawable).reverseTransition(500); //逆向切换,即从第二个drawable切换回第一个
inset InsetDrawable 设置边距
- inset
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/drawable_resource" android:insetTop="dimension" android:insetRight="dimension" android:insetBottom="dimension" android:insetLeft="dimension" /> -
使用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
clip ClipDrawable 裁剪
<?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/drawable_resource" android:clipOrientation=["horizontal" | "vertical"] android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] />- 使用
drawable.setLevel(drawable.getLevel() + 1000);
使用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时会裁剪左侧,其他情况会同时裁剪左右两侧
scale ScaleDrawable
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/drawable_resource" android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] android:scaleHeight="percentage" android:scaleWidth="percentage" />