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"/>
...
posted @ 2018-03-05 21:06  YouseiRaws  阅读(597)  评论(0编辑  收藏  举报