如何搞一个在线的Shape生成

  • Post author:
  • Post category:其他


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 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年,改为自己的框架后,会给大家开源出来,很多代码,真的可以自动生成,真是方便了很多。



版权声明:本文为ming_147原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。