本章內(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>
- 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 顏色漸變的類(lèi)型, 取值類(lèi)型有三種:linear/radial/sweep
- linear 線性漸變,就是顏色從左往右, 從下往上
- radial 放射漸變, 例如:從一個(gè)圓中心到圓的邊緣變化
- sweep 掃描式漸變, 類(lèi)似雷達(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范圍-密度表格: