使用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
