Drawable 更換圖片的方式,可以在程式碼做判斷時,避免使用 switch-case 或 if-else 來判斷 ImageView 的背景圖片要用甚麼,透過 level-list 可以比較輕鬆的完成。
步驟:
1. 首先準備要替換的圖片
![](https://1.bp.blogspot.com/-DHvW5IflRTQ/YVhcYi-K4ZI/AAAAAAAAIEM/RXPkCQfDIHAPGdePvmlN_HKXI18Vr7h6QCLcBGAsYHQ/w400-h161/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B211902.jpg) |
wifi 信號強度圖片 |
2. 將檔案加入專案內
備註 : 要注意命名,原本使用底線 ( _ ) 命名 .jpg 檔案,後續會讀取不到
3. 針對 drawable 新增 .xml 檔
![](https://1.bp.blogspot.com/-rQ0lpL3ERKA/YVheTsv8fOI/AAAAAAAAIEc/maplg-0eO5M5BWTGEc2TDwbmzB-Qbzj8wCLcBGAsYHQ/w400-h140/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B212625.jpg) |
新增 Drawable Resource File |
4. 輸入檔案名稱
![](https://1.bp.blogspot.com/-PtLudc8IglQ/YVhe6VI7z9I/AAAAAAAAIEk/KxDnquWresIXJaFw2fzV7K7ewxI8TewQwCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B212945.jpg) |
Root element 選擇 level-list |
5. 完成後點選 OK
6. 產生 .xml 檔案
![](https://1.bp.blogspot.com/-TCAlShdNPeI/YVhgHjV_TSI/AAAAAAAAIE0/P7wy9VTA7lwDxI4MfRP_1vpk4MfT5wCcACLcBGAsYHQ/w400-h84/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B213453.jpg) |
wifi_strength.xml |
7. 建立 item
![](https://1.bp.blogspot.com/-7ksuor_B3js/YVhqVxEauSI/AAAAAAAAIFI/hY83tEQUAD4SuvmfbeOTDfSLEfH2g0ZzQCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B221129.jpg) |
選擇 drawable |
![](https://1.bp.blogspot.com/-upg_mvOaI2E/YVhqhlkWXVI/AAAAAAAAIFM/rbhjPW-0sFIhDIVdNUbt9Rd6Xko2xW8DwCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B221927.jpg) |
輸入 mipmap 圖片路徑 |
8. 設定 maxLevel ,注意不要重複
9. 設定 3 個 item
備註 : maxLevel 不用按照順序增加,但是需要按照大小順序排序。
正確 2 < 4 < 6
正確 2 < 5 < 11
錯誤 1 < 9 < 7 (沒按照順序)
錯誤 1 < 2 < 2 (重複)
範例如下 :
![](https://1.bp.blogspot.com/-ls1yERPezTI/YVhswl5crRI/AAAAAAAAIFs/vfv8V4k8BuEuWXfwqxj7HjhfnAt6atmjwCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B222911.jpg) |
可以設定 20, 40 ,60 |
不要設定成
![](https://1.bp.blogspot.com/-YEtMS0WVv2c/YVhs-jAX9eI/AAAAAAAAIFw/cJKXzKHkopE39mP1qNmFMI3SVNEBK_yRgCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B223008.jpg) |
20 , 2, 60 會有問題 |
使用 20, 2, 60 測試結果
![](https://1.bp.blogspot.com/-Y4AZj0B021A/YVhxgR0K-WI/AAAAAAAAIF8/zC2ZUmmsFxc1UHusaOpy-NfoGNv-FdrWwCLcBGAsYHQ/w400-h55/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B224925.jpg) |
設定 ImageLevel 為 2 ,模擬器沒有反應 |
10. 實測,設定 maxLevel 為 1, 2, 3 效果
![](https://1.bp.blogspot.com/-blDFOBue27Q/YVhyKIj9III/AAAAAAAAIGE/CgtSpq4xMFw7slBDIaCcobZZPowK7FszQCLcBGAsYHQ/w400-h229/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B225111.jpg) |
設定 .xml 檔 |
![](https://1.bp.blogspot.com/-3cJBGIqXZS8/YVhyKGX-RLI/AAAAAAAAIGM/gd4QuWrZTpQfsMBIDsMJ1sN0sh7d4BZTACLcBGAsYHQ/w400-h251/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B225129.jpg) |
設定 Activity .xml 檔,background 設定 wifi_strength.xml |
![](https://1.bp.blogspot.com/-c8uC6pa_dfU/YVhyKF_C-0I/AAAAAAAAIGI/wWkasiq0AvsVbBrxlhJSAtLvuJiB7O3XACLcBGAsYHQ/w400-h246/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B225140.jpg) |
測試設定 setImageLevel 為 2 須注意要與 .xml 檔設定相同,如設定為maxLevel 20, 40 ,60 不可以設定 setImageLevel 成 1, 2, 3會錯誤 |
![](https://1.bp.blogspot.com/-_WrTyCIJeSk/YVhzpdloB_I/AAAAAAAAIGg/QMvJfN3HIrcoPLtM9kb-o12HHsvi8jBmACLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-10-02%2B225833.jpg) |
setImageLevel 為 2 模擬器效果 |
留言
張貼留言