《Android編程權(quán)威指南》之XML drawable篇筆錄

本章內(nèi)容的項(xiàng)目實(shí)戰(zhàn)呢,是在美化BeatBox應(yīng)用色解,由于沒(méi)有實(shí)踐此應(yīng)用茂嗓,那以Demo形式來(lái)總結(jié)此章的核心知識(shí)點(diǎn)吧。

凡是要在屏幕上繪制的東西都可以叫作drawable科阎,比如抽象圖形述吸、Drawable類的子類、位圖圖像等锣笨。用來(lái)封裝圖片的BitmapDrawable也是一種drawable蝌矛。state list drawable、shape drawable 和 layer list drawable 統(tǒng)稱為XML drawable错英。

1. shape drawable

ShapeDrawable可以把按鈕變成圓形入撒。XML drawable和屏幕像素密度無(wú)關(guān),無(wú)需考慮創(chuàng)建特定像素密度目錄椭岩,直接放入drawable文件夾即可茅逮。

button_beat_box_normal.xml(書中例子)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorAccent" />
</shape>

截圖取自Demo
效果:
截圖取自Demo
shape圖形參數(shù)詳細(xì)解析:

  1. shape 圖形形狀
  2. corners 圓角標(biāo)簽(指定長(zhǎng)方形四角的圓滑度)
    • bottomLeftRadius 左下角
    • bottomRightRadius 右下角
    • topLeftRadius 左上角
    • topRightRadius 右上角
    • radius 是四個(gè)角噪伊,設(shè)置了這個(gè)就不需要設(shè)置上面的四個(gè)了,但是它的優(yōu)先級(jí)比較低氮唯, 會(huì)被上面的設(shè)置覆蓋鉴吹。
  3. gradient 階梯漸變標(biāo)簽
    • angle 是顏色變換的角度,默認(rèn)是0惩琉, 取值必須是45的倍數(shù)豆励, 0: 是顏色從左邊到右邊, 90:是顏色從底部到頂部
    • startColor centerColor endColor : 開(kāi)始的顏色瞒渠,中間的顏色良蒸, 結(jié)束的顏色
    • centerX centerY是指定位置坐標(biāo),取值是0.0f ~ 1.0f 之間伍玖,例如: android:centerX="0.5f" 表示X方向的中間位置
    • type 顏色漸變的類型嫩痰, 取值類型有三種:linear/radial/sweep
    • linear 線性漸變,就是顏色從左往右窍箍, 從下往上
    • radial 放射漸變串纺, 例如:從一個(gè)圓中心到圓的邊緣變化
    • sweep 掃描式漸變, 類似雷達(dá)掃描的那種圖形
    • gradientRadius 和android:type=”radial”一起連用椰棘,配置shape圖片的半徑
  4. padding 邊距標(biāo)簽(設(shè)置控件中(文字)內(nèi)容與shape圖片邊框的距離纺棺,bottom 底部距離,left 左邊距離邪狞,right 右邊距離祷蝌,top 頂部距離)
  5. size 大小標(biāo)簽(shape圖形的寬度和高度,這里一般不用設(shè)置帆卓,它的優(yōu)先級(jí)沒(méi)有控件的優(yōu)先級(jí)大)
  6. solid 背景標(biāo)簽(stroke標(biāo)簽中如果不指定color的顏色巨朦, 則默認(rèn)是黑色,solid標(biāo)簽會(huì)和gradient標(biāo)簽沖突, 會(huì)覆蓋gradient配置的顏色)
  7. stroke 邊框標(biāo)簽 (給shape圖形設(shè)置邊框剑令, 設(shè)置邊框的寬度糊啡, 顏色,實(shí)現(xiàn)還是虛線尚洽, 以及虛線的間隔大谢陂稀)
    • width 邊框線的寬度
    • color 邊框線的顏色
    • dashGap 虛線間隔的長(zhǎng)度
    • dashWidth 虛線中實(shí)線的長(zhǎng)度

