Android drawable下各类标签的使用说明
1. selector 状态选择器
设置不同状态的表现形式,在不同的场景下控件显示对应的不同状态。
设置文字的 selector 状态选择器,需要在 res 文件夹下新建名为 color 文件夹,再在该文件夹下新建需要设置的文字样式(比如 @color/text_color_ selector
文件)。
设置按钮的 selector 状态选择器,直接在 drawable 文件夹下,新建需要的显示样式(比如 @drawable/btn_selector
)。
<selector>
的根节点可以包含一个或多个 <item>
元素。下面总结了一些常用的属性设置。
android:state_pressed
"true"
:控件被按下状态时使用该 item 标签下的样式,比如按钮被按下
"false"
:控件没被按下时使用该 item 标签下的样式
android:state_checkable
"true"
:控件可勾选状态时使用该 item 标签下的样式
"false"
:控件不可勾选状态时使用...
android:state_checked
"true"
:控件被勾选状态时使用...
"false"
:控件未勾选状态时使用...
android:state_enabled
"true"
:控件处于可用状态时使用(能够响应触摸/点击事件)
"false"
:控件处于不可用状态时使用...
需要注意的是在除了按钮的控件下使用 selector 文件来设置显示样式,大多数需要为控件添加可点击的属性 android:clickable="true"
,如果不添加该属性可能使得设置的显示样式没有反应。
还有就是 item 的排列位置也很关键。selector 状态选择器只会根据当前状态按顺序匹配多个 item 中第一个满足条件的 item 样式进行设置。所以如果把默认的 item 样式放在最前面,则后面的各个状态都不会起作用。
示例代码:
@color/text_color_selector
文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorAccent" android:state_pressed="true"/>
<item android:color="@color/colorPrimary"/>
</selector>
@drawable/btn_selector
文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorPrimary" android:state_pressed="true" />
<item android:drawable="@color/colorAccent"/>
</selector>
布局文件中
<Button
android:layout_width="100dp"
android:layout_height="60dp"
android:text="Hello World!"
android:gravity="center"
android:background="@drawable/btn_selector"
android:textColor="@color/text_color_selector"
/>
...
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:clickable="true"
android:text="@string/action_settings"
android:textColor="@color/text_color_selector"
/>
2. shape 绘制图形
shape 标签可以绘制矩形环形以及椭圆。如果要显示正圆我们只需设置引用该样式的控件的宽高值相等即可。
solid
表示图形的填充色,stroke
表示图形的边框线,可以设置边框线的宽度和颜色。size
表示图形的大小。
示例代码:
@drawable/text_around
文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="@color/colorAccent" />
<stroke android:width="1dp"
android:color="@color/colorPrimary"/>
</shape>
3. level-list 图片组
当需要在一个 View 中显示不同图片的时候,比如手机剩余电量不同时显示的图片不同,<level-list>
就可以派上用场了。
<level-list>
可以管理一组 drawable,每个 drawable 设置一组 level 范围,最终会根据 level 值选取对应的 drawable 绘制出来。<level-list>
通过添加 item 子标签来添加相应的 drawable,其下的 item 只有三个属性:
android:drawable
指定 drawable 资源,android:minLevel
该 item 的最小 level 值 android:maxLevel
该 item 的最大 level 值。
示例代码:
@drawable/power_level
文件
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_battery_20" android:minLevel="0" android:maxLevel="20"/>
<item android:drawable="@drawable/ic_battery_50" android:minLevel="21" android:maxLevel="50"/>
<item android:drawable="@drawable/ic_battery_99" android:minLevel="51" android:maxLevel="99"/>
<item android:drawable="@drawable/ic_battery_full" android:minLevel="100" android:maxLevel="100"/>
</level-list>
布局文件
...
<ImageView
android:id="@+id/power_img"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/power_level"/>
...
在代码中设置要显示的 level 值
imageView.getDrawable().setLevel(20);
item 的匹配规则是从上到下的,当设置的 level 值与前面的 item 的 level 范围匹配,则采用。一般 item 的添加按 maxLevel 从小到大排序下来,此时 minLevel 可以不用指定。即上面的代码可以简写如下:
<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_battery_20" android:maxLevel="20"/>
<item android:drawable="@drawable/ic_battery_50" android:maxLevel="50"/>
<item android:drawable="@drawable/ic_battery_99" android:maxLevel="99"/>
<item android:drawable="@drawable/ic_battery_full" android:maxLevel="100"/>
</level-list>
但如果倒过来写,不管代码中设置的 level 值为多少,都只会匹配第一条 item。
4. Transition 图片淡入淡出效果
<transition>
标签和 <level-list>
类似,只是,transition 只能管理两层 drawable,提供两层 drawable 之间的切换方法,切换时有淡入淡出的动画效果。
示例代码:
@drawable/power_transition
文件
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_battery_20"/>
<item android:drawable="@drawable/ic_battery_full"/>
</transition>
代码中通过标签文件得到 TransitionDrawable 对象,再进行手动调用 startTransition()
方法。
...
final TransitionDrawable transitionDrawable = (TransitionDrawable)getResources().
getDrawable(R.drawable.power_transition);
imageView.setImageDrawable(transitionDrawable);
...
// 正向过渡
transitionDrawable.startTransition(2000); // 开始动画过渡时长
// 反向过渡
transitionDrawable.reverseTransition(2000);
...
5. animation-list 构建帧动画
通过 animation-list
可以将一系列 drawable 构建成帧动画。添加 item 子标签设置每一帧使用的 drawable 资源,以及每一帧持续的时间。
android:oneshot
属性设置是否循环播放,设为 true 时,只播放一轮就结束,设为 false 时,则会循环播放。
android:duration
属性设置该帧持续的时间,以毫秒数为单位。
示例代码
drawable.power_loading
文件
<?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/ic_battery_20"
android:duration="1000"
/>
<item
android:drawable="@drawable/ic_battery_50"
android:duration="1000"
/>
<item
android:drawable="@drawable/ic_battery_80"
android:duration="1000"
/>
<item
android:drawable="@drawable/ic_battery_full"
android:duration="1000"
/>
</animation-list>
animation-list
对应的 Drawable 类为 AnimationDrawable
,要让动画运行起来,需要主动调用 AnimationDrawable 的 start()
方法。
final AnimationDrawable animationDrawable = (AnimationDrawable) getResources().
getDrawable(R.drawable.power_loading);
imageView.setImageDrawable(animationDrawable);
animationDrawable.start();
6. animated-rotate 图片旋转动画
rotate
标签只是将原有的 drawable 转个角度变成另一个 drawable,它是静态的。而 animated-rotate
则会让 drawable 不停地做旋转动画。
示例代码
drawable.my_rotate
文件
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_launcher"
android:pivotX="50%"
android:pivotY="50%"
/>
布局文件
...
<ImageView
android:layout_width="160dp"
android:layout_height="160dp"
android:background="@drawable/my_rotate"/>
...