如何搞一个在线的Shape生成

Shape是Android中一个必不可少的资源，很多的背景，比如圆角，分割线、渐变等等效果，几乎都有它的影子存在，毕竟写起来简单便捷，使用起来也是简单便捷，又占用内存小，谁能不爱？无论是初级，还是中高级，创建一个shape文件，相信大家都是信手拈来。

虽然在项目里，我们可以直接复制一个Shape文件，改一改，就能很简单的实现，但是为了更方便的创建，直接拿来可以用，于是搞了一个在线的Shape生成，目前包含了，实心、空心、渐变的模式，希望可以帮助到大家，虽然是属于造轮子了，但猜测一下，估计有需要的人，哈哈~

今天的内容大致如下：

1、在线生成Shape效果

2、如何实现这样一个在线生成平台

3、具体的主要代码实现

4、总结及问题须知

一、在线生成Shape效果

效果不是很好，毕竟咱也不是搞UI的，不过功能均可用，问题不大，目前就是左侧功能选择区域，右侧是效果及代码展示区域，包含文件的下载操作。

在线地址：abnerming888.github.io/vip/shape/s…

实际效果如下：

二、如何实现这样一个在线生成平台

其实大家可以发现，虽然是辅助生成的Android功能，但本身就是网页，所以啊，懂得Web这是最基本的，不要求多么精通，但基本的页面得需要掌握，其次就是，清楚自己要实现什么功能，得有思路，比如这个Shape，那么你就要罗列常用的几种Shape类型，其主要的代码是如何呈现的，这是最重要的，搞定下面两步问题不大。

1、Shape代码模板

Shape的生成，其实是根据模板来的，只不过根据动态配置，改其中的参数而已，所以啊，是非常简单的，罗列基本的模板后，就可以选择性的更改。

实心模板

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="10dp"></corners>

    <solid android:color="#ff0000" />

</shape>

空心模板

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    >

    <stroke

        android:width="1dp"

        android:color="#ff0000" />

    <corners android:radius="10dp" />

 <solid android:color="#171616"/>

</shape>

渐变模板

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">


    <gradient

        android:angle="90"

        android:centerColor="#000000"

        android:endColor="#ff0000"

        android:startColor="#ff0000"

        android:type="linear" />

    <corners android:radius="10dp"></corners>

</shape>

在上边的模板中，其实需要更改的元素并不是很多，无非就是，颜色值，角度大小，边框等信息，这些信息，需要用户自己选择，所以需要抛给用户触发。

2、Web页面编写及上传平台

有了相关模板，那么就需要绘制UI进行实现了，其实在Android studio里的插件最合适不过了，插件也已经实现了，这个我们后面说，目前的在线，就需要大家进行Web绘制了，也就是Html、Css、JavaScript相关的技术了，相对于Android而言，还是比较简单的，编码思想都是一样的，具体的编写，大家可以自行发挥。

其实大家最关心的是，我们的页面，如何让别人进行使用，一般的情况下，服务器是必须的，如果我们没有服务器，其实也有很多的三方免费的托管，比如Github上，Github搭建静态网站，大家可以去搜，网上很多资料，按照步骤来就可以轻松实现了。

三、具体的主要代码实现

1、颜色选择实现

颜色用到了coloris插件，它可以在触摸输入框的时候，弹出颜色选择框，效果如下图：

使用起来也是很简答，在标签后面增加data-coloris属性即可。

<input type="text" style="width: 75%" class="input_color" value="#ff0000" data-coloris/>

2、下载代码实现

下载代码是用到了一个三方插件，FileSaver.js，下载的时候，也是非常的简单：

 let blob = new Blob([code], {type: "text/plain;charset=utf-8"});

 saveAs(blob, fileName + ".xml");

3、常规代码实现

常规代码，确实没啥好说的，无非就是Html、Css、JavaScript，大家可以直接右键看源代码即可。

四、总结及问题须知

其实大家可以发现，目前的生成，颜色也好，角度边框也好，都是固定写死的，其实，在实际的项目开发中，这些都是在资源里进行配置好的，直接选择资源里的即可，其实应该加个，可配置的参数，只配置一次，就可以动态的选择项目中的资源。

在线的毕竟还不是很方便，其实自己一直在搞一个自动化脚手架，可以直接生成到项目中，目前是针对公司里架构，不太方便开源出来，但2023年，改为自己的框架后，会给大家开源出来，很多代码，真的可以自动生成，真是方便了很多。