1、Drawable介绍(可绘制、可拉伸)
Drawable在我们平时的开发中,基本都会用到,而且给大家非常的有用,可能大家的认知还在res下的Drawable图片上,但其实还有很多其他类型的Drawable,下面我们一起了解一下吧。
Drawable类图:
总结得出,Drawable是个抽象类,也就是说我们不能直接使用Drawable,他只能作为一个父类使用。
一下就是他的子类或者间接子类所对象在res定义的标签。
日常开发中,我们常用的有selector、layer-list、transition、color、shape、scale、rotate、animation-list、bitmap。
今天需要掌握的有:selector、layer-list、color、shape、scale、rotate
日后在知识点丰富后会讲述到:transition、animation-list、bitmap。
剩下的大家可以在我收集的资料篇学习了解。
2、Drawable使用
a.普通图片
b.点九图片
c.shape
d.selector
e.layer-list
f.color
g.scale、rotate
a.普通图片
图片资源是简单的Drawable资源,目前Android支持的图片格式有:gif、png、jpg等。我们只需要把图片资源放置到\res\drawable目中,那么在编译后的R.java类中就会生成图片资源的资源ID。
建议尽量减少引入图片,而通过使用shape、layer-list等自己画,易于修改和维护,也减少了安装包大小,适配性也更好。
使用:
注:Android中drawable中的资源名称有约束,必须是: [a-z0-9_.](即:只能是字母数字及_和.),而且不能以数字开头,否则编译会报错: Invalid file name: must contain only [a-z0-9_.]
1、代码中使用图片
2、资源文件中使用
b.点九图片
点九图片文件扩展名为:.9.png,通过点九图片可以做局部拉伸,比如,一张圆角矩形图片,我们不想让它的四个边角都被拉伸从而导致模糊失真,使用点九图就可以控制拉伸区域,让四个边角保持完美显示。效果如下图:
画点九图一般用Android SDK工具集里的draw9patch工具,只需要在四条边画黑线就可以了,如下图所示:
拉伸区域就是图片会被拉伸的部分,可以为1个点,也可以为一条线,甚至也可以为断开的几个点或几条线,总之,有黑点的地方就会被拉伸,没有黑点的地方就不会被拉伸。而显示内容区域其实就等于默认给使用的控件设置了padding,控件的内容只能显示在内容区域内。
c.shape
一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字大小和颜色、阴影等等。web的样式用css来定义,而android的样式主要则是通过shape、selector、layer-list、level-list、style、theme等组合实现。第一个要讲的就是shape,最基础的形状定义工具。
一般用shape定义的xml文件存放在drawable目录下,若项目没有该目录则新建一个,而不要将它放到drawable-hdpi等目录中。
使用shape可以自定义形状,可以定义下面四种类型的形状,通过android:shape属性指定:
- rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
- oval: 椭圆形,用得比较多的是画正圆
- line: 线形,可以画实线和虚线
- ring: 环形,可以画环形进度条
指定形状之后就是对图像进行设计
- 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 设置虚线时的横线之间的距离
下面是例子:
- android:innerRadius 内环的半径
- android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖
- android:thickness 环的厚度
- android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖
- android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true
第一个图只添加了solid;第二个图只添加了gradient,类型为sweep;第三个图只添加了stroke;第四个图添加了gradient和stroke两项特性。
d.selector
shape只能定义单一的形状,而实际应用中,很多地方比如按钮、Tab、ListItem等都是不同状态有不同的展示形状。有时候,不同状态下改变的不只是背景、图片等,文字颜色也会相应改变。而要处理这些不同状态下展示什么的问题,就要用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及以上才支持
使用见例子
e.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 右边的偏移量
关于item的用法,也做下总结:
- 根节点不同时,可设置的属性是会不同的,比如selector下,可以设置一些状态属性,而在layer-list下,可以设置偏移量;
- 就算父节点同样是selector,放在drawable目录和放在color目录下可用的属性也会不同,比如drawable目录下可用的属性为android:drawable,在color目录下可用的属性为android:color;
- item的子节点可以为任何类型的drawable类标签,除了上面例子中的shape、color、layer-list,也可以是selector,还有其他没讲过的bitmap、clip、scale、inset、transition、rotate、animated-rotate、lever-list等等。
f.color
color标签是drawable里最简单的标签了,只有一个属性:android:color,指定颜色值。这个标签一般很少用,因为基本都可以通过其他更方便的方式定义颜色。另外,颜色值一般都在colors.xml文件中定义,其根节点为resources。看看两者的不同:
<!-- 文件:res/drawable/white.xml --><color xmlns:android="http://schemas.android.com/apk/res/android" android:color="#FFFFFF" />
<!-- 文件:res/values/colors.xml --><resources> <color name="white">#FFFFFF</color></resources>
引用的时候,前一种通过@drawable/white引用,后一种通过@color/white引用。
g.scale
使用scale标签可以对drawable进行缩放操作,和clip一样是通过设置level来控制缩放的比例。scale标签可以设置的属性如下:
- 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
使用的时候,和clip一样,用法如下:
- 定义scale.xml:
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/img4scale" android:scaleGravity="left" android:scaleHeight="50%" android:scaleWidth="50%" android:useIntrinsicSizeAsMinimum="false" />
- 在ImageView中引用:
<ImageView android:id="@+id/img" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/bg_img" android:src="@drawable/scale" />
- 在代码中设置level:
ImageView img = (ImageView) findViewById(R.id.img); img.getDrawable().setLevel(5000); //level范围值0~10000
g.rotate
使用rotate标签可以对一个drawable进行旋转操作,在shape篇讲环形时最后举了个进度条时就用到了rotate标签。另外,比如你有一张箭头向上的图片,但你还需要一个箭头向下的图片,这时就可以使用rotate将向上的箭头旋转变成一张箭头向下的drawable。
先看看rotate标签的一些属性吧:
- 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
示例代码如下,目标是将一张箭头向上的图片转180度,转成一张箭头向下的图片:
<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/ic_arrow" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="180" />
将它引用到ImageView里,发现图片根本没有转变。其实,要让它可以旋转,还需要设置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了。