参考
1、Android中的Drawable基础与自定义Drawable
2、android中的drawable资源
3、Android开发之Shape详细解读
Drawable分类
No | xml标签 | Class类 | 含义 |
---|---|---|---|
1 | shape | ShapeDrawable | 特定形状,模型的图样 |
2 | selector | StateListDrawable | 不同状态选择不同的图样 |
3 | layer-list | LayerDrawable | 层叠图样 |
4 | level-list | LevelListDrawable | 不同程度图样 |
5 | transition | TransitionDrawable | 渐变图样 |
6 | ripple | RippleDrawable | 波纹图样 |
7 | inset | InsetDrawable | 内嵌图样 |
8 | scale | ScaleDrawable | 缩放图样 |
9 | clip | ClipDrawable | 剪切图样 |
10 | rotate | RotateDrawable | 旋转图样 |
11 | animation-list | AnimationDrawable | 动画效果 |
12 | bitmap | BitmapDrawable | 图片图样 |
13 | nine-patch | NinePatchDrawable | .9图 |
一、shape - ShapeDrawable : 特定形状,模型的图样
>>标签含义
1、shape标签
属性 | 含义 | 值等解释 |
---|---|---|
shape | 形状,样式 | rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等 oval: 椭圆形,用得比较多的是画正圆 line: 线形,可以画实线和虚线 ring: 环形,可以画环形进度条 |
tint | 着色 | 给shape着色 |
tintMode | 着色模式 | 着色模式(有关tint和tintMode请参看文章:http://blog.csdn.net/u010687392/article/details/47399719) |
dither | 抖动平滑:建议true | 将在位图的像素配置与屏幕不同时(例如:ARGB 8888 位图和 RGB 565 屏幕)启用位图的抖动;值为“false”时则停用抖动。默认值为 true。 |
visible | - | - |
useLevel | 使用等级,建议为false | 如果为true,则可在LevelListDrawable中使用。这通常应为“false”,否则形状不会显示。 |
thickness | 外环厚度 | 环的厚度,指内环与外环的环间距。(只适用于shape为ring) |
thicknessRatio | 同上,浮点型 | 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖(只适用于shape为ring) |
innerRatio | 内环半径 | 内环半径(只适用于shape为ring) |
innerRadiusRatio | 同上,浮点型 | 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖(只适用于shape为ring) |
2、shape下size标签:设置shape宽高值
注意事项:只有控件宽高设置成wrap_content时,此处宽高才起作用,但是起到的却是最小宽高值。也就是说,当控件宽高超过你此处指定的值时,它会变化(wrap_content!!!)
属性 | 含义 |
---|---|
width | 宽度 |
height | 高度 |
3、shape下solid标签:设置形状填充颜色
属性 | 含义 |
---|---|
color | 指定颜色 |
4、shape下padding标签:设置内容与边界的距离
属性 | 含义 |
---|---|
left | 左内边距 |
top | 上内边距 |
right | 右内边距 |
bottom | 左内边距 |
5、shape下corners标签:设置四个角的圆角
属性 | 含义 |
---|---|
radius | 四个角圆角 |
topLeftRadius | 左上角的圆角 |
topRightRadius | 右上角的圆角 |
bottomLeftRadius | 左下角的圆角 |
bottomRightRadius | 右下角的圆角 |
6、shape下stroke标签:设置shape的外边界线
属性 | 含义 |
---|---|
color | 描边的颜色 |
width | 边界线的宽度 |
dashWidth | 段虚线的宽度 |
dashGap | 段虚线的间隔 |
7、shape下的gradient标签:设置形状渐变
属性 | 含义 | 值等解释 |
---|---|---|
type | 渐变的类型 | 1.linear:线性渐变,默认的渐变类型 2.radial:放射渐变,设置该项时,必须设置android:gradientRadius渐变半径属 3.sweep:扫描性渐变 |
angle | 渐变角度 | 渐变的角度,线性渐变时(linear也是默认的渐变类型)才有效,必须是45的倍数,0表示从左到右,90表示从下到上 |
centerX | 渐变中心的相对X坐标 | 放射渐变时(radial)才有效,在0.0到1.0之间,默认为0.5,表示在正中间 |
centerY | 渐变中心的相对Y坐标 | 放射渐变时(radial才有效,在0.0到1.0之间,默认为0.5,表示在正中间 |
useLevel | 使用等级 | 如果为true,则可在LevelListDrawable中使用。这通常应为“false”,否则形状不会显示 |
startColor | 渐变开始的颜色 | - |
centerColor | 渐变中间的颜色 | - |
endColor | 渐变结束的颜色 | - |
gradientRadius | 渐变半径 | 渐变的半径,只有渐变类型为radial时才使用 |
>>案例
1、Rectangle-矩形样式
![img_ec9a41b209c792d76a0f8ad94f8eb894.png](https://yqfile.alicdn.com/img_ec9a41b209c792d76a0f8ad94f8eb894.png?x-oss-process=image/resize,w_1400/format,webp)
shape-rectangle.png
矩形:填充+描边+弧边
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 填充颜色 -->
<solid android:color="@color/wx_green" />
<!-- 线的宽度 -->
<stroke
android:width="5dp"
android:color="@color/orchid"/>
<!-- 矩形的圆角半径 -->
<corners android:radius="12dp" />
</shape>
矩形:填充+描边+上部弧边
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充颜色 -->
<solid android:color="@color/wx_green" />
<!-- 线的宽度 -->
<stroke
android:width="5dp"
android:color="@color/orchid"/>
<!-- 矩形的圆角半径,设置四个角 -->
<corners
android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"/>
</shape>
矩形:填充+描边虚线+弧边半圆
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充颜色 -->
<solid android:color="@color/wx_green" />
<!-- 线的宽度,虚线宽度,虚线间隔 -->
<stroke
android:width="5dp"
android:color="@color/orchid"
android:dashWidth="5dp"
android:dashGap="3dp"/>
<!-- 矩形的圆角半径,半圆形,设置大一点就好了 -->
<corners android:radius="100dp" />
</shape>
2、Oval-图圆形样式
![img_d515056bb3b53cffa406340f2dd6feaf.png](https://yqfile.alicdn.com/img_d515056bb3b53cffa406340f2dd6feaf.png?x-oss-process=image/resize,w_1400/format,webp)
shape-oval.png
椭圆形+横向渐变色,没有调整角度
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<!--渐变色:线性-->
<gradient
android:type="linear"
android:angle="0"
android:startColor="@color/wx_red"
android:centerColor="@color/wx_green"
android:endColor="@color/yellow"/>
</shape>
椭圆形:圆形+发射形渐变色,如果设置的高宽大于gradientRadius*2的话,那么外围颜色是endColor
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--渐变色:放射,必须设置android:gradientRadius
如果设置的高宽大于gradientRadius*2的话,那么外围颜色是endColor-->
<gradient
android:type="radial"
android:startColor="@color/white"
android:endColor="@color/wx_green"
android:gradientRadius="60dp"/>
</shape>
椭圆形:圆形+扫描渐变色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!--渐变色:放射,必须设置android:gradientRadius-->
<gradient
android:type="sweep"
android:startColor="@color/wx_green"
android:endColor="@color/white"
android:gradientRadius="20dp"/>
</shape>
3、Ring-环形样式
![img_66c70ce071c26f31859813f1fd7cc87c.png](https://yqfile.alicdn.com/img_66c70ce071c26f31859813f1fd7cc87c.png?x-oss-process=image/resize,w_1400/format,webp)
shape-ring.png
环形:只有填充色,inner内部没颜色,外环是填充色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="@color/wx_green"/>
</shape>
环形:有填充颜色和描边
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="@color/wx_green"/>
<!-- 线的宽度 -->
<stroke
android:width="5dp"
android:color="@color/orchid"/>
</shape>
环形:sweep的渐变色环,加上rotate可以变成loading框
<?xml version="1.0" encoding="utf-8"?>
<!--加上rotate可以变成loading等待框或者进度框-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="10dp"
android:useLevel="false">
<gradient
android:endColor="@color/wx_green"
android:startColor="@color/white"
android:type="sweep" />
</shape>
4、Line-线形样式
![img_86c6d4aefa842990ecf7cc5cc5f9d8d4.png](https://yqfile.alicdn.com/img_86c6d4aefa842990ecf7cc5cc5f9d8d4.png?x-oss-process=image/resize,w_1400/format,webp)
shape-line.png
线形:实线,只能是横向的,另外可以设置size
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="3dp"
android:color="@color/orchid"/>
</shape>
线性:虚线,如果要显示的话,必须加上android:layerType="software"
<?xml version="1.0" encoding="utf-8"?>
<!--要显示虚线必须view加上:android:layerType="software"-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="3dp"
android:color="@color/orchid"
android:dashWidth="5dp"
android:dashGap="3dp"/>
</shape>
二、selector - StateListDrawable:不同状态选择不同的图样
>>标签含义
1、selector下的item标签
1.1.作为drawable资源使用时,一般和shape一样放于drawable目录下,item必须指定android:drawable属性。
1.2.作为color资源使用时,则放于color目录下,item必须指定android:color属性。
属性 | 含义 |
---|---|
drawable | color颜色或者其他drawable或图片等 |
state_enabled | 设置触摸或点击事件是否可用状态**,一般只在false时设置该属性,表示不可用状态 |
state_pressed | 设置是否按压状态**,一般在true时设置该属性,表示已按压状态,默认为false |
state_selected | 设置是否选中状态**,true表示已选中,false表示未选中 |
state_checked | 设置是否勾选状态**,主要用于CheckBox和RadioButton,true表示已被勾选,false表示未被勾选 |
state_checkable | 设置勾选是否可用状态**,类似state_enabled,只是state_enabled会影响触摸或点击事件,state_checkable影响勾选事件 |
state_focused | 设置是否获得焦点状态**,true表示获得焦点,默认为false,表示未获得焦点 |
state_window_focused | 设置当前窗口是否获得焦点状态**,true表示获得焦点,false表示未获得焦点,例如拉下通知栏或弹出对话框时, 当前界面就会失去焦点;另外,ListView的ListItem获得焦点时也会触发true状态,可以理解为当前窗口就是ListItem本身 |
state_activated | 设置是否被激活状态**,true表示被激活,false表示未激活,API Level 11及以上才支持,可通过代码调用控件的setActivated(boolean)方法设置是否激活该控件 |
state_hovered | 设置是否鼠标在上面滑动的状态**,true表示鼠标在上面滑动,默认为false,API Level 14及以上才支持 |
exitFadeDuration | 状态改变时,旧状态消失时的淡出时间,以毫秒为单位 |
enterFadeDuration | 状态改变时,新状态展示时的淡入时间,以毫秒为单位 |
>>案例
1、下面就用两个button一个checkbox来说明吧
![img_b5e9a3805a769dc5d40ac68616c329ff.png](https://yqfile.alicdn.com/img_b5e9a3805a769dc5d40ac68616c329ff.png?x-oss-process=image/resize,w_1400/format,webp)
1.button不能按,checkbox不能选中
![img_7a2140ce7611db30b305722c076d5e3d.png](https://yqfile.alicdn.com/img_7a2140ce7611db30b305722c076d5e3d.png?x-oss-process=image/resize,w_1400/format,webp)
2.button可以按并按中,checkbox选中了
![img_2625e1e388079b04deb4032916873e3a.png](https://yqfile.alicdn.com/img_2625e1e388079b04deb4032916873e3a.png?x-oss-process=image/resize,w_1400/format,webp)
3.又再次关闭使用,button2是1的优化版,还带有弧角
2、代码部分
2.1.button
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--异常:tag requires a 'drawable' attribute or child tag defining a drawable
可用drawable下的shape中添加color颜色值-->
<!--<item android:state_enabled="false" android:color="@color/gray_5"/>-->
<!--不可用-->
<item android:state_enabled="false" android:drawable="@color/gray_5"/>
<!--未按压-->
<item android:state_enabled="true"
android:state_pressed="false" android:drawable="@color/green" />
<!--光标在-->
<item android:state_enabled="true"
android:state_focused="true" android:drawable="@color/lightgreen" />
<!--按压-->
<item android:state_enabled="true"
android:state_pressed="true" android:drawable="@color/orange" />
</selector>
2.2.checkbox
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--不可用,未选中-->
<item android:state_enabled="false"
android:state_checked="false"
android:drawable="@mipmap/un_check_gray"/>
<!--不可用,选中-->
<item android:state_enabled="false"
android:state_checked="true"
android:drawable="@mipmap/is_check_gray"/>
<!--可用,未选中-->
<item android:state_enabled="true"
android:state_checked="false"
android:drawable="@mipmap/un_check_purl"/>
<!--可用,选中-->
<item android:state_enabled="true"
android:state_checked="true"
android:drawable="@mipmap/is_check_purl"/>
</selector>
2.3.button2
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<!-- 填充颜色 -->
<solid android:color="?attr/colorPrimary"></solid>
<!-- 线的宽度,颜色灰色 -->
<stroke android:width="0dp" android:color="#D5D5D5"></stroke>
<!-- 矩形的圆角半径 -->
<corners android:radius="6dip" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<!-- 填充颜色 -->
<solid android:color="?attr/colorPrimary"></solid>
<!-- 线的宽度,颜色灰色 -->
<stroke android:width="0dp" android:color="#D5D5D5"></stroke>
<!-- 矩形的圆角半径 -->
<corners android:radius="6dip" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<!-- 填充颜色 -->
<solid android:color="?attr/colorAccent"></solid>
<!-- 线的宽度,颜色灰色 -->
<stroke android:width="0dp" android:color="#D5D5D5"></stroke>
<!-- 矩形的圆角半径 -->
<corners android:radius="6dip" />
</shape>
</item>
</selector>
三、layer-list - LayerDrawable:层叠图样
>>标签含义
1、layer-list下的item标签。上面已经讲过了,item下面能放各种样式的drawable或者shape图样
>>案例
1、上左右,乱七八糟阴影,内部渐变色,坐上右上弧角
2、阴影图案
![img_c756dcccffc2badd6015cc320eebc32c.png](https://yqfile.alicdn.com/img_c756dcccffc2badd6015cc320eebc32c.png?x-oss-process=image/resize,w_1400/format,webp)
layer-list.png
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--radius top_left,top_right-->
<!--shadow top,left,right-->
<!--从外到内,层层递进-->
<!-- 最外层:上左右距外围2dp,内部是渐变色1、右上带弧度的矩形 -->
<item
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<solid android:color="@color/gray_3" />
<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
<!-- 第二层:上左右距外围4dp,内部是渐变色2、右上带弧度的矩形 -->
<item
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle">
<solid android:color="@color/gray_5" />
<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
<!-- 第三层:上左右距外围6dp,内部是渐变色3、右上带弧度的矩形 -->
<item
android:left="6dp"
android:right="6dp"
android:top="6dp">
<shape android:shape="rectangle">
<solid android:color="@color/gray_7" />
<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
<!-- 最内层:上左右距外围8dp,内部是渐变色的左上、右上带弧度的矩形 -->
<item
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle">
<gradient
android:angle="45"
android:startColor="@color/wx_green"
android:endColor="@color/limegreen"
android:type="linear"/>
<corners android:topLeftRadius="12dp"
android:topRightRadius="12dp"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--底层的左边距离上层左边3dp, 底层的顶部,距离上层的顶部6dp,如果不做这个控制,底层和上层的左侧和上侧会重合在一起-->
<item android:left="3dp"
android:top="6dp">
<shape>
<solid android:color="#b4b5b6"/>
</shape>
</item>
<!--上层的右边距离底层的右边3dp, 上层的底部距离底层的底部6dp-->
<item android:bottom="6dp"
android:right="3dp">
<shape>
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>
四、level-list - LevelListDrawable:不同程度图样
1、level-list下的item标签。
属性 | 含义 |
---|---|
minLevel | 最小值 |
maxLevel | 最大值 |
drawable | 图样 |
>>案例:比方说电量、wifi质量,音量等
![img_15c75685ec94699d3b55a486e2ff6e84.png](https://yqfile.alicdn.com/img_15c75685ec94699d3b55a486e2ff6e84.png?x-oss-process=image/resize,w_1400/format,webp)
battery_level.png
<?xml version="1.0" encoding="utf-8"?>
<!--此处有个坑,顺讯必须从小到大-->
<level-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:minLevel="0" android:maxLevel="19" android:drawable="@drawable/battery_0" />
<item android:minLevel="20" android:maxLevel="39" android:drawable="@drawable/battery_1" />
<item android:minLevel="40" android:maxLevel="59" android:drawable="@drawable/battery_2" />
<item android:minLevel="60" android:maxLevel="79" android:drawable="@drawable/battery_3" />
<item android:minLevel="80" android:maxLevel="99" android:drawable="@drawable/battery_4" />
<item android:minLevel="100" android:maxLevel="100" android:drawable="@drawable/battery_5" />
</level-list>
iv_level_battery.getDrawable().setLevel(25);
iv_level_battery_2.getDrawable().setLevel(63);
iv_level_battery_3.getDrawable().setLevel(100);
五、transition - TransitionDrawable:渐变图样
>>标签含义
1、transition下的item标签。上面已经讲过了,item下面能放各种样式的drawable或者shape图样还有自己的属性top,left等
>>案例
1、电量变化
![img_52e0785a7df044d5d86123ad651c5855.gif](https://yqfile.alicdn.com/img_52e0785a7df044d5d86123ad651c5855.gif?x-oss-process=image/resize,w_1400/format,webp)
draw_transition.gif
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@mipmap/battery_1" />
<item android:drawable="@mipmap/battery_5" />
</transition>
//得到一个Drawable,属于 TransitionDrawable 类型的
TransitionDrawable transition = (TransitionDrawable)getResources().
getDrawable(R.drawable.draw_transition);
iv_transition_battery.setImageDrawable(transition);
transition.startTransition(2000); // 设定渐变的变化市场
六、ripple - RippleDrawable:波纹图样
>>标签含义
1、ripple有下的item标签。上面已经讲过了,item下面能放各种样式的drawable或者shape图样还有自己的属性top,left等
ripple属性 | 含义 |
---|---|
color | 波纹颜色 |
tools:targetApi | lollipop,必须这个api以上才能用 |
>>案例
1、波纹变化,外放,内部与颜色叠加。gif图片播放太快了,实际没那么快
![img_28468b666100f6c67d99a0e6d7c9d60e.gif](https://yqfile.alicdn.com/img_28468b666100f6c67d99a0e6d7c9d60e.gif?x-oss-process=image/resize,w_1400/format,webp)
draw_ripple.2018-10-19 14_58_15.gif
1.1、单纯ripple,控件高度是wrap_content的话,那么波纹外扩
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">
</ripple>
1.2、加一个item,有背景色,那么不会外扩,含定在此drawable中了
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">
<item
android:drawable="@color/wx_green" />
</ripple>
1.3、加一个蒙版遮罩,范围限定了,但是drawable设置颜色无用
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">
<!--mask遮罩,设置的drawable颜色会失效-->
<item
android:id="@android:id/mask"
android:drawable="@color/wx_green" />
</ripple>
1.4、弧角矩形按钮点击波纹效果
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="@color/red"
tools:targetApi="lollipop">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/wx_green" />
<corners android:radius="12dp" />
</shape>
</item>
</ripple>
七、inset - InsetDrawable:内嵌图样
>>标签含义
1、inset有下的shape标签。
inset属性 | 含义 |
---|---|
insetTop | 嵌入内部上边 |
insetBottom | 嵌入内部下边 |
insetLeft | 嵌入内部左边 |
insetRight | 嵌入内部右边 |
>>案例
1、内嵌一个图案、感觉没太大用~~
![img_7ec44a3be80e1b5a0827c5eafd7cfd72.png](https://yqfile.alicdn.com/img_7ec44a3be80e1b5a0827c5eafd7cfd72.png?x-oss-process=image/resize,w_1400/format,webp)
inset.png
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="10dp"
android:insetBottom="10dp"
android:insetLeft="10dp"
android:insetRight="10dp">
<!--待会要插入的一个蓝色的矩形-->
<shape android:shape="rectangle" >
<solid android:color="@color/orange" />
</shape>
</inset>
八、scale - ScaleDrawable:缩放图样
>>标签含义
1、scale标签。
scale属性 | 含义 |
---|---|
drawable | 资源引用 |
scaleGravity | 缩放的方向, 比如: top, 缩放的时候就会向顶部靠拢,bottom, 缩放时会想底部靠拢; |
scaleHeight | 表示Drawable能够在高度上缩放的百分比, 比如: 50%, |
scaleWidth | 表示Drawable能够在宽度上缩放的百分比, 同上 |
>>案例
1、一般做图片的缩放时候用到
![img_61b977007a0e00ebdda2fcd0139d8e49.gif](https://yqfile.alicdn.com/img_61b977007a0e00ebdda2fcd0139d8e49.gif?x-oss-process=image/resize,w_1400/format,webp)
draw_scale.gif
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/android"
android:scaleGravity="left"
android:scaleWidth="50%"
android:scaleHeight="100%"
>
</scale>
//Scale Drawable不能单独的使用, 他需要配合Level等级使用, level的取值是0~10000, (0为不可见)
sk_scale.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
int max = seekBar.getMax();
double scale = (double)progress/(double)max;
ScaleDrawable drawable = (ScaleDrawable) iv_scale.getDrawable();
drawable.setLevel((int) (10000*scale));
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) { }
@Override
public void onStopTrackingTouch(SeekBar seekBar) { }
});
九、clip - ClipDrawable:剪切的图样
>>标签含义
1、clip标签。
clip属性 | 含义 |
---|---|
drawable | 资源引用 |
clipOrientation | top\bottom\left\right\gravity,fill... 横向,竖向,中间... |
gravity | left,right,top,bottom--哪个方向开始 |
>>案例
1、一般可用作温度计啊、声音啊,各种程度的东西。
![img_4ccdf3cea843233c812ef8f0a5502caa.gif](https://yqfile.alicdn.com/img_4ccdf3cea843233c812ef8f0a5502caa.gif?x-oss-process=image/resize,w_1400/format,webp)
draw_clip.gif
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/draw_shape_rectangle_linear_gradient"
android:clipOrientation="horizontal"
android:gravity="left">
</clip>
//Clip Drawable也要level才有用
sk_clip.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
int max = seekBar.getMax();
double scale = (double)progress/(double)max;
ClipDrawable drawable = (ClipDrawable) tv_clip.getBackground();
drawable.setLevel((int) (10000*scale));
tv_clip.setText("Clip Progress = "+progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});
十、rotate - RotateDrawable:旋转图样
>>标签含义
1、rotate标签。
clip属性 | 含义 |
---|---|
drawable | 资源引用 |
visible | 是否可见 |
pivotX | pivotX表示旋转轴心在x轴横坐标上的位置,用百分比表示,表示在当前drawable总宽度百分之几的位置。 |
pivotY | 同上,Y轴方向的 |
fromDegrees | 从什么角度开始 |
toDegrees | 到什么角度 |
>>案例
1、一般可用作循环的东西,比如唱片啊,loading等待框啊~~
![img_15e2eb04c891854dbb600ab759089f50.gif](https://yqfile.alicdn.com/img_15e2eb04c891854dbb600ab759089f50.gif?x-oss-process=image/resize,w_1400/format,webp)
draw_rotate.gif
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/draw_shape_ring_gradient"
android:fromDegrees="0"
android:toDegrees="360">
</rotate>
//Rotate Drawable也要level才有用
sk_rotate.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
int max = seekBar.getMax();
double scale = (double)progress/(double)max;
RotateDrawable drawable = (RotateDrawable) tv_rotate.getBackground();
drawable.setLevel((int) (10000*scale));
tv_rotate.setText("Rotate Progress = "+progress);
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});
十一、animation-list - AnimationDrawable:动画效果图样
>>标签含义
1、animation-list标签下有item(drawable和duration属性)标签。
animation-list属性 | 含义 |
---|---|
oneshot | 是否一次,不然就是循环 |
>>案例
1、欢迎界面展示啊等等。。。
<?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/battery_1" android:duration="200"/>
<item android:drawable="@drawable/battery_3" android:duration="200"/>
<item android:drawable="@drawable/battery_5" android:duration="200"/>
</animation-list>
//AnimationDrawable mAnimationDrawable = new AnimationDrawable();
//mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue01), 150);
//mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue02), 150);
//mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue03), 150);
//mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue04), 150);
//mAnimationDrawable.addFrame(getResources().getDrawable(R.color.blue05), 150);
//mAnimationDrawable.setOneShot(false);
AnimationDrawable a = (AnimationDrawable)btn_animation_list.getBackground();
a.start();//a.stop \ a.isRunning()
十二、bitmap - BitmapDrawable
1、截图
![img_a4a7413ae521c320dab10c107925f044.png](https://yqfile.alicdn.com/img_a4a7413ae521c320dab10c107925f044.png?x-oss-process=image/resize,w_1400/format,webp)
bd-mirror.png
![img_04eecfe8c93a7774fb81a85775926fc4.png](https://yqfile.alicdn.com/img_04eecfe8c93a7774fb81a85775926fc4.png?x-oss-process=image/resize,w_1400/format,webp)
bd-repeat.png
![img_c9007cdfff234812b45b77d015274164.png](https://yqfile.alicdn.com/img_c9007cdfff234812b45b77d015274164.png?x-oss-process=image/resize,w_1400/format,webp)
bd-clamp.png
![img_ac9cd6bcdd6d7681e3b1a4ed5c17078c.png](https://yqfile.alicdn.com/img_ac9cd6bcdd6d7681e3b1a4ed5c17078c.png?x-oss-process=image/resize,w_1400/format,webp)
bd-disabled.png
2、内容
xml属性 | 含义 | 代码 |
---|---|---|
src | 资源:color\drawable | - |
antialias | 抗锯齿,建议开启 | bitmapDrawable.setAntiAlias(true); |
dither | 颤抖处理:平滑,饱满,清晰,建议开启 | bitmapDrawable.setDither(true); |
filter | 位图过滤:平滑,建议开启 | bitmapDrawable.setFilterBitmap(true); |
gravity | 位置[start,end,top,bottom,center...] | bitmapDrawable.setGravity(Gravity.START); |
mipMap | 文理映射,建议关闭 | bitmapDrawable.setMipMap(false); |
tileMode | 平铺方式 disabled-不使用平铺 clamp-复制边缘色彩 repeat-重复 mirror-镜像] |
bitmapDrawable.setTileModeXY(Shader.TileMode.CLAMP,Shader.TileMode.CLAMP); bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT,Shader.TileMode.REPEAT); bitmapDrawable.setTileModeXY(Shader.TileMode.MIRROR,Shader.TileMode.MIRROR); |
3、代码
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/android"
android:antialias="true"
android:dither="true"
android:filter="true"
android:gravity="left"
android:mipMap="false"
android:tileMode="repeat"
/>
Bitmap bitmap = BitmapFactory.decodeResource(instance.getResources(),
R.drawable.android);//drawable\mipmap\color...
BitmapDrawable bitmapDrawable = new BitmapDrawable(bitmap);
bitmapDrawable.setAntiAlias(true);//抗锯齿
bitmapDrawable.setDither(true);//抖动平滑
bitmapDrawable.setFilterBitmap(true);//过滤平滑
bitmapDrawable.setGravity(Gravity.START);
//bitmapDrawable.setMipMap(false);
//复制边缘色彩
bitmapDrawable.setTileModeXY(Shader.TileMode.CLAMP,Shader.TileMode.CLAMP);
//重复
bitmapDrawable.setTileModeXY(Shader.TileMode.REPEAT,Shader.TileMode.REPEAT);
//镜像
bitmapDrawable.setTileModeXY(Shader.TileMode.MIRROR,Shader.TileMode.MIRROR);
ll_bitmap_drawale.setBackground(bitmapDrawable);
十三、nine-patch - NinePatchDrawable
1、这个是.9图,使用方法和上面bitmap类似,不赘述。好处是可以动态拉伸此图片某些边的时候而不造成整体变形。
<?xml version="1.0" encoding="utf-8"?>
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@color/colorPrimary"
android:antialias="true"
android:dither="true"
android:filter="true"
android:gravity="center"
android:mipMap="false"
android:tileMode="disabled"
/>