***本文正在参加[「金石计划 . 瓜分6万现金大奖」](https://juejin.cn/post/7162096952883019783)*** Shape是Android中一个必不可少的资源，很多的背景，比如圆角，分割线、渐变等等效果，几乎都有它的影子存在，毕竟写起来简单便捷，使用起来也是简单便捷，又占用内存小，谁能不爱？无论是初级，还是中高级，创建一个shape文件，相信大家都是信手拈来。虽然在项目里，我们可以直接复制一个Shape文件，改一改，就能很简单的实现，但是为了更方便的创建，直接拿来可以用，于是搞了一个在线的Shape生成，目前包含了，实心、空心、渐变的模式，希望可以帮助到大家，虽然是属于造轮子了，但猜测一下，估计有需要的人，哈哈~ 今天的内容大致如下： **1、在线生成Shape效果** **2、如何实现这样一个在线生成平台** **3、具体的主要代码实现** **4、总结及问题须知** ## 一、在线生成Shape效果效果不是很好，毕竟咱也不是搞UI的，不过功能均可用，问题不大，目前就是左侧功能选择区域，右侧是效果及代码展示区域，包含文件的下载操作。在线地址：实际效果如下： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8491c0c9a0b402eb650c55c8d3d4576~tplv-k3u1fbpfcp-watermark.image?) ## 二、如何实现这样一个在线生成平台其实大家可以发现，虽然是辅助生成的Android功能，但本身就是网页，所以啊，懂得Web这是最基本的，不要求多么精通，但基本的页面得需要掌握，其次就是，清楚自己要实现什么功能，得有思路，比如这个Shape，那么你就要罗列常用的几种Shape类型，其主要的代码是如何呈现的，这是最重要的，搞定下面两步问题不大。 ### 1、Shape代码模板 Shape的生成，其实是根据模板来的，只不过根据动态配置，改其中的参数而已，所以啊，是非常简单的，罗列基本的模板后，就可以选择性的更改。 #### 实心模板 ```xml ``` #### 空心模板 ```xml ``` #### 渐变模板 ```xml ``` 在上边的模板中，其实需要更改的元素并不是很多，无非就是，颜色值，角度大小，边框等信息，这些信息，需要用户自己选择，所以需要抛给用户触发。 ### 2、Web页面编写及上传平台有了相关模板，那么就需要绘制UI进行实现了，其实在Android studio里的插件最合适不过了，插件也已经实现了，这个我们后面说，目前的在线，就需要大家进行Web绘制了，也就是Html、Css、JavaScript相关的技术了，相对于Android而言，还是比较简单的，编码思想都是一样的，具体的编写，大家可以自行发挥。其实大家最关心的是，我们的页面，如何让别人进行使用，一般的情况下，服务器是必须的，如果我们没有服务器，其实也有很多的三方免费的托管，比如Github上，**Github搭建静态网站**，大家可以去搜，网上很多资料，按照步骤来就可以轻松实现了。 ## 三、具体的主要代码实现 ### 1、颜色选择实现颜色用到了coloris插件，它可以在触摸输入框的时候，弹出颜色选择框，效果如下图： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/555ad5a990864bb48dc4c6197b0e3078~tplv-k3u1fbpfcp-watermark.image?) 使用起来也是很简答，在标签后面增加data-coloris属性即可。 ```html ``` ### 2、下载代码实现下载代码是用到了一个三方插件，FileSaver.js，下载的时候，也是非常的简单： ```js let blob = new Blob([code], {type: "text/plain;charset=utf-8"}); saveAs(blob, fileName + ".xml"); ``` ### 3、常规代码实现常规代码，确实没啥好说的，无非就是Html、Css、JavaScript，大家可以直接右键看源代码即可。 ## 四、总结及问题须知其实大家可以发现，目前的生成，颜色也好，角度边框也好，都是固定写死的，其实，在实际的项目开发中，这些都是在资源里进行配置好的，直接选择资源里的即可，其实应该加个，可配置的参数，只配置一次，就可以动态的选择项目中的资源。在线的毕竟还不是很方便，其实自己一直在搞一个自动化脚手架，可以直接生成到项目中，目前是针对公司里架构，不太方便开源出来，但2023年，改为自己的框架后，会给大家开源出来，很多代码，真的可以自动生成，真是方便了很多。