建立 .xml 檔
![](https://1.bp.blogspot.com/-wmHlt5VkiXQ/YVW-Lhpg97I/AAAAAAAAIAw/DhoForgscoYuGqws6OVT-wbxHb-rwX34QCLcBGAsYHQ/w400-h120/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B213959.jpg) |
res 資料夾新增 Drawable Resource File |
![](https://1.bp.blogspot.com/-GH28iHBQtNc/YVW-cT0UrlI/AAAAAAAAIA8/_D_yYPB9Tdo8Cgen0xAu_4KL4oIVrV8MgCLcBGAsYHQ/s0/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B213530.jpg) |
Root element 選擇 layer-list |
![](https://1.bp.blogspot.com/-kkLECuWpTfk/YVW-nv4IgcI/AAAAAAAAIBA/Huudj57Bc_Airty5BsKlVtfBMSdGOxNzgCLcBGAsYHQ/w400-h269/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B213600.jpg) |
輸入 File name 後點選 OK |
前言
介紹基本 Drawable 的一些設定,主要是參考官方的文件。
包含 corner, gradient, padding, solid, size 等
網址連結 : https://developer.android.com/guide/topics/resources/drawable-resource#LevelList
基本介紹
使用到底下的設定時,要特別注意 shape 類型,否則設定錯誤會沒有效果
![](https://1.bp.blogspot.com/-KHzcNPdM9zY/YVXTs2z2szI/AAAAAAAAIDc/OKlTj8VvzLMqRxuudZbZJIdE7If7RugQQCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B231118.jpg) |
可以在 shape 內設定 |
CORNER
根據官方的資料,只能使用在 rectangle
建立基本圖形,使用 rectangle
![](https://1.bp.blogspot.com/-yZxqPf2HGHo/YVXBkESlvzI/AAAAAAAAIBY/PGFPJmI0ttAW6ZkU-Xj5eEQTzNaUDvKvgCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B215349.jpg) |
xml 效果 |
設定 4 個角為圓角
![](https://1.bp.blogspot.com/-c8Me-tQbMA8/YVXCK9qZqWI/AAAAAAAAIBk/SmN_UPNMVVAMoz6HGxHuaTpqVbqiUlICwCLcBGAsYHQ/s0/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B215609.jpg) |
選擇 radius |
![](https://1.bp.blogspot.com/-VO6zpEwAwqE/YVXCikh_7YI/AAAAAAAAIB0/OJtl3OK7lq4t_l7xxhML1fb35rr5BDLRQCLcBGAsYHQ/w640-h380/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B215650.jpg) |
設定 radius = 35 dp 效果 |
單獨設定某個角
![](https://1.bp.blogspot.com/-t39PLBJ_-Yk/YVXDXBSTzGI/AAAAAAAAIB8/AhPuukRb9T807bDAtVKqMKYoDwnErfpqACLcBGAsYHQ/w640-h354/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B220015.jpg) |
設定左上角效果 |
備註 : 同時設定 radius及任何一個單獨的角,radius 的效果會被覆蓋
![](https://1.bp.blogspot.com/-4qztOMQcHr8/YVXDyf1H0KI/AAAAAAAAICE/4XIfzBqGGrIMr_Mc_E1y2tqqWt9EjYnyACLcBGAsYHQ/w400-h61/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B220352.jpg) |
文件說明 |
STROKE
簡單的寬度及顏色設定
支援虛線
解釋 dashGap 及 dashWidth 分別代表的意思
GRADIENT
![](https://1.bp.blogspot.com/--2-qnzxyJB8/YVXRk9n6qwI/AAAAAAAAIC8/AI4_t6yoAQk0BGDU50uPFJgwc2dPDh-YQCLcBGAsYHQ/w400-h183/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B230243.jpg) |
可以使用的屬性 |
![](https://1.bp.blogspot.com/-01EUJxtsOjk/YVXSTIdlm-I/AAAAAAAAIDM/R2IlUJT9QycchGaici7ZxygztU4JIuMdwCLcBGAsYHQ/w640-h368/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B230443.jpg) |
官網給的 Sample 分別給了角度, 開始及結束的顏色 |
SOLID
只有單一個屬性
![](https://1.bp.blogspot.com/-5MexaD-xEtU/YVXQQZkxsII/AAAAAAAAICs/F5DJnxx-3vcFDoG0_QslC6SCwcByqIlsACLcBGAsYHQ/w640-h372/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B225600.jpg) |
設定顏色 |
備註 : 與 gradient 同時存在時,程式碼靠後的會被執行
![](https://1.bp.blogspot.com/-8moAavEuBdg/YVXQz8XYTII/AAAAAAAAIC0/ZUu9b3rajGYasZR313CM1qyjCvpATswwACLcBGAsYHQ/w640-h370/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B225854.jpg) |
移動 gradient 位置 與 solid 交換位置 |
PADDING
![](https://1.bp.blogspot.com/-BgH2Zav7V4I/YVXV--Fi2UI/AAAAAAAAIDo/-boyoMYG5TcZugfKSL0_YgjVVVK_jo00QCLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B231543.jpg) |
上下左右可以設定 |
要注意官網的描述
![](https://1.bp.blogspot.com/-1fpcvVTGuok/YVXWTIGuYwI/AAAAAAAAID0/nJebHBSm5nkopQ8e5fH4MVl-Hz-NvMSUACLcBGAsYHQ/s320/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B232039.jpg) |
沒有任何設定時,TextView 置中 |
![](https://1.bp.blogspot.com/-CosSk2MLJqw/YVXWTA7VaEI/AAAAAAAAID4/yqjBMe9cY7cGmpJ24DdkjPVovF2ozzrwACLcBGAsYHQ/w640-h434/%25E8%259E%25A2%25E5%25B9%2595%25E6%2593%25B7%25E5%258F%2596%25E7%2595%25AB%25E9%259D%25A2%2B2021-09-30%2B232123.jpg) |
已設定距離 bottom 500dp 設定 backgroud 為 sample_background |
設定與底部距離 500dp ,從. xml 檔中看不出效果,但上方 TextView 位置已經上移
留言
張貼留言