如何搞一個在線的Shape生成

本文正在參加「金石計劃 . 瓜分6萬現金大獎」

Shape是Android中一個必不可少的資源，很多的背景，比如圓角，分割線、漸變等等效果，幾乎都有它的影子存在，畢竟寫起來簡單便捷，使用起來也是簡單便捷，又佔用內存小，誰能不愛？無論是初級，還是中高級，創建一個shape文件，相信大家都是信手拈來。

雖然在項目裏，我們可以直接複製一個Shape文件，改一改，就能很簡單的實現，但是為了更方便的創建，直接拿來可以用，於是搞了一個在線的Shape生成，目前包含了，實心、空心、漸變的模式，希望可以幫助到大家，雖然是屬於造輪子了，但猜測一下，估計有需要的人，哈哈~

今天的內容大致如下：

1、在線生成Shape效果

2、如何實現這樣一個在線生成平台

3、具體的主要代碼實現

4、總結及問題須知

一、在線生成Shape效果

效果不是很好，畢竟咱也不是搞UI的，不過功能均可用，問題不大，目前就是左側功能選擇區域，右側是效果及代碼展示區域，包含文件的下載操作。

在線地址：https://abnerming888.github.io/vip/shape/shape.html

實際效果如下：

二、如何實現這樣一個在線生成平台

其實大家可以發現，雖然是輔助生成的Android功能，但本身就是網頁，所以啊，懂得Web這是最基本的，不要求多麼精通，但基本的頁面得需要掌握，其次就是，清楚自己要實現什麼功能，得有思路，比如這個Shape，那麼你就要羅列常用的幾種Shape類型，其主要的代碼是如何呈現的，這是最重要的，搞定下面兩步問題不大。

1、Shape代碼模板

Shape的生成，其實是根據模板來的，只不過根據動態配置，改其中的參數而已，所以啊，是非常簡單的，羅列基本的模板後，就可以選擇性的更改。

實心模板

```xml

```

空心模板

```xml

```

漸變模板

```xml

<gradient
    android:angle="90"
    android:centerColor="#000000"
    android:endColor="#ff0000"
    android:startColor="#ff0000"
    android:type="linear" />
<corners android:radius="10dp"></corners>

``` 在上邊的模板中，其實需要更改的元素並不是很多，無非就是，顏色值，角度大小，邊框等信息，這些信息，需要用户自己選擇，所以需要拋給用户觸發。

2、Web頁面編寫及上傳平台

有了相關模板，那麼就需要繪製UI進行實現了，其實在Android studio裏的插件最合適不過了，插件也已經實現了，這個我們後面説，目前的在線，就需要大家進行Web繪製了，也就是Html、Css、JavaScript相關的技術了，相對於Android而言，還是比較簡單的，編碼思想都是一樣的，具體的編寫，大家可以自行發揮。

其實大家最關心的是，我們的頁面，如何讓別人進行使用，一般的情況下，服務器是必須的，如果我們沒有服務器，其實也有很多的三方免費的託管，比如Github上，Github搭建靜態網站，大家可以去搜，網上很多資料，按照步驟來就可以輕鬆實現了。

三、具體的主要代碼實現

1、顏色選擇實現

顏色用到了coloris插件，它可以在觸摸輸入框的時候，彈出顏色選擇框，效果如下圖：

使用起來也是很簡答，在標籤後面增加data-coloris屬性即可。

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

2、下載代碼實現

下載代碼是用到了一個三方插件，FileSaver.js，下載的時候，也是非常的簡單：

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

3、常規代碼實現

常規代碼，確實沒啥好説的，無非就是Html、Css、JavaScript，大家可以直接右鍵看源代碼即可。

四、總結及問題須知

其實大家可以發現，目前的生成，顏色也好，角度邊框也好，都是固定寫死的，其實，在實際的項目開發中，這些都是在資源裏進行配置好的，直接選擇資源裏的即可，其實應該加個，可配置的參數，只配置一次，就可以動態的選擇項目中的資源。

在線的畢竟還不是很方便，其實自己一直在搞一個自動化腳手架，可以直接生成到項目中，目前是針對公司裏架構，不太方便開源出來，但2023年，改為自己的框架後，會給大家開源出來，很多代碼，真的可以自動生成，真是方便了很多。