shape圖形:

  1. rectangle 長(zhǎng)方形/默認(rèn)是長(zhǎng)方形
  2. oval 橢圓
  3. line 線(line形狀下,solid標(biāo)簽下的color會(huì)無(wú)效)
  4. ring 環(huán)形 (innerRadius——中間圓圈的半徑腺毫;innerRadiusRatio——如果和innerRadius同時(shí)存在, innerRadiusRatio無(wú)效癣疟,是一個(gè)比率: shape圖片寬度/內(nèi)半徑, 默認(rèn)是9;thickness——圓環(huán)的厚度潮酒,整的shape圖片的半徑減去內(nèi)圓的半徑睛挚;thicknessRatio——同樣如果和thickness同時(shí)存在,thicknessRatio無(wú)效急黎, 也是一個(gè)比率: shape圖片寬度/圓環(huán)厚度扎狱,默認(rèn)值是3侧到;useLevel—— 一般使用false)

2. state list drawable

這里例子就是在完善上一個(gè)知識(shí)點(diǎn)的按鈕按下?tīng)顟B(tài)的切換了,除了按下?tīng)顟B(tài)淤击,state list drawable還支持禁用匠抗、聚焦以及激活等狀態(tài)。

button_beat_box_pressed.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
   <solid android:color="@color/colorPrimary" />
</shape>

button_beat_box.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_beat_box_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_beat_box_normal" />
</selector>
截圖取自Demo

按下后的效果:


截圖取自Demo

當(dāng)然污抬,state list drawable還支持禁用汞贸、聚焦以及激活等狀態(tài)。

3. layer list drawable

layer list drawable能讓兩個(gè)XML drawable合二為一印机,現(xiàn)在為按下?tīng)顟B(tài)的添加一個(gè)深色的圓環(huán)矢腻。

button_beat_box_pressed.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="4dp"
                android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>
</layer-list>

按下效果:


截圖取自Demo

深入學(xué)習(xí):為什么要用XML drawable

  • 方便靈活、用法多樣射赛、易于更新維護(hù)多柑,搭配shape drawable 和 layer list drawable可作出復(fù)雜的背景圖,配色簡(jiǎn)單楣责。
  • XML drawable 獨(dú)立于屏幕像素密度竣灌,直接定義在drawable目錄中,不需要加屏幕密度資源修飾符腐魂,不需要準(zhǔn)備多個(gè)版本以適配更多設(shè)備帐偎。

深入學(xué)習(xí):使用 9-patch 圖像

(比如說(shuō)聊天界面的氣泡框逐纬,會(huì)用到這種圖片蛔屹,解決了不同長(zhǎng)度圖片或文字可能被拉伸的問(wèn)題)

  • 9-patch 圖像是一種特別處理過(guò)的文件,讓Android知道圖像的哪些部分是可以拉伸的豁生。
  • 9-patch 圖像分成 3 x 3 的網(wǎng)格兔毒,即由9部分或者9 patch組成的網(wǎng)格。網(wǎng)格角落部分不會(huì)被縮放甸箱。邊緣部分的4個(gè)patch只按一個(gè)維度縮放育叁,而中間部分則按兩個(gè)維度縮放。
截圖取于網(wǎng)上
  • 9-patch 圖像文件名以 .9.png結(jié)尾芍殖,圖邊緣具有1像素寬度的邊框豪嗽。
  • 任意圖形編輯器都可以用來(lái)創(chuàng)建 9-patch 圖像,Android SDK自帶的draw9patch工具更方便豌骏,工具地址:SDK安裝目錄下的tools中龟梦,找到打開(kāi)即可。


    截圖取自自身電腦
    截圖取自自身電腦
  • 9-patch工具中窃躲,把圖像頂部左邊填充為黑色计贰,以標(biāo)記圖像的可伸縮區(qū)域。 底部右邊定義可選drawable區(qū)域蒂窒,通常是繪制內(nèi)容躁倒,比如說(shuō)文字的地方荞怒,若不標(biāo)記drawable區(qū)域,則默認(rèn)與可拉伸區(qū)域保持一致秧秉。
  • Android Studio內(nèi)置有9-patch編輯器褐桌,可以直接在項(xiàng)目中把圖片轉(zhuǎn)換為9-patch圖,先重命名象迎,然后打開(kāi)撩嚼,就可以自行去設(shè)置.9圖了。
