本章內(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>
- shape 圖形形狀
- corners 圓角標(biāo)簽(指定長(zhǎng)方形四角的圓滑度)
- bottomLeftRadius 左下角
- bottomRightRadius 右下角
- topLeftRadius 左上角
- topRightRadius 右上角
- radius 是四個(gè)角噪伊,設(shè)置了這個(gè)就不需要設(shè)置上面的四個(gè)了,但是它的優(yōu)先級(jí)比較低氮唯, 會(huì)被上面的設(shè)置覆蓋鉴吹。
- 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圖片的半徑
- padding 邊距標(biāo)簽(設(shè)置控件中(文字)內(nèi)容與shape圖片邊框的距離纺棺,bottom 底部距離,left 左邊距離邪狞,right 右邊距離祷蝌,top 頂部距離)
- size 大小標(biāo)簽(shape圖形的寬度和高度,這里一般不用設(shè)置帆卓,它的優(yōu)先級(jí)沒(méi)有控件的優(yōu)先級(jí)大)
- solid 背景標(biāo)簽(stroke標(biāo)簽中如果不指定color的顏色巨朦, 則默認(rèn)是黑色,solid標(biāo)簽會(huì)和gradient標(biāo)簽沖突, 會(huì)覆蓋gradient配置的顏色)
- stroke 邊框標(biāo)簽 (給shape圖形設(shè)置邊框剑令, 設(shè)置邊框的寬度糊啡, 顏色,實(shí)現(xiàn)還是虛線尚洽, 以及虛線的間隔大谢陂稀)
- width 邊框線的寬度
- color 邊框線的顏色
- dashGap 虛線間隔的長(zhǎng)度
- dashWidth 虛線中實(shí)線的長(zhǎng)度
shape圖形:
- rectangle 長(zhǎng)方形/默認(rèn)是長(zhǎng)方形
- oval 橢圓
- line 線(line形狀下,solid標(biāo)簽下的color會(huì)無(wú)效)
- 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>
按下后的效果:
當(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>
按下效果:
深入學(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è)維度縮放。
- 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圖了。
這個(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ò)的脱惰。
建議尺寸:
參考里面的dpi范圍-密度表格: