基本的使用
1. 建立 .xml 檔
![](https://1.bp.blogspot.com/-bjtM_pr0LqA/YVMeXGBiNNI/AAAAAAAAH9M/FpbdBChXtkIVuQMnicQpoUxxdmvu9hr3gCLcBGAsYHQ/s320/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.21.09.png) |
點選 drawable |
![](https://1.bp.blogspot.com/-PDlcunSIZyg/YVMehz7shPI/AAAAAAAAH9Q/gFJZHidB8PMERVB-1ZotM1VAGr63p4GlQCLcBGAsYHQ/w400-h124/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.25.16.png) |
New -> Drawable Resource File |
![](https://1.bp.blogspot.com/-ANjUrFNfCvA/YVMe47udbnI/AAAAAAAAH9c/9OgbK2zQ-rYIw7R_3VXmGNQHgbMFrv9CgCLcBGAsYHQ/w400-h234/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.26.43.png) |
Root element 輸入 shape |
2. 編輯 .xml 檔
* 圖形設定
android:shape 選擇 rectangle,支援 4 種圖形
輸入 oval 橢圓形
![](https://1.bp.blogspot.com/-c5P7DeqeQPk/YVMgGOapyzI/AAAAAAAAH90/kaF_ZXi9xakegHyn2PmADy8LIJA0j7-oQCLcBGAsYHQ/w400-h245/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-28%2B%25E4%25B8%258B%25E5%258D%258810.00.19.png) |
xml 檔 oval 效果 |
* 顏色設定
支援 startColor, centerColor, endColor 做漸層效果
![](https://1.bp.blogspot.com/-DwSpxhtqdX8/YVMhAeGgGgI/AAAAAAAAH-I/NTZqPtQGVIAkn_z9R8Y2LXckxAzNnx2-QCLcBGAsYHQ/w400-h219/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.32.18.png) |
2 種漸層顏色 |
![](https://1.bp.blogspot.com/-O_MjV2rV4y4/YVMhAJixjxI/AAAAAAAAH-E/BSgJa8vNjo46PNCB1a0Z5qCj1kV8ALndACLcBGAsYHQ/w400-h219/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.31.56.png) |
3 種漸層顏色 |
備註 : 整理 xml 檔排版,可以使用 comtrol + command + L 整理
* 角度設定
angle 支援 0 ~ 360
![](https://1.bp.blogspot.com/-bojn6MxzrK8/YVMjZKpoLcI/AAAAAAAAH-Y/WEnKrP80qxonqHV61v5V-Ic8xM-5Axx-gCLcBGAsYHQ/w400-h219/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.32.30.png) |
180 度度角效果 |
![](https://1.bp.blogspot.com/-50lxIBL3HdE/YVMjZNxlJ3I/AAAAAAAAH-c/DBnOpF4M7pQnSPDSOBBZ00ZZJ7IFRenWgCLcBGAsYHQ/w400-h219/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.32.37.png) |
270 度角效果 |
45 度角效果
* type 設定
type 支援三種,詳細可查看
Google document 介紹
當 type 設定為 ridial 時,可以設定半徑
![](https://1.bp.blogspot.com/-JhmHV8B6o6c/YVMkjDFirHI/AAAAAAAAH-0/MH4IhiD_lUok1eTvTfl3B3WM0kb8rvFPgCLcBGAsYHQ/w400-h251/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-28%2B%25E4%25B8%258B%25E5%258D%258810.18.38.png) |
效果 |
當 type 設定為 sweep 時, 以中心為原點雷達狀旋轉
![](https://1.bp.blogspot.com/-ROljV-Y069c/YVMlCZFk64I/AAAAAAAAH-8/acSX75jamn8qeIPo-RPJJfNbWdATUg6qwCLcBGAsYHQ/w400-h251/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-28%2B%25E4%25B8%258B%25E5%258D%258810.20.38.png) |
效果 |
![](https://1.bp.blogspot.com/-JaUqJNyVo9w/YVMrV1Bla0I/AAAAAAAAIAY/BhZBAXtc3GQzMU--h15gpV-IA1fzEifAgCLcBGAsYHQ/s320/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-28%2B%25E4%25B8%258B%25E5%258D%258810.47.06.png) |
順時針旋轉 |
當 type 設定為 sweep 時,設定中心點位置
default 的 centerX 及 centerY 都是 0.5,可以設定 0~1 之間
![](https://1.bp.blogspot.com/-wd6qO1H7keM/YVMn0x0sSPI/AAAAAAAAH_U/rTnIIjpsROoAud3wjntZki76hSbv3M5YgCLcBGAsYHQ/s320/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-28%2B%25E4%25B8%258B%25E5%258D%258810.33.36.png) |
centerX, centerY 設定 |
![](https://1.bp.blogspot.com/-7Q23LRoiTCk/YVMojhPIiCI/AAAAAAAAH_c/vlq7uDOEHJY9U9e9i_0qQrmJOJg-NeKBACLcBGAsYHQ/w400-h240/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-28%2B%25E4%25B8%258B%25E5%258D%258810.34.21.png) |
centerX centerY 都是 0.8 的效果 |
2. seekbar 效果
![](https://1.bp.blogspot.com/-K_6-E8XEgl4/YVMpb0nEGsI/AAAAAAAAH_k/jggijlkvvIQQfiipQlJdomQfHmPElDP1QCLcBGAsYHQ/w400-h126/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.36.48.png) |
new Drawable file |
![](https://1.bp.blogspot.com/-ETFOT6v9DDw/YVMpb5-e_aI/AAAAAAAAH_s/y0tARTSePj4EM5bM2EqgL61LqJO2iEDxwCLcBGAsYHQ/w400-h54/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.37.46.png) |
Root element 輸入 layer-list |
![](https://1.bp.blogspot.com/-QW519pZ-NyM/YVMpbyhswnI/AAAAAAAAH_o/3kzvZxYZ5Zg4-fsovq9l8rQuMB8sntwugCLcBGAsYHQ/w400-h233/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.38.03.png) |
完成後點選 OK |
![](https://1.bp.blogspot.com/-fKWBV9ImxBg/YVMpcuJ6vrI/AAAAAAAAH_w/lcWb2W8W_uYd835uJaLE8M117y2DhQhZACLcBGAsYHQ/w640-h368/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.48.15.png) |
效果加入圓角及漸層 |
![](https://1.bp.blogspot.com/-CaDBEHn1HF8/YVMpc09p_JI/AAAAAAAAH_0/vKEFTHpfoNw6dooEwG6f28GZJGNY7534gCLcBGAsYHQ/w400-h120/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.50.18.png) |
seekbar 中加入 |
![](https://1.bp.blogspot.com/--Ubeuo0wFqs/YVMpdFmAyzI/AAAAAAAAH_4/NnykDmHhoqkQk_24jRCDc7hIvBZ0uPIjgCLcBGAsYHQ/w640-h152/%25E6%2588%25AA%25E5%259C%2596%2B2021-09-27%2B%25E4%25B8%258B%25E5%258D%258810.50.30.png) |
效果圖 |
留言
張貼留言