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