如何搞一個線上的Shape生成

語言: CN / TW / HK
時間 2022-12-15 09:15:10

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

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

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

今天的內容大致如下：

1、線上生成Shape效果

2、如何實現這樣一個線上生成平臺

3、具體的主要程式碼實現

4、總結及問題須知

一、線上生成Shape效果

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

線上地址：http://abnerming888.github.io/vip/shape/shape.html

實際效果如下：

image.png

二、如何實現這樣一個線上生成平臺

其實大家可以發現，雖然是輔助生成的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外掛，它可以在觸控輸入框的時候，彈出顏色選擇框，效果如下圖：

image.png

使用起來也是很簡答，在標籤後面增加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年，改為自己的框架後，會給大家開源出來，很多程式碼，真的可以自動生成，真是方便了很多。

image.png

「」
「」