07_Android drawable下各類標(biāo)簽的使用說(shuō)明

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匯總篇,寫的很全剪个,有收獲秧骑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市扣囊,隨后出現(xiàn)的幾起案子乎折,更是在濱河造成了極大的恐慌,老刑警劉巖侵歇,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件骂澄,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡盒至,警方通過(guò)查閱死者的電腦和手機(jī)酗洒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)枷遂,“玉大人樱衷,你說(shuō)我怎么就攤上這事【瓢Γ” “怎么了矩桂?”我有些...
    開(kāi)封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)痪伦。 經(jīng)常有香客問(wèn)我侄榴,道長(zhǎng),這世上最難降的妖魔是什么网沾? 我笑而不...
    開(kāi)封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任癞蚕,我火速辦了婚禮,結(jié)果婚禮上辉哥,老公的妹妹穿的比我還像新娘桦山。我一直安慰自己攒射,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布恒水。 她就那樣靜靜地躺著会放,像睡著了一般。 火紅的嫁衣襯著肌膚如雪钉凌。 梳的紋絲不亂的頭發(fā)上咧最,一...
    開(kāi)封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音御雕,去河邊找鬼矢沿。 笑死,一個(gè)胖子當(dāng)著我的面吹牛饮笛,可吹牛的內(nèi)容都是我干的咨察。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼福青,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了脓诡?” 一聲冷哼從身側(cè)響起无午,我...
    開(kāi)封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祝谚,沒(méi)想到半個(gè)月后宪迟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡交惯,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年次泽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片席爽。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡意荤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出只锻,到底是詐尸還是另有隱情玖像,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布齐饮,位于F島的核電站捐寥,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏祖驱。R本人自食惡果不足惜握恳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望捺僻。 院中可真熱鬧乡洼,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至妻怎,卻和暖如春壳炎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背逼侦。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工匿辩, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人榛丢。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓铲球,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親晰赞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子稼病,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,341評(píng)論 25 707
  • 概述 今天我們來(lái)探究一下android的樣式。其實(shí)掖鱼,幾乎所有的控件都可以使用 background屬性去引用自定義...
    CokeNello閱讀 4,859評(píng)論 1 19
  • 轉(zhuǎn)載自Keegan小鋼并標(biāo)明原文鏈接:http://keeganlee.me/post/android/20150...
    堅(jiān)持編程_lyz閱讀 1,129評(píng)論 0 1
  • 觀察這株萬(wàn)年青大約有十幾天時(shí)間了然走。它一天一個(gè)樣兒的呈現(xiàn),使我不得不戏挡,從內(nèi)心開(kāi)始對(duì)一株植物進(jìn)行仰視芍瑞。 清楚地記得,剛...
    郭陽(yáng)芳閱讀 670評(píng)論 2 2
  • 聊聊八卦褐墅,說(shuō)說(shuō)所見(jiàn)拆檬。八卦當(dāng)然就是,就是什么呢妥凳?愿意看的就跟著我來(lái)竟贯,覺(jué)得無(wú)聊不屑的就略過(guò)吧。 有一個(gè)...
    富思竭慮閱讀 218評(píng)論 0 0