CN112579086A

CN112579086A - 一种适配多平台前端View的模板构建方法

Info

Publication number: CN112579086A
Application number: CN202011556623.9A
Authority: CN
Inventors: 孔世明
Original assignee: Sichuan Changhong Electric Co Ltd
Current assignee: Sichuan Changhong Electric Co Ltd
Priority date: 2020-12-24
Filing date: 2020-12-24
Publication date: 2021-03-30
Anticipated expiration: 2040-12-24
Also published as: CN112579086B

Abstract

本发明公开了一种适配多平台前端View的模板构建方法，通过最终解算完毕生成的widget对象集合，可根据大数据智能遍历View构建最优解执行发明，生成临时模板，将widget自动写入生成完整的layout文件及其附带绑定的drawable、style、strings、及微信小程序wxss文件，供用户端下载查看或者拷贝预览。

Description

一种适配多平台前端View的模板构建方法

技术领域

本发明涉及计算机图像图像处理技术领域，尤其涉及一种适配多平台前端View的模板构建方法。

背景技术

目前针对前期UI输出应用程序界面PSD文件的在线解析发明，通常采用的是插件集成的方式，使用PSD.js等算法控制器，将图层叠加信息拆解成像素单元，然后分解Layer构件，计算单个Layer单元的属性值及要素信息，最后匹配CSS样式等前端模板，生成通用的样式单元。但此方法存在很大局限性，这样导出生成的组件样式代码都是分散且独立的，用户只能通过点击UI标注图进行交互输出某个元素的样式代码，这些代码一来没有任何关联，二来没有上下文集合关系，前端开发者依然需要手动构建，无法一步到位。究其原因，主要是插件解析过程中，对获取到的图层信息没有做逻辑联动，缺乏针对某个指定平台的布局构建发明最优解的映射，没有对拆解形成的组件单元进行属性的归纳、分析、整合及耦合，所以无法生成看起来较为整体的View布局文件。

发明内容

本发明采用对解析产生的图层要素对象进行智能算法逻辑关联，建立“Layer对象-Widget对象-View对象”的属性映射关系，进而转化为整体View模板的方法，解决在“根据UI设计图一步到位的生成View文件”中存在的要素组件无法关联、元素样式独立，不能形成统一集合关系的View文件的问题缺陷。

本发明通过以下技术发明来实现上述目的：

一种适配多平台前端View的模板构建方法，包括以下步骤：

步骤1，PSD输入：

用户端上传一个PSD文件到服务器端，云端获取该文件进入PSD解算模块；

步骤2，PSD解算：

解算模块将文件结算拆解成包含完备信息的图层图像，并生成Layer对象数组，携带相关图层信息，配置唯一对象id；

步骤3，LayerArray重映射WidgetArray：

将每一个图层分组和图层作为单独的对象存储进Temp数组，结合元素高度信息从上往下声明WidgetEntity对象，该对象采用全局封装模式，包括如下几个信息：

高度宽度根据Image Data读取图层宽高值调用WidgetEntity内部static setter方法写入，并push Temp数组；

isChildren：记录当前图层对象是否具有父级布局，使用bool值控制后期映射实际布局组件时是子组件还是父布局；

Margin/Padding/Align：解析当前图层距离水平垂直方向上下一个图层有效信息的距离，使用Pixel作为单位长度记录，调用Setter方法内部封装，循环遍历相邻Layer单元判断边界框信息，比较上下高度获取对齐信息，使用AlignJson存储子集信息类，记录水平居中方向上下左右及Baseline中心线对齐信息；

Text/Color/Fontinfo：解析当前文本信息包括字体内容、字号以及颜色信息，记录字体FontFamily属性，使用Setter封装父级对象；

widgetType：使用模糊匹配的方式，针对文本外部包裹父级布局以及匹配输入交互等关键字的图层，使用Textview、TextButton或者inputBox作为图层对象类型，方便后续映射处理；

步骤4，Widget数组循环遍历：

