使用Vue快速生成shape背景圖

寫在前面

在平常的Android開發之中，咱們一般都會根據UI圖去手動建立shape或者selector背景圖，雖然說建立起來很簡單，可是未免也會感到繁瑣，所以也研究了一些這方面的知識，包括自定義shapedrawable、dataBinding，到最近看到的經過LayoutInflater.Factory類等等方法，可見天下真苦秦久矣。

加上最近在學習Vue、小程序等等前端的知識，前面也寫過一個爲《MVVM With Kotlin》系列提供的腳手架工具.

generator-mvvm-kotlin : github.com/ditclear/ge…

所以便有了一個經過Vue快速生成shape背景圖的想法。

Shape4Android

名稱靈感來自於inloop的shadow4android，Vue看看官網的教程，邊看邊實踐，css不熟悉，因此直接搬的element-ui，還用到了之前收藏的You-need-to-know-css的技巧，趁着週末完善了一下，上傳到了github-pages上。

在線體驗：ditclear.github.io/shape4andro…

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 : github.com/ditclear/sh…

關於我

簡書 ：www.jianshu.com/u/117f1cf0c…

掘金：juejin.im/user/582d60…

Github : github.com/ditclear

我的博客：ditclear.github.io

更多信息關注公衆號ditclear