《Android編程權(quán)威指南》第 22 章了，加油啊，本章將學(xué)習(xí)到 drawble 相關(guān)的技術(shù)點(diǎn)。挺有用的點(diǎn)，跟 UI 息息相關(guān)，項(xiàng)目中很常用。
一、統(tǒng)一按鈕樣式
先修改 res/layout/list_item_sound.xml 文件隔開(kāi)按鈕。
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<Button
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="?attr/colorAccent"
android:onClick="@{()->viewModel.onButtonClicked()}"
android:text="@{viewModel.title}"
android:textColor="@color/white"
tools:text="Sound name" />
</FrameLayout>
這里由于 recycler 視圖是三列，然后有多余控件就會(huì)拉伸列格去適配屏幕，所以用 FrameLayout 包一層，這樣只拉伸外層，按鈕就不會(huì)被拉伸了。
二、shape drawable
ShapeDrawable 可以把按鈕變圓。XML drawable 和屏幕像素密度無(wú)關(guān)，直接放入 drawable 文件夾。
在 res/drawable 中創(chuàng)建 button_beat_box_normal.xml 文件：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/dark_blue" />
</shape>
這里定義了一個(gè)背景為深藍(lán)色的圓形。android:shape 還可以為長(zhǎng)方形 rectangle、線條 line、環(huán) ring。
然后把上述設(shè)置為按鈕的背景。
android:background="@drawable/button_beat_box_normal"
三、state list drawable
為給按鈕添加點(diǎn)擊效果，再創(chuàng)建個(gè) button_beat_box_pressed.xml。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/red" />
</shape>
定義 button_beat_box.xml：
<?xml version="1.0" encoding="utf-8"?>
<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>
改用 button_beat_box 作為按鈕背景：
android:background="@drawable/button_beat_box"
state list drawable 還支持禁用、聚焦以及激活等狀態(tài)。
我這里遇到一個(gè)問(wèn)題就是，給 button 設(shè)置 background 總是不生效，總是被主題的 colorPrimary 顏色給覆蓋了，最終找了個(gè)解決方案就是把我原來(lái)的 parent="Theme.MaterialComponents.DayNight.DarkActionBar" 改為 parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"
四、layer list drawable
layer list drawable 可以讓兩個(gè) XML drawable 合二為一?！高@樣可以用一個(gè)文件實(shí)現(xiàn)上述點(diǎn)擊效果了！???」
將 button_beat_box_pressed.xml 改為：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="@color/red" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke
android:width="10dp"
android:color="@color/dark_red" />
</shape>
</item>
</layer-list>
然后運(yùn)行，點(diǎn)擊按鈕，會(huì)看到按鈕有個(gè)邊圈的效果，自行嘗試了。
五、深入學(xué)習(xí)：為什么要用 XML drawable
按鈕就是會(huì)有狀態(tài)，設(shè)計(jì)出按鈕的切換狀態(tài)有利于提高用戶體驗(yàn)，state list drawable 就不可缺少了。搭配 shape drawable 和 layer list drawable 還可以做出復(fù)雜的背景圖。
XML drawable 是獨(dú)立于屏幕像素密度，可在不帶屏幕密度資源修飾符的 drawable 目錄中直接定義。直接就適配好了各個(gè)尺寸的 Android 手機(jī)。
六、深入學(xué)習(xí)：使用 mipmap 圖像
mipmap 目錄用來(lái)放置應(yīng)用的啟動(dòng)圖標(biāo)，更優(yōu)的適配方案。其他圖片當(dāng)然還是放在 drawable 中。
七、深入學(xué)習(xí)：使用 9-patch 圖像
9-patch 圖像是一種特別處理過(guò)的文件，可以控制控制圖片的拉伸方式，它以 .9.png 結(jié)尾，圖像邊緣具有 1 像素寬度的邊框，邊框用以指定 9-patch 圖像的中間位置。邊框像素繪制為黑線，表明中間位置，邊緣部分是用透明色表示。
任意圖形編輯器都可用來(lái)創(chuàng)建 9-patch 圖像，比如 Android SDK 自帶的 draw9patch 工具，或直接使用 Android Studio。
有關(guān)創(chuàng)建 9-patch 具體教程介紹參考：
https://developer.android.com/studio/write/draw9patch?hl=zh-cn
通常一些內(nèi)容要變化的背景圖用 .9 圖比較好，適配方便簡(jiǎn)單。
八、挑戰(zhàn)練習(xí)：按鈕主題
不同的注意樣式都不一樣的啦，具體去官網(wǎng)了解吧。
https://developer.android.com/guide/topics/ui/look-and-feel/themes?hl=zh-cn
其他
還有另外適配的矢量圖，一般項(xiàng)目中小圖標(biāo)都用矢量圖也是很優(yōu)的選擇。
推薦個(gè)矢量圖庫(kù)，說(shuō)不定就找到了自己想要的圖標(biāo)：
BeatBox 項(xiàng)目 Demo 地址：
https://github.com/visiongem/AndroidGuideApp/tree/master/BeatBox