通过以上步骤得到最终映射关系下的WidgetArray数组，此时，循环遍历该数组对象，新建文件IO线程，将每一个WidgetObjet对象属性通过geeter()方法依次提取并写入布局组件，命名为View文件，使用此遍历方法依次解析剩余嵌套子Widget及子父类布局，并产生完整的View文件，或以文本的方式展示在前台信息面板。

本发明的有益效果在于：

前期输入包含严格像素控制、图层编组、组件边界清晰、图文属性完整的PSD文件，由用户端上传至服务器，可流入解算模块顺利结算拆解成包含完备信息的图层图像，并生成Layer对象数组，携带相关图层信息，配置唯一对象id；

使用基于微信小程序、Android开发等布局规范化的模板规则，对一份完整的UI设计图，可匹配到确定的合理化、高效化的布局发明，灵活选用默认的组件库形成Widget集；

根据建立的不同前端平台下的组件库规范，可将PSD结算模块生成的Layer对象数组一一映射为对应的widget对象集合；

通过最终解算完毕生成的widget对象集合，可根据大数据智能遍历View构建最优解执行发明，生成临时模板，将widget自动写入生成完整的layout文件及其附带绑定的drawable、style、strings、及微信小程序wxss文件，供用户端下载查看或者拷贝预览。

附图说明

为了更清楚地说明本发明实施例中的技术发明，下面将对实施例或现有技术描述中所需要实用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1：基于PSD图像层解析适配多平台前端View的模板构建发明系统部署图，演示整个输入输出流程控制及模块分布；

图2：前期UI输出PSD文件读取解算思路图，演示从图片文件到像素流过程；

图3：PSD文件解算完毕Layer对象及Widget对象映射关系组建图，展示从Layer对象的getter及setter方法映射转化关系；

图4：具体实施发明UI Demo案例，使用本案例详细分析如何生成最终View模板。

具体实施方式

为使本发明的目的、技术发明和优点更加清楚，下面将对本发明的技术发明进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。

在任一实施例中，如图1-4所示，本发明的一种适配多平台前端View的模板构建方法，包括以下步骤：

1、PSD输入：

前期UI规则中规定使用RGB模式进行UI输出，PSD文件的图像储存方式和一般的Pic图或者Bitmap图极为不同，它不是以Pixel(象素点)作为储存标准，而是以Channel(通道)作为储存的标准，例如PSD图为RGB格式时，其Channel为Mask、Red、Green、Blue 4个；用户端上传附图2一个PSD文件到服务器端，云端获取该文件进入PSD解算模块；该PSD文件为严格像素控制、图层编组、组件边界清晰、图文属性完整的PSD文件。

2、PSD解算：

解算模块将文件结算拆解成包含完备信息的图层图像，并生成Layer对象数组，携带相关图层信息，配置唯一对象id；此步目的的最终执行结果为得到Channel Image Data结构，方便转化为LayerArrar数组。解算流程参照附图2。

①首先读取该PSD文件File Header，该字段为定长24bytes，包含图片Flag、Channel数目、Rows图片高度(Pixel为单位)、Columns图片宽度(Pixel为单位)、Depth图片深度、单元Channel bits数，然后读取Mode值，只有匹配Mode＝3的才会判定为RGB模式，使用Mode字段过滤非RGB模式的PSD图层，并直接return将报错信息单元返回用户端提示修改重新上传；

②根据文档流对象读取Layer and Mask Information信息，首先读入Count字段获取Layer数组长度，若取到的值＜0，用该值的绝对值，通过数值循环LayerRecords遍历，解析每一个records[index]的结构要素。声明临时对象TempObject，存储LayerItem携带的Top、Bottom、Left、Right属性以及LayerItem的NumberOfChannels，因为此信息即当前Layer里面包含的Channel数，遍历每个Channel，读取里面数据长度dataLength并存储；

