- 普通图片:涉及手机分辨率,适配问题
- bitmap:可以对图片做一些设置,如:平铺,拉伸或者保持原始大小,图片的对齐方式
- nine-patch(点九图片)
- color标签
- insert标签:设置drawable边距,与view的padding类似,padding只可以设置内容与边界距离,insert可以设置背景
- clip标签:可以对drawable进行裁剪,做进度条时比较有用,level设置
- scale标签:可以对drawable进行缩放,level设置
- level-list标签:当需要在一个view中显示不同的图片时,如手机剩余电量显示不同的图片
- transition标签:提供了两层drawable之间的切换方法,且只可以存在两层,即两个item
- rotate标签:可以对drawable进行旋转,是静态的
- animation-list标签:可以将一系列的drawable构建成帧动画
- animated-rotate标签:让drawable不停的旋转
1、普通图片
图片是最常用的drawable资源,格式包括:png(推荐)、jpg(可接受)、gif(不建议)。用图片资源需要根据不同屏幕密度提供多张不同尺寸的图片,它们的关系如下表:
密度分类 | 密度值范围 | 代表分辨率 | 图标尺寸 | 图片比例 |
ldpi |
|
|
|
|
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 |
切图工具,可以让切图变得简单,这里推荐两款:Cutterman和Cut&Sliceme,都是Photoshop下的插件,输出支持android、ios和web三种平台。
2、bitmap
可以对图片做一些设置,如:平铺,拉伸或者保持原始大小,图片的对齐方式,以下是属性:
android:src必填,指定的图片资源,只能是图片
android:gravity设置图片的对齐方式,如在layer-list中,默认会尽量填满整个视图,导致图片被拉伸,为避免这种情况可以设置对齐方式,可以设置多个用“|”分隔
- top:图片放在容器顶部,不改变图片的大小
- bottom:图片放在容器底部,不改变图片的大小
- left:图片放在容器左侧,不改变图片大小
- right:图片放在容器右侧,不改变图片大小
- center:图片放在容器中间,包括水平和垂直方向,不改变图片大小
- center_vertical:图片放在容器垂直方向的中心位置,不改变图片大小
- center_horizontal:图片放在容器水平方向的中心位置,不改变图片大小
- fill:拉伸整张图片以填满整个容器的宽和高,默认值
- fill_vertical:在垂直方向上拉伸图片以填满整个容器的高度
- fill_horizontal:在水平方向上拉伸图片以填满整个容器的宽度
- clip_vertical:附加选项,裁剪基于垂直方向的gravity设置,设置top时裁剪底部,设置bottom时裁剪顶部
- clip_horizontal:附加选项,裁剪基于水平方向的fravity设置,设置left时裁剪右侧,设置right时裁剪左侧
android:antialias设置是否开启抗锯齿
android:dither设置是否抖动,图片与屏幕的像素配置不同时会用到,如图片设置的是ARGB8888,而屏幕是RGB565
android:filter设置是否允许对图片进滤波,对图片进行收缩或者延展使用滤波可以获得平滑的外观效果
android:tint给图片着色,比如图片本来是黑色的,着色后变成白色的
android:tintMode着色模式,API Level最低要求21
android:tileMode设置图片的平铺方式,去下面的字四个值之一
- disable 不做任何处理,默认值
- repeat 图片重复铺满
- mirror 使用交替镜像的方式重复图片的绘制
- clamp 复制图片边缘的颜色来填充容器剩下的空白,如引入图片是白色边缘,那图片所在容器里除了图片都被填充成白色
android:tileModeX和tileMode一样,设置图片平铺方式,这个属性只设置水平方向的平铺,API Level最低要求21
android:tileModeY和tileMode一样,设置图片平铺方式,这个属性只设置垂直方向的平铺,API Level最低要求21
android:alpha设置图片的透明度,取值范围0.0~1.0,0.0表示全透明,1.0表示为不透明,API Level最低要求11
android:mipmap设置是否可以使用mipmap,但API Level最低要求17
android:autoMirrored设置图片是否需要镜像反转,当布局方向是RTL,即从左到右布局时有效,API Level最低要求19
3、nine-patch(点九图片)
android:src必填,必须是.9类型的图片
android:dither设置是否抖动,图片与屏幕的像素配置不同时会用到,如图片是ARGB8888,而屏幕是RGB565
android:tint给图片着色,如图片原来是黑色的,着色后变成白色
android:tintMode着色模式,API Level最低要求21
android:alpha设置图片的透明度,取值范围0.0~1.0,0.0为全透明,1.0为不透明,API Level 最低要求11
android:autoMirrored设置图片是否需要镜像反转,当布局方向为RTL时(从右到左)时才有用,API Level 最低要求19
4、color标签-基本不用
5、insert标签
可以设置drawable的边距,使用方法与view的padding类似,不过padding只可以设置内容与边界的距离,insert可以设置背景drawable与view之间的边距,具体属性如下:
android:drawable指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
android:visible设置初始的可见性,默认值false
android:insetLeft左边距
android:insetRight右边距
android:insetTop顶部边距
android:insetBottom底部边距
android:inset设置统一边距,会覆盖上面4个属性,但API Level最低要求21
6、clip标签
可以对drawable进行裁剪,做进度条时比较有用,可以通过设置level的值控制裁剪的多少,level取值范围是0~10000,默认值是0,表示完全裁剪,图片不可见,10000表示完全不裁剪,完整图片可见。以下是clip的可设置的属性:
android:drawable指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
android:clipOrientation设置裁剪的方向,取值为下面的2个之一:
- horizontal 在水平方向上进行裁剪,条状的进度条就是水平裁剪
- vertical 在垂直方向上进行裁剪
android:gravity设置裁剪的位置,可以取值如下,多个值用“|”分隔
- top:图片放在容器的顶部,不改变图片大小,当裁剪方向为vertical时,裁掉图片底部
- bottom:图片位于容器的底部,不改变图片大小,当裁剪方向为vertical时,裁掉图片顶部
- left:图片位于容器的左侧,不改变图片大小,默认值,当裁剪方向为horizantal时,裁掉图片右侧
- right:图片位于容器的右侧,不改变图片大小,当裁剪方向为horizantal时,裁掉图片左侧
- center:图片位于容器的中心位置,包括水平和垂直方向,不改变图片大小,当裁剪方向为horizontal时,裁掉图片左右两侧,当裁剪方向为vertical时,裁掉图片上下两侧
- center_vertical:图片位于容器的垂直方向中心位置,不改变图片大小,裁剪和center时一样
- center_horizantal:图片位于容器的水平方向中心位置,不改变图片大小,裁剪和center时一样
- fill:拉伸整张图片,使其充满整个容器的宽和高,图片不会被裁剪,除非level设置为0,此图片不可见
- fill_vertical:在垂直方向上拉伸,使其充满容器的整个高度,当裁剪方向为vertical时,图片不会被裁剪,除非level设置为0,此时图片不可见
- fill_horizontal 在水平方向上拉伸,其实充满容器的整个宽度,当裁剪方向horizontal时,图片不会被裁剪,除非level设置为0,此时图片不可见
- clip_vertical:附加选项,裁剪基于垂直方向的gravity设置,设置top时会裁剪底部,设置bottom时会裁剪顶部,其他情况同时裁剪顶部和底部
- clip_horizontal:附加选项,裁剪基于水平方向的gravity设置,设置left时会裁剪右侧,设置right时会裁剪左侧,其他情况同时裁剪左右两侧
level的设置在xml中没有直接提供属性,需要在代码中设置
代码示例:
1.定义clip.xml:
<?xml version="1.0"encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="horizontal"
android:drawable="@drawable/img4clip"
android:gravity="left" />
2.在ImageView中引用:
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_img"
android:src="@drawable/clip" />
3.在代码中设置level:
ImageView img = (ImageView) findViewById(R.id.img);
img.getDrawable().setLevel(5000);// level设置范围0~10000
7、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
用法与clip一样:
1. 定义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" />
2. 在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" />
3. 在代码中设置level:
ImageView img = (ImageView) findViewById(R.id.img);
img.getDrawable().setLevel(5000);//level范围值0~10000
8、level-list标签
当需要在一个view中显示不同的图片时,如手机剩余电量显示不同的图片,level-list就可以使用了,level-list可以管理一组drawable,每个drawable设置一组level范围,最中会根据level值选取对应的drawable绘制,通过对其子标签的item设置drawable实现,item的属性有三个:
android:drawable 指定drawable资源,如果不设置该属性,也可以定义drawable类型的子标签
android:minLevel 该item的最小level值
android:maxLevel该item的最大level值
代码示例:
<?xml version="1.0"encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/battery_low"
android:maxLevel="10"
android:minLevel="0" />
<item
android:drawable="@drawable/battery_below_half"
android:maxLevel="50"
android:minLevel="10" />
<item
android:drawable="@drawable/battery_over_half"
android:maxLevel="99"
android:minLevel="50" />
<item
android:drawable="@drawable/battery_full"
android:maxLevel="100"
android:minLevel="100" />
</level-list>
那么,当电量剩下10%时则可以设置level值为10,将会匹配第一张图片:
img.getDrawable().setLevel(10);
item的匹配规则是从上到下匹配,当设置的level值与前面的item的level范围匹配时,则采用,一般item的添加按maxLevel从小到达排序,此时的minLevel可以不用指定也能匹配,因此上述代码可以简化为:
<?xmlversion="1.0" encoding="utf-8"?>
<level-listxmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/battery_low"
android:maxLevel="10" />
<item
android:drawable="@drawable/battery_below_half"
android:maxLevel="50" />
<item
android:drawable="@drawable/battery_over_half"
android:maxLevel="99" />
<item
android:drawable="@drawable/battery_full"
android:maxLevel="100" />
</level-list>
但是不可以反过来讲maxLevel="100"的item放在最前面,那样所有的电量都只能匹配第一条了
9、transition标签
transition其实是继承自layer-list,只是,transition只能管理两层的drawable,另外提供了两层drawable之间的切换方法,切换时有淡入淡出效果
示例代码:
<?xml version="1.0"encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:drawable="@drawable/on" />
<itemandroid:drawable="@drawable/off" />
</transition>
transition标签生成的Drawable对应的类为TransitionDrawable,要切换时,需要主动调用TransitionDrawabled的startTransition()方法,参数为动画的毫秒数,也可以调用reverseTransition()方法逆向切换。
((TransitionDrawable)drawable).startTransition(500);//正向切换,即从第一个drawable切换到第二个
((TransitionDrawable)drawable).recerseTransition(500);//逆向切换,即从第二个drawable切换到第一个
10、rotate标签
使用rotate标签可以对drawable进行旋转,在shape中讲环形时使用到了rotate,另外如果一张向上箭头的图片,还需要向下的箭头时,可以使用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了。
11、animation-list标签
annimation-list可以将一系列的drawable构建成帧动画,即将一个个drawable,一帧一帧的播放,通过添加item子标签设置每一帧使用的drawable资源,以及每帧的持续时间。
示例代码:
<?xml version="1.0"encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="@drawable/anim1"
android:duration="1000" />
<item
android:drawable="@mipmap/anim2"
android:duration="1000" />
<item
android:drawable="@mipmap/anim3"
android:duration="1000" />
</animation-list>
android:oneshot属性设置是否循环播放,true时,只播放一轮结束,false时,会轮询播放
android:duration属性设置该帧的持续时间,以毫秒数为单位
animation-list对应的Drawable类为AnimationDrawable,要让动画运行起来,需要主动调用AnimationDrawable的start()方法,另外在onCreate()方法中直接调用start()方法无效,因为view还没有初始化完成,播放不了动画。
12、animated-rotate标签
rotate标签可以将原有的drawable转个角度编程另一个drawable,是静态的,而animated-rotate则是让drawable不停的旋转,其属性有4个,具体如下:
android:drawable指定drawable资源,不设置该属性可以定义drawable类型的子标签
android:pivotX旋转中心的X坐标
android:pivotY旋转中心的Y坐标
android:visible设置初始的可见性状态,默认值false
示例代码:
<?xml version="1.0"encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/img_daisy"
android:pivotX="50%"
android:pivotY="50%"
android:visible="false" />
PS:selector标签下的item其实还可以添加set标签,这是添加动画集的标签。