07_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"/>
...

参考文章
ANDROID样式的开发:DRAWABLE汇总篇,写的很全,有收获。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,591评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,448评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,823评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,204评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,228评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,190评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,078评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,923评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,334评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,428评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,022评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,079评论 25 707
  • 概述 今天我们来探究一下android的样式。其实,几乎所有的控件都可以使用 background属性去引用自定义...
    CokeNello阅读 4,830评论 1 19
  • 转载自Keegan小钢并标明原文链接:http://keeganlee.me/post/android/20150...
    坚持编程_lyz阅读 1,126评论 0 1
  • 观察这株万年青大约有十几天时间了。它一天一个样儿的呈现,使我不得不,从内心开始对一株植物进行仰视。 清楚地记得,刚...
    郭阳芳阅读 666评论 2 2
  • 聊聊八卦,说说所见。八卦当然就是,就是什么呢?愿意看的就跟着我来,觉得无聊不屑的就略过吧。 有一个...
    富思竭虑阅读 195评论 0 0