③通过Blend Mode Signature和Blend Mode Key属性来判定当前读取到Imagedata结构是否正确，Blend Mode Signature必须为″8BIM″，而Blend Mode Key为固定属性。该属性关联Extra Data Size，表明了这个结构以下4个结构的总长度，跳过这个长度，就可以获得下个Layer Record结构的信息了，循环往复Layer Record信息都解析完毕，则生成全局Temp对象，进入下一步解算Channel Image Data结构，此结构包含所有图层分组及图像信息详情，而进行以上步骤是取得Channel Image Data的必要条件；

④Channel Image Data读取从Compression(压缩)属性开始，该属性指明以下Image Data信息的数据是否被压缩，0为不压缩，1为压缩，接着就是具体的像素数据，使用tempObject临时对象获取NumberOfChannels和Channel Length Info精准解析Data长度，如附图4，该设计图顶部个人中心信息栏可见3个Layer元素，由于每个Layer拥有4个Channel(Mask Red Green Blue)，则要读3*4＝12个Channel Image Data结构，进而可以成功得到Layer Image Data内部封装的图像数据，包括每个Channel的Compression属性和象素具体的Buffer，的目的就是要把每个Layer的Channel数据投放(转换)到Layer的RGB像素格式，使用VisualBasic程序语言进行解算，自定义Type指针概念。

若该图层Compression＝0，则像素数据没有压缩的情况，在这种情况下ImageData储存区是以Layer的Top-Left到Bottom-Right的顺序储存每个象素点的当前Channel值，每点值占1个byte、，要做的是把Layer里面R G B的channle信息分别读取到IMAGE_DATA结构的RGB值内。然后做转换图层Channel Red的数据处理。到此为止，要处理最麻烦的Compression＝1象素数据压缩的情况，在这种情况下，，Image Data首先是以(Layer.Bottom-Layer-Top)*2个Byte为开头，则(Layer.Height*2)Bytes，保存的是图片每一行(Columns)占用的数据长度大小。接下来的就是以2个Byte块为单位，表示Channel值在图片里有效长度(Pixel)和当前Channel值，这样以块为单位一直顺序循环下来直到Channel Image Data结构结束。

3、LayerArray重映射WidgetArray：

将每一个图层分组和图层作为单独的对象存储进Temp数组，结合元素高度信息从上往下声明WidgetEntity对象，该对象采用全局封装模式，对外提供如下几个重要信息：

高度宽度：根据Image Data读取图层宽高值调用WidgetEntity内部staticsetter方法写入，并push Temp数组；

基于以上步骤得到的ImageData数据，可以在程序里定义nLen(Layer.nHeight-1)as Long变量，表示每一行占用的字节长度，根据这个长度量顺序读取Channel值的有效象素长度和Channel值，然后转换到相对的RGB Image Data里面。按照这个步骤，分别把RGB的值都得到，，最后用SetPixel API画到PictureBox里面。此时实际存储为携带不同高度颜色及格式规范化标准的Layer cell信息单元集合，将此命名为LayerArray，循环遍历此数组，取得某项LayerCell，新建LayerObject对象，存储该LayerCell映射信息：

定义对象LayerObject，它包含如下属性：

尺寸：layerSize；

高度：layerHeight；

宽度：layerWidth；

边界范围：left，right，top，bottom；

图层类型：layerType；

子图层：isChild；

基线对齐：baseLine；

字符集对象FontFamily；

输入输出对象：InputBox；

图像渲染对象：Imagewidget

定义全局信息访问类globalProperties，定义Setter及Getter方法～此处抽象类可以根据不同前端规则进行扩展，这样使用循环赋值，将ImageDataArray数组信息存储为LayerArray数组对象。此数组对象可以进一步循环遍历，比较每一个ImageInfo的坐标信息，将image.X相同的Cell标识为VerticalAlign位置关系，对应在数组中为并行单元，而image.Y相同的单元，则设置为BaseLine属性同步关联，新建子数组单独存储，并比较横坐标位置大小差值，作为CellMargin值。追加玩ChildCel，添加子数组作为嵌套对象，再进入新一轮的循环。此时每一个LayerCell都具备与View组件相对应的要素值。以附图2为例，自左向右自上而下循环解析该设计图，可得到整个Page的LayerArray数组对象，考虑到任何页面都有滑动效果且都默认具有垂直关系的父对象，默认使用Parentobject作为图层父级存储LayerArray做Widget数组映射，不同前端选用UI绘制规则虽不同，但大同小异，下面以Android原生View绘制为例，基于以上LayerArray数组，可产生如下映射关系：

