(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210516440.7 (22)申请日 2022.05.12 (71)申请人 北京工业大 学 地址 102200 北京市昌平区龙泽园街道北 店嘉园22号楼 (72)发明人 王冠　郑亚伟　 (74)专利代理 机构 北京百年育人知识产权代理 有限公司 1 1968 专利代理师 丰美玲 (51)Int.Cl. G06F 8/38(2018.01) G06F 16/958(2019.01) G06F 9/451(2018.01) (54)发明名称 一种基于i OS系统声明式构建UI和布局的方 法 (57)摘要 本发明涉及iOS系统声明式构建UI和布局技 术领域， 且公开了一种基于iOS系统声明式构建 UI和布局的方法， 包括以下步骤： S1、 定义构建 UI、 描述布局、 UI属性的JSON的数据格式； S2、 定 义与上述JSON相对应的模版解析对象， 并解析 JSON描述文件载入内存； S3、 读取模版解析对象 视图类相关字段， 构建视图对象； S4、 读取模版解 析对象布局相关字段， 布局视图； 本发明基于 JSON描述视图， 简化了视图、 界面描述， 可读性 好； 基于Flexbox布局， 布局理念比iOS系统中绝 对布局、 AutoLayout布局先进， 界面布局更为灵 活； 支持交互事件、 视图对象引用自动关联； 支持 视图和数据模型的双向绑定， 视图、 数据同步控 制； 减少了代码量， 能显著提高软件界面开发效 率。 权利要求书1页 说明书3页 附图1页 CN 114924732 A 2022.08.19 CN 114924732 A 1.一种基于iOS系统声明 式构建UI和布局的方法， 其特 征在于： 包括以下步骤： S1、 定义构建UI、 描述布局、 UI属性的JSON的数据格式； S2、 定义与上述JSON相对应的模版解析对象， 并解析JSON描述文件载入内存； S3、 读取模版解析对象视图类相关字段， 构建视图对象； S4、 读取模版解析对象布局相关字段， 布局视图； S5、 读取模版解析对象样式描述、 交互事件、 关联对象、 关联数据等相关字段， 为视图设 置样式、 添加交 互事件、 获取视图引用、 视图数据等； S6、 构建视图的JSON描述文件， 通过对外暴露的接口解析视图的JS ON描述文件， 实现最 终界面渲染效果。 2.根据权利要求1所述的一种基于iOS系 统声明式构建UI和布局的方法， 其特征在于： 所述步骤S1中， 以JSON作为DSL描述界面， attrs字段描述视图样式及布局， 其中attrs以 key:value形式表述， 并以 “,”分割， JSON内的嵌套形式可以表达视图层级， subviews字段为 数组， 用于描述控 件内部子视图， 数组内的key值 为对应视图的雷鸣。 3.根据权利要求1所述的一种基于iOS系 统声明式构建UI和布局的方法， 其特征在于： 所述步骤S3中， 按照模版对象中解析的视图类、 视图属性等构建视图。 待视图构建完毕后， 按照视图层级关系统一构建视图树。 4.根据权利要求1所述的一种基于iOS系 统声明式构建UI和布局的方法， 其特征在于： 所述步骤S4中， 按照模版对象中相关布局参数， 借助YogaKit三方库实现视图的Flexbox布 局， 并提供视图布局更新相关接口。 5.根据权利要求1所述的一种基于iOS系 统声明式构建UI和布局的方法， 其特征在于： 所述步骤S5中， 借助KVC机制关联视图对象属性、 数据等， 借助Objectiv e‑C运行时机制添加 交互事件， 借助KVO机制实现数据视图双向绑定 。权　利　要　求　书 1/1 页 2 CN 114924732 A 2一种基于iOS系统声明式构建UI和布局的方 法 技术领域 [0001]本发明涉及iOS系统声明式构建UI和布局技术领域， 具体为一种基于iOS系统声明 式构建UI和布局的方法。 背景技术 [0002]移动互联网的快速发展， 使得移动智能终端进入了蓬勃发展时期， 智能终端的普 及和移动网络速度的快速提升， 使得用户对于移动应用程序性能要求也逐步提高。 另一方 面， 移动开发者在页面布局和UI构建上消耗的时间占据整体需求开发时间40％左右， 尤其 以iOS客户端更为显著。 [0003]近年来， 随着编程思想和编程技术的发展进步， 使用声明式的思想方式进行UI界 面的开发， 已经越来越被开 发者所接受， 并逐渐成为界面开 发的主流趋势， 该思想最早是来 源于Elm， 之后React和Flutter也采用此中方式， 单这一方面而言SwiftUI也几乎与它们一 致， 但它最低支持的版本是iOS13。 总结来说， 这些UI框架都遵循以下步骤和原则： 使用各自 的DSL(Do main System Langauage)以较为直观的方式来描 述视图层级和视图布局， 而不是 用一句句的代码来指导、 命令要怎样去构建布局UI， 之后UI框架内部解析并读取这些视图 的声明， 最后将它们以与声明相对应的方式绘制渲染到界面。 相比于命令式思想代码可读 性和维护性高出很多。 [0004]另一方面， iOS系统基于Frame的绝对布局 方式需要指出每个视图的精确位置， 相 比于前者苹果的自动布局(Auto  Layout)对于视图位置的描述更加简洁易读， 仅需要确定 两个视图之间的关系 就能够确 定布局， 但相比于Flexbox布局自动布局思路本身还可以再 提高， Flexbox比自动布局提供了更丰富、 更标准规范的UI布局方式， 布局方式考虑得更全 面， 使用起来也更加方便， Flexbox布局方式可以通过描述性的语言来布局， 在前端开发领 域Flexbox布局主要通过CSS来具体描述， FlexBox布局算法的具体实现原理可参照三方库 Yoga代码， Yoga是Facebook开源的一个编写视图布局的跨平台开源库， 其中YogaKit主要适 用于iOS端应用程序开发， 也是基于Flexbox布局思路实现， iOS9之后苹果公司基于Flexbox 的布局思路， 又在自动布局之上封装了一层UIStackView， 但目前主流App使用上并不是很 普及， 主要原因在于UIStackView虽然在布局 思路上做到了和Flexb ox布局思路一致， 但代 码实现层面同YogaKit存在同样的问题， 基于命令式实现方式而非声明式实现方式， 写法上 不够直观， 开发效率依然较低， YogaKit和UIStackView存在同样的缺点， 但是考虑到 YogaKit的跨平台性， 后续的维护要优于UIStackView， 因此本研究中采用现有的YogaKit进 行改进， 同上述声明式构建模块结合， 将axis、 spacing、 aligment、 distribution等属性映 射到JSON内部， 通过 上述声明 式构建控 件模块转换为具体的UI布局。 发明内容 [0005](一)解决的技 术问题 [0006]针对现有技术的不足， 本发明提供了一种基于iOS系统声明式构建UI和布局的方说　明　书 1/3 页 3 CN 114924732 A 3