《Android編程權威指南》第 22 章了,加油啊痴鳄,本章將學習到 drawble 相關的技術點瘟斜。挺有用的點,跟 UI 息息相關痪寻,項目中很常用螺句。
一、統(tǒng)一按鈕樣式
先修改 res/layout/list_item_sound.xml 文件隔開按鈕橡类。
<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 視圖是三列蛇尚,然后有多余控件就會拉伸列格去適配屏幕,所以用 FrameLayout 包一層顾画,這樣只拉伸外層取劫,按鈕就不會被拉伸了匆笤。
二、shape drawable
ShapeDrawable 可以把按鈕變圓勇凭。XML drawable 和屏幕像素密度無關疚膊,直接放入 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>
這里定義了一個背景為深藍色的圓形虾标。android:shape 還可以為長方形 rectangle、線條 line灌砖、環(huán) ring璧函。
然后把上述設置為按鈕的背景。
android:background="@drawable/button_beat_box_normal"
三基显、state list drawable
為給按鈕添加點擊效果蘸吓,再創(chuàng)建個 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)库继。
我這里遇到一個問題就是,給 button 設置 background 總是不生效窜醉,總是被主題的 colorPrimary 顏色給覆蓋了宪萄,最終找了個解決方案就是把我原來的 parent="Theme.MaterialComponents.DayNight.DarkActionBar" 改為 parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"
四、layer list drawable
layer list drawable 可以讓兩個 XML drawable 合二為一榨惰“萦ⅲ「這樣可以用一個文件實現上述點擊效果了!???」
將 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>
然后運行琅催,點擊按鈕居凶,會看到按鈕有個邊圈的效果,自行嘗試了藤抡。
五侠碧、深入學習:為什么要用 XML drawable
按鈕就是會有狀態(tài),設計出按鈕的切換狀態(tài)有利于提高用戶體驗缠黍,state list drawable 就不可缺少了弄兜。搭配 shape drawable 和 layer list drawable 還可以做出復雜的背景圖。
XML drawable 是獨立于屏幕像素密度嫁佳,可在不帶屏幕密度資源修飾符的 drawable 目錄中直接定義挨队。直接就適配好了各個尺寸的 Android 手機。
六蒿往、深入學習:使用 mipmap 圖像
mipmap 目錄用來放置應用的啟動圖標盛垦,更優(yōu)的適配方案。其他圖片當然還是放在 drawable 中瓤漏。
七腾夯、深入學習:使用 9-patch 圖像
9-patch 圖像是一種特別處理過的文件颊埃,可以控制控制圖片的拉伸方式,它以 .9.png 結尾蝶俱,圖像邊緣具有 1 像素寬度的邊框班利,邊框用以指定 9-patch 圖像的中間位置。邊框像素繪制為黑線榨呆,表明中間位置罗标,邊緣部分是用透明色表示。
任意圖形編輯器都可用來創(chuàng)建 9-patch 圖像积蜻,比如 Android SDK 自帶的 draw9patch 工具闯割,或直接使用 Android Studio。
有關創(chuàng)建 9-patch 具體教程介紹參考:
https://developer.android.com/studio/write/draw9patch?hl=zh-cn
通常一些內容要變化的背景圖用 .9 圖比較好竿拆,適配方便簡單宙拉。
八、挑戰(zhàn)練習:按鈕主題
不同的注意樣式都不一樣的啦丙笋,具體去官網了解吧谢澈。
https://developer.android.com/guide/topics/ui/look-and-feel/themes?hl=zh-cn
其他
還有另外適配的矢量圖,一般項目中小圖標都用矢量圖也是很優(yōu)的選擇御板。
推薦個矢量圖庫锥忿,說不定就找到了自己想要的圖標:
BeatBox 項目 Demo 地址:
https://github.com/visiongem/AndroidGuideApp/tree/master/BeatBox