首先遍历最外层Array，默认产生LinearLayout父控件管理布局，对于水平层叠可继续使用LinearLayout布局，改变android：orientation属性值，解析不同LayerObject元素type值，做常量匹配，以此可匹配TextView、ImageView、Button、EditText等子组件，接着将附图2中UI设计相关元素映射并得到后期文件流读写的模板参照对象WidgetArray，并进入最终写入流程；

4、Widget数组循环遍历：

通过以上解算、映射等等流程，可以得到最终映射关系下的WidgetArray数组，此时，循环遍历该数组对象，新建文件IO线程，将每一个WidgetObjet对象属性通过geeter()方法依次提取并写入布局组件，命名为View文件。

以首元素为例，得到第一个父容器的布局对象，接着执行其中children子数组的遍历，先得到一个水平布局的LinearLayout元素，然后解析第一个元素Widget，geRer方法返回其widgetType为ImageView，相继取出其标识id、高度宽度、Resource资源文件赋值ImageView.Src，通过对象嵌套push进最外层LinearLayout元素。

读取下一行元素时，由于解析出来的为一个垂直方向的LinearLayout元素，此时只解析Chidren数组，将依次匹配写入三个TextView元素。同ImageView一样，除却设置公共属性，还要解析Textview的FontFamily字符集属性，使用textColor、textSize及text三个布局属性接收。动态追加第二层的垂直布局LinearLayout.

至此，演示了一个父级容器及其Children首元素组件的写入方法，使用此遍历方法依次解析剩余嵌套子Widget及子父类布局，并产生完整的View文件，或以文本的方式展示在前台信息面板。

在一个具体实施例中，如图1-4所示，本发明的一种适配多平台前端View的模板构建方法，包括以下步骤：

①要素关联：

本发明在传统基础的PSD Layer解析流程后，得到Channel Image Data，对单个layer对象要素获取其Top、Bottom、Left、Right属性等间隔信息posInfo，根据携带的shape关键字，进行分类，可划分为Button、inPutBox、TextView等等初始元素，记录为LayerSrcObj，将位置信息poslnfo进行计算，横纵坐标差值判断方向及排布关系，进行横纵方向上的编组，相同横坐标下的为不同组，相同纵坐标下的为一组，使用新的组对象保存该组，在父对象中追加direction记录该组的分布方向。每一组的不同Layer元素都携带默认id，通过追加above、below、alin、rightof、LeftOf等属性，遍历所有剩余元素，计算坐标差，判断位置关系，然后将位置属性以“@layerld”的方式进行以绑定，生成要素集合，此时，得到的最终要素组。对比传统单独的没有关联的要素单元，此时二次处理的新要素组，不仅携带着传统发明解析生成的固定的属性信息，同时，也与其他PSD layer组件产生了位置关联，为后续从layer图层对象向视图组件对象的转化提供了可读支撑，解决要素分散无法整合的问题；

②样式关联：

本发明采用纵向横向遍历Layer对象矩阵的方法，将Layer对象携带的图层信息，按大前端原生规则进行属性转化，以Android、小程序CSS样式为例，本发明建立在基础的样式文件解析上，对部分可依赖的样式进行单独解析，比如获取某layer携带的poslnfo信息，分别对应margin、padding样式字段，将位置差以string的方式赋值，而对于Button或者inputBox一类的带圆角、描边等关键样式，则通过分解为shape图层对象的方式，追加radius、solid、sroke、colors等属性值，记录这些图层信息，这时候得到的是这个Button产生的样式文件，使用name关键字来唯一标识这份独立样式，在原LayerObj要素对象实体中，引入background属性，将name的属性值赋值进去，注意，这里的name文件也是xml样式文件，只是通过background属性进行了绑定，这个name文件可以单独渲染在前端，也可以后续进行文件流输出，生成name.xml文件，这份文件可以供保存至drawable项目目录，直接引用。循环此发明，最终生成Widget样式数组，这些数组可以被还原为当初UI设计的层级结构，同时每个数组元素都有各自的样式关联文件；

