《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)的子類(lèi)、位圖圖像等。用來(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(書(shū)中例子)

<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 顏色漸變的類(lèi)型, 取值類(lèi)型有三種:linear/radial/sweep
    • linear 線性漸變,就是顏色從左往右, 從下往上
    • radial 放射漸變, 例如:從一個(gè)圓中心到圓的邊緣變化
    • sweep 掃描式漸變, 類(lèi)似雷達(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)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,106評(píng)論 6 542
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,441評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 178,211評(píng)論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 63,736評(píng)論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,475評(píng)論 6 412
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,834評(píng)論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,829評(píng)論 3 446
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 43,009評(píng)論 0 290
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,559評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,516評(píng)論 1 374
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,038評(píng)論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,728評(píng)論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 35,132評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,443評(píng)論 1 295
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,249評(píng)論 3 399
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,484評(píng)論 2 379

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