1
2
3

這個(gè)非常實(shí)用挖帘!

深入學(xué)習(xí):使用Mipmap圖像

推薦把應(yīng)用啟動(dòng)器圖標(biāo)放在mipmap目錄中完丽,其他圖片都放在drawable目錄中。

谷歌官方:

  • drawable/
    For bitmap files (PNG, JPEG, or GIF), 9-Patch image files, and XML files that describe Drawable shapes or Drawable objects that contain multiple states (normal, pressed, or focused). See the Drawable resource type.
  • mipmap/
    For app launcher icons. The Android system retains the resources in this folder (and density-specific folders such as mipmap-xxxhdpi) regardless of the screen resolution of the device where your app is installed. This behavior allows launcher apps to pick the best resolution icon for your app to display on the home screen. For more information about using the mipmap folders, see Managing Launcher Icons as mipmap Resources.

google說(shuō)圖片放入mipmap系統(tǒng)會(huì)在縮放上提供一定的性能優(yōu)化拇舀,使用上來(lái)說(shuō)逻族,drawable和mipmap上放普通圖片區(qū)別也不大。原來(lái)我們把項(xiàng)目中用到的png骄崩、jpeg圖片還有xml文件都是放在drawable中聘鳞,顯得還是很雜亂的,找個(gè)圖片多難哇~ 所以要拂,建議就把icon圖片放mipmap抠璃,然后xml就放drawable,這樣不錯(cuò)的脱惰。

建議尺寸:

截圖取自網(wǎng)絡(luò)
有一篇關(guān)于drawable很好的文章:https://blog.csdn.net/guolin_blog/article/details/50727753

參考里面的dpi范圍-密度表格:

截取自網(wǎng)絡(luò)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末搏嗡,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子拉一,更是在濱河造成了極大的恐慌采盒,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蔚润,死亡現(xiàn)場(chǎng)離奇詭異磅氨,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)嫡纠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門烦租,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人除盏,你說(shuō)我怎么就攤上這事叉橱。” “怎么了痴颊?”我有些...
    開(kāi)封第一講書人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵赏迟,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我蠢棱,道長(zhǎng)锌杀,這世上最難降的妖魔是什么甩栈? 我笑而不...
    開(kāi)封第一講書人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮糕再,結(jié)果婚禮上量没,老公的妹妹穿的比我還像新娘。我一直安慰自己突想,他們只是感情好殴蹄,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著猾担,像睡著了一般袭灯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上绑嘹,一...
    開(kāi)封第一講書人閱讀 51,624評(píng)論 1 305
  • 那天稽荧,我揣著相機(jī)與錄音,去河邊找鬼工腋。 笑死姨丈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的擅腰。 我是一名探鬼主播蟋恬,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼趁冈!你這毒婦竟也來(lái)了歼争?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤箱歧,失蹤者是張志新(化名)和其女友劉穎矾飞,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體呀邢,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年豹绪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了价淌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡瞒津,死狀恐怖蝉衣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情巷蚪,我是刑警寧澤病毡,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站屁柏,受9級(jí)特大地震影響啦膜,放射性物質(zhì)發(fā)生泄漏有送。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一僧家、第九天 我趴在偏房一處隱蔽的房頂上張望雀摘。 院中可真熱鬧,春花似錦八拱、人聲如沸阵赠。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)清蚀。三九已至,卻和暖如春爹谭,著一層夾襖步出監(jiān)牢的瞬間轧铁,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工旦棉, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留齿风,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓绑洛,卻偏偏與公主長(zhǎng)得像救斑,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子真屯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

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