③View整体布局生成：

相较传统的单独图层元素采集发明，本发明最大的特点也在于能将分散的元素进行整合，产生所属关系，生成模板文件，实现方式如下：

将前面两步产生的layerArray数组对象进行循环遍历，并生成name.xml样式关联文件，此时，得到的只是记录了所有PSD设计图上的图层信息，包括样式的属性值。但是这种原始数据，依然只能跟传统发明那样生成分散的生硬的属性值转化，却无法被开发者直接应用。因此，本发明采用重映射处理，首先将LayerArray映射为WidgetArray，以图层数组的首元素为例，读取保存的高度宽度信息，计算位置信息差值等产生的Margin信息，新建widgetObj，定义此对象需要声明width、height的属性，该基础属性决定着对象是否可用。每一个widgetObj都必须携带是否是子组件的信息，通过声明isChildren属性值，计算该图层纵向上相邻元素的横坐标，根据结果的正负，判断相邻元素是否为所属关系，使用布尔值记录这个所属。其他样式正常解析。因为这些样式互不干扰。不影响下面生成带有所属关系的布局。

以此类推，将所有的图层信息通过属性转化的方式，可以得到widgetArray，也就是组件数组，该数组存储的不是以前端布局代码为主的数据，而是与前端布局属性同名的键值对方式的组件对象，因为目前无法判断这些对象的父子级关系，各元素还是独立状态。

要遍历widgetArray，首先新建一个父类对象，还是以Android为例，以ContrainLayout作为父容器，获取第一个widget对象，若判断出isChildren为false，可以直接addView父容器，若判断为子类，则跳过addView步骤，执行读取widget的绑定信息，前面介绍过，绑定信息分两种，一种为样式绑定，一种为关系绑定。读取关系绑定，解析align、above、below、rightOf等等属性，若为null，则执行addView，若不为null，获取其@id值，声明新父容器，用Relativelayout存储这个对象，接着遍历下一个widget对象，先不读取其样式信息，首先读取其id，若这个id跟上一个元素id绑定吻合，则执行addView，这样生成的子布局Relativelayout，就是ContrainLayout的子布局，可以循环嵌套。

按照这个遍历执行读取顺序，以此类推，继续遍历其他widget对象，直到解析完毕所有widget元素，可以得到一个具有深度嵌套关系布局树，此树形对象就是打开文件输入输出流操作的FileData数据。之后只需开启额外的文件输入输出进程按照前端编码规范进行一一输出，即可生成最终的View布局文件。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。

Claims

1.一种适配多平台前端View的模板构建方法，其特征在于，包括以下步骤：

步骤1，PSD输入：

步骤2，PSD解算：

步骤3，LayerArray重映射WidgetArray：

高度宽度：根据Image Data读取图层宽高值调用WidgetEntity内部static setter方法写入，并pushTemp数组；

步骤4，Widget数组循环遍历：

2.如权利要求1所述的一种适配多平台前端View的模板构建方法，其特征在于，所述步骤1中，该PSD文件为严格像素控制、图层编组、组件边界清晰、图文属性完整的PSD文件。

3.如权利要求1所述的一种适配多平台前端View的模板构建方法，其特征在于，所述步骤2具体包括以下步骤：

(1)首先读取该PSD文件File Header，该字段为定长24bytes，包含图片Flag、Channel数目、Rows图片高度、Columns图片宽度、Depth图片深度、单元Channelbits数，然后读取Mode值，只有匹配Mode＝3的才会判定为RGB模式，使用Mode字段过滤非RGB模式的PSD图层，并直接return将报错信息单元返回用户端提示修改重新上传；

