使用Vue快速生成shape背景圖
寫在前面
在日常的Android開發之中，我們通常都會根據UI圖去手動建立shape或者selector背景圖，雖說建立起來很簡單，但是未免也會感到繁瑣，因此也研究了一些這方面的知識，包括自定義 shapedrawable 、 dataBinding ，到最近看到的通過 LayoutInflater.Factory類 等等方法，可見天下真苦秦久矣。
加上最近在學習Vue、小程式等等前端的知識，前面也寫過一個為《MVVM With Kotlin》系列提供的腳手架工具.
generator-mvvm-kotlin : https://github.com/ditclear/generator-mvvm-kotlin
因此便有了一個通過Vue快速生成shape背景圖的想法。
Shape4Android
名稱靈感來自於inloop的 shadow4android ，Vue看看 官網 的教程，邊看邊實踐，css不熟悉，所以直接搬的 element-ui ，還用到了以前收藏的 You-need-to-know-css 的技巧，趁著週末完善了一下，上傳到了github-pages上。
線上體驗： https://ditclear.github.io/shape4android/
image
Feature
-
支援常用的retangle和oval兩種樣式
-
支援設定顏色
-
支援shape和selector (selector支援常用的pressed和unable)
-
支援設定圓角
-
支援設定邊框寬度和顏色
-
支援修改檔名稱
預設命名規則
shape： shape_type_color_roundTL_roundTR_roundBL_roundBR_borderWidth_borderColor.xml
selector： selector_shape_n_color_p_pressedColor_u_unableColor.xml
如果自定義檔名稱，那麼selector中的shape預設會跟上type名，比如xx_norm.xml/xx_pressed.xml/xx_unable.xml
TODO
- [ ] 更多形狀
- [ ] 虛線
- [ ] 漸變色
- [ ] rippleColor
- [ ] 優化介面
寫在最後
實質上跟APT編譯生成所需的Java/Kotlin檔案差不多，但是Vue能夠節省很多編譯的時間，所以寫著感覺很快。
程式碼實際上也非常簡單，就是根據填寫的引數拼裝成shape或者selector.xml檔案而已，畢竟都是模板化的程式碼，再用filesaver.js下載下來就行。
Github : https://github.com/ditclear/shape4android
關於我
簡書 ： https://www.jianshu.com/u/117f1cf0c556
掘金： https://juejin.im/user/582d601d2e958a0069bbe687
Github : https://github.com/ditclear
個人部落格： https://ditclear.github.io
更多資訊關注公眾號ditclear
