本文正在参与「金石方案 . 分割6万现金大奖」

Shape是Android中一个必不可少的资源，许多的布景，比方圆角，分割线、渐变等等作用，简直都有它的影子存在，究竟写起来简略快捷，运用起来也是简略快捷，又占用内存小，谁能不爱？无论是初级，还是中高级，创立一个shape文件，信任咱们都是信手拈来。

虽然在项目里，咱们能够直接复制一个Shape文件，改一改，就能很简略的完成，但是为了更便利的创立，直接拿来能够用，所以搞了一个在线的Shape生成，现在包含了，实心、空心、渐变的模式，期望能够协助到咱们，虽然是归于造轮子了，但猜想一下，估量有需求的人，哈哈~

今天的内容大致如下：

1、在线生成Shape作用

2、怎么完成这样一个在线生成平台

3、具体的首要代码完成

4、总结及问题须知

一、在线生成Shape作用

作用不是很好，究竟咱也不是搞UI的，不过功用均可用，问题不大，现在便是左边功用挑选区域，右侧是作用及代码展示区域，包含文件的下载操作。

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

实际作用如下：

如何搞一个在线的Shape生成

二、怎么完成这样一个在线生成平台

其实咱们能够发现，虽然是辅助生成的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插件，它能够在接触输入框的时分，弹出色彩挑选框，作用如下图：

如何搞一个在线的Shape生成

运用起来也是很简答，在标签后边添加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年，改为自己的框架后，会给咱们开源出来，许多代码，真的能够主动生成，真是便利了许多。

如何搞一个在线的Shape生成