(2)根据文档流对象读取Layer and Mask Information信息，首先读入Count字段获取Layer数组长度，若取到的值＜0，用该值的绝对值，通过数值循环Layer Records遍历，解析每一个records[index]的结构要素；声明临时对象TempObject，存储LayerItem携带的Top、Bottom、Left、Right属性以及LayerItem的NumberOfChannels，因为此信息即当前Layer里面包含的Channel数，遍历每个Channel，读取里面数据长度dataLength并存储；

(3)通过BlendMode Signature和BlendMode Key属性来判定当前读取到Imagedata结构是否正确，Blend Mode Signature为″8BIM″，而Blend Mode Key为固定属性；该属性关联Extra Data Size，表明了这个结构以下4个结构的总长度，跳过这个长度，就可以获得下个Layer Record结构的信息，循环往复Layer Record信息都解析完毕，则生成全局Temp对象，进入下一步解算Channel Image Data结构；

(4)Channel Image Data读取从Compression属性开始，该属性指明以下Image Data信息的数据是否被压缩，0为不压缩，1为压缩，接着就是具体的像素数据，使用tempObject临时对象获取NumberOfChannels和Channel Length Info精准解析Data长度，该设计图顶部个人中心信息栏可见3个Layer元素，由于每个Layer拥有4个Channel，则要读3*4＝12个Channel Image Data结构，进而可以成功得到Layer Image Data内部封装的图像数据，包括每个Channel的Compression属性和象素具体的Buffer，的目的就是要把每个Layer的Channel数据投放到Layer的RGB像素格式，使用VisualBasic程序语言进行解算，自定义Type指针概念。

4.如权利要求1所述的一种适配多平台前端View的模板构建方法，其特征在于，所述步骤3中，得到的ImageData数据，在程序里定义nLen(Layer.nHeight-1)as Long变量，表示每一行占用的字节长度，根据这个长度量顺序读取Channel值的有效象素长度和Channel值，然后转换到相对的RGB Image Data里面；分别把RGB的值都得到，最后用SetPixel API画到PictureBox里面；此时实际存储为携带不同高度颜色及格式规范化标准的Layer cell信息单元集合，将此命名为LayerArray，循环遍历此数组，取得某项LayerCell，新建LayerObject对象，存储该LayerCell映射信息。

5.如权利要求1所述的一种适配多平台前端View的模板构建方法，其特征在于，所述步骤4中，得到第一个父容器的布局对象，接着执行其中children子数组的遍历，先得到一个水平布局的LinearLayout元素，然后解析第一个元素Widget，getter方法返回其widgetType为ImageView，相继取出其标识id、高度宽度、Resource资源文件赋值ImageView.Src，通过对象嵌套push进最外层LinearLayout元素；

读取下一行元素时，由于解析出来的为一个垂直方向的LinearLayout元素，此时只解析Chidren数组，将依次匹配写入三个TextView元素；同ImageView一样，除却设置公共属性，还要解析Textview的FontFamily字符集属性，使用textColor、textSize及text三个布局属性接收，动态追加第二层的垂直布局LinearLayout。

6.如权利要求3所述的一种适配多平台前端View的模板构建方法，其特征在于，所述步骤2中，若该图层Compression＝0，则像素数据没有压缩，在这种情况下Image Data储存区是以Layer的Top-Left到Bottom-Right的顺序储存每个象素点的当前Channel值，每点值占1个byte，把Layer里面RGB的channle信息分别读取到IMAGE_DATA结构的RGB值内；然后做转换图层Channel Red的数据处理，Image Data首先是以(Layer.Bottom-Layer-Top)*2个Byte为开头，则(Layer.Height*2)Bytes，保存的是图片每一行占用的数据长度大小；接下来的就是以2个Byte块为单位，表示Channel值在图片里有效长度和当前Channel值，这样以块为单位一直顺序循环下来直到Channel Image Data结构结束。