写在前面
在日常的 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 的 http://inloop.github.io/shadow4android/ ,Vue 看看官网 https://cn.vuejs.org/ 的教程, 边看边实践, CSS 不熟悉, 所以直接搬的 element-ui, 还用到了以前收藏的 https://lhammer.cn/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
来源: http://www.jianshu.com/p/6c5f2e75c485