1. selector 狀態(tài)選擇器
設(shè)置不同狀態(tài)的表現(xiàn)形式身冬,在不同的場(chǎng)景下控件顯示對(duì)應(yīng)的不同狀態(tài)。
設(shè)置文字的 selector 狀態(tài)選擇器,需要在 res 文件夾下新建名為 color 文件夾,再在該文件夾下新建需要設(shè)置的文字樣式(比如 @color/text_color_ selector
文件)席赂。
設(shè)置按鈕的 selector 狀態(tài)選擇器,直接在 drawable 文件夾下时迫,新建需要的顯示樣式(比如 @drawable/btn_selector
)颅停。
<selector>
的根節(jié)點(diǎn)可以包含一個(gè)或多個(gè) <item>
元素。下面總結(jié)了一些常用的屬性設(shè)置掠拳。
android:state_pressed
"true"
:控件被按下?tīng)顟B(tài)時(shí)使用該 item 標(biāo)簽下的樣式癞揉,比如按鈕被按下
"false"
:控件沒(méi)被按下時(shí)使用該 item 標(biāo)簽下的樣式
android:state_checkable
"true"
:控件可勾選狀態(tài)時(shí)使用該 item 標(biāo)簽下的樣式
"false"
:控件不可勾選狀態(tài)時(shí)使用...
android:state_checked
"true"
:控件被勾選狀態(tài)時(shí)使用...
"false"
:控件未勾選狀態(tài)時(shí)使用...
android:state_enabled
"true"
:控件處于可用狀態(tài)時(shí)使用(能夠響應(yīng)觸摸/點(diǎn)擊事件)
"false"
:控件處于不可用狀態(tài)時(shí)使用...
需要注意的是在除了按鈕的控件下使用 selector 文件來(lái)設(shè)置顯示樣式,大多數(shù)需要為控件添加可點(diǎn)擊的屬性 android:clickable="true"
,如果不添加該屬性可能使得設(shè)置的顯示樣式?jīng)]有反應(yīng)喊熟。
還有就是 item 的排列位置也很關(guān)鍵柏肪。selector 狀態(tài)選擇器只會(huì)根據(jù)當(dāng)前狀態(tài)按順序匹配多個(gè) item 中第一個(gè)滿足條件的 item 樣式進(jìn)行設(shè)置。所以如果把默認(rèn)的 item 樣式放在最前面逊移,則后面的各個(gè)狀態(tài)都不會(huì)起作用预吆。
示例代碼:
@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 標(biāo)簽可以繪制矩形環(huán)形以及橢圓。如果要顯示正圓我們只需設(shè)置引用該樣式的控件的寬高值相等即可胳泉。
solid
表示圖形的填充色,stroke
表示圖形的邊框線岩遗,可以設(shè)置邊框線的寬度和顏色扇商。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 圖片組
當(dāng)需要在一個(gè) View 中顯示不同圖片的時(shí)候宿礁,比如手機(jī)剩余電量不同時(shí)顯示的圖片不同案铺,<level-list>
就可以派上用場(chǎng)了。
<level-list>
可以管理一組 drawable梆靖,每個(gè) drawable 設(shè)置一組 level 范圍控汉,最終會(huì)根據(jù) level 值選取對(duì)應(yīng)的 drawable 繪制出來(lái)。<level-list>
通過(guò)添加 item 子標(biāo)簽來(lái)添加相應(yīng)的 drawable返吻,其下的 item 只有三個(gè)屬性:
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"/>
...
在代碼中設(shè)置要顯示的 level 值
imageView.getDrawable().setLevel(20);
item 的匹配規(guī)則是從上到下的测僵,當(dāng)設(shè)置的 level 值與前面的 item 的 level 范圍匹配街佑,則采用。一般 item 的添加按 maxLevel 從小到大排序下來(lái),此時(shí) minLevel 可以不用指定捍靠。即上面的代碼可以簡(jiǎn)寫如下:
<?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>
但如果倒過(guò)來(lái)寫沐旨,不管代碼中設(shè)置的 level 值為多少,都只會(huì)匹配第一條 item榨婆。
4. Transition 圖片淡入淡出效果
<transition>
標(biāo)簽和 <level-list>
類似磁携,只是,transition 只能管理兩層 drawable良风,提供兩層 drawable 之間的切換方法谊迄,切換時(shí)有淡入淡出的動(dòng)畫效果。
示例代碼:
@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>
代碼中通過(guò)標(biāo)簽文件得到 TransitionDrawable 對(duì)象拖吼,再進(jìn)行手動(dòng)調(diào)用 startTransition()
方法鳞上。
...
final TransitionDrawable transitionDrawable = (TransitionDrawable)getResources().
getDrawable(R.drawable.power_transition);
imageView.setImageDrawable(transitionDrawable);
...
// 正向過(guò)渡
transitionDrawable.startTransition(2000); // 開(kāi)始動(dòng)畫過(guò)渡時(shí)長(zhǎng)
// 反向過(guò)渡
transitionDrawable.reverseTransition(2000);
...
5. animation-list 構(gòu)建幀動(dòng)畫
通過(guò) animation-list
可以將一系列 drawable 構(gòu)建成幀動(dòng)畫。添加 item 子標(biāo)簽設(shè)置每一幀使用的 drawable 資源吊档,以及每一幀持續(xù)的時(shí)間篙议。
android:oneshot
屬性設(shè)置是否循環(huán)播放,設(shè)為 true 時(shí),只播放一輪就結(jié)束鬼贱,設(shè)為 false 時(shí)移怯,則會(huì)循環(huán)播放。
android:duration
屬性設(shè)置該幀持續(xù)的時(shí)間这难,以毫秒數(shù)為單位舟误。
示例代碼
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
對(duì)應(yīng)的 Drawable 類為 AnimationDrawable
,要讓動(dòng)畫運(yùn)行起來(lái)姻乓,需要主動(dòng)調(diào)用 AnimationDrawable 的 start()
方法嵌溢。
final AnimationDrawable animationDrawable = (AnimationDrawable) getResources().
getDrawable(R.drawable.power_loading);
imageView.setImageDrawable(animationDrawable);
animationDrawable.start();
6. animated-rotate 圖片旋轉(zhuǎn)動(dòng)畫
rotate
標(biāo)簽只是將原有的 drawable 轉(zhuǎn)個(gè)角度變成另一個(gè) drawable,它是靜態(tài)的蹋岩。而 animated-rotate
則會(huì)讓 drawable 不停地做旋轉(zhuǎn)動(dòng)畫赖草。
示例代碼
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樣式的開(kāi)發(fā):DRAWABLE匯總篇,寫的很全剪个,有收獲秧骑。