GICXMLLayout

介绍

GICXMLLayout简称gic，是一个使用XML描述UI的库，同时具备MVVM功能。gic能做什么？

1. 使用XML描述UI、动画等。
2. 纯净的MVVM
3. 支持数据绑定，类似于h5中Vue提供的数据绑定能力。
4. 支持模板功能，类似于h5中的模板功能。
5. 支持JS直接操作元素，并支持使用JS编写业务逻辑（支持ES6规范）。
6. 强大的布局系统，甚至提供flex等复杂高效的布局。
7. 强大的自定义能力，能够允许开发者根据需要扩展出可直接用XML描述的任意功能。
8. 具有局部替换能力，可以对现有项目进行局部替换，使局部功能具备MVVM+XML的能力。
9. 由于其直接使用XML描述，因此天生具备实时更新的能力。
10. gic的布局系统以及UI系统是基于Texture开发的，因此天生具有强大的性能优势。

在线文档

在线文档链接

安装

GICXMLLayout可以通过CocoaPods获取。要安装它，只需将以下行添加到Podfile中：

pod 'GICXMLLayout', '~> 0.5.0'

IDE与脚手架支持

GICXMLLayout已经提供了配套的IDE开发工具和脚手架支持，方便您更快地创建项目和开发。

IDE

目前GICXMLLayout在VSCode中开发了一款插件，名字叫GICVSCodeExtension，你可以在VSCode的插件市场中搜索并直接安装，支持XML智能提示、JavaScript编译、热重载、热更新测试等功能。

脚手架

1. 执行以下命令安装脚手架。（请确保已安装nodejs和npm）

   sudo npm install gicxmllayout-cli -g

2. 执行以下命令，创建GIC工程。

   gic init YourProject

3. 根据提示进行模板选择及安装。

安装完成后，搭配VSCode进行开发将极大地提升开发效率。

Swift支持

从0.2.1版本开始，GICXMLLayout支持Swift语言。但由于GICXMLLayout本身是基于OC开发的，因此在Swift中使用时需要使用桥接。以下为操作步骤：

1. 创建一个头文件，例如：Bridging-Header.h

2. 在头文件中添加如下头文件引用。

   #ifndef Bridging_Header_h
   #define Bridging_Header_h
   #import <GICXMLLayout/GICXMLLayout.h>
   #endif /* Bridging_Header_h */

3. 进入项目的build settings，然后找到Objective-C Bridging Header选项，将头文件路径添加上去。例如：

   

这样就可以在Swift中使用GICXMLLayout。

另外一个需要注意的点是：

1. 所有ViewModel都必须继承自NSObject

2. 由于在Swift 4中，继承自NSObject的Swift class 不再默认 Bridge 到 OC，因此需要在class前加上@objcMembers 这个关键字。例如：

   @objcMembers class ViewModel: NSObject {
       ...
   }

3. 不支持对Int? Float?等值类型进行可空解析。在定义swift class时避免使用可空类型的值类型。但是String、Array、Dictionary可以定义为可空类型。

实际上，不只是ViewModel需要遵循上述规则，所有在ViewModel中使用到的class都必须遵循上述规则。

更新日志

0.1.1

1. 新增样式(style)功能。文档

   你现在可以为UI元素添加样式了，你还可以将样式定义在单独的XML文件中，这样你就可以为你的APP添加类似主题(theme)的功能。

0.2.0

1. 增加canvas元素，目前处于beta阶段，但已经可以使用。canvas文档

   你现在可以直接使用xml来实现类似Core Graphics的功能了。你甚至可以直接使用canvas来实现一个报表，还支持动画呢。

2. 对input元素增加keyboard-type的支持。文档

3. 增加control元素。文档

   control的功能类似UIControl，提供enable、highlight、selected等状态管理。

4. 增加元素。文档

   现在可以直接将一大段json字符串作为数据源添加到data-context中。

5. 增加router模块。文档

0.2.1

增加对Swift的支持

0.2.2

1. label元素增加对font属性的支持，现在可以为label指定字体。文档

2. canvas元素中的path新增dash属性，现在可以为线条添加虚线设置。文档

3. 调整事件分发机制。增加double-tap、touch-begin、touch-move、touch-end事件。文档

   目前已经将touch事件优化成直接使用系统本身提供的事件分发机制。

0.3.0

这个版本是因为涉及到对js的支持，所以比之前的版本在开发时间和难度上都要大。

1. list元素添加对header和footer的支持。文档

2. list元素添加对section的支持。文档

   支持多个section。当然也支持数据绑定。现在的list功能已经很接近UITableView提供的功能了。

   注意：在使用方式上与之前基本无差别，但需要将原来的list-item放入某个section元素中。不再支持裸的list-item。

3. 新增collection-view。文档

   功能上类似UICollectionView，list支持的功能collection-view 同样支持。

4. 新增script元素，提供对js的支持。文档

   现在您可以直接使用js来操作UI元素的属性，甚至使用JS来实现业务逻辑。

0.3.1

1. 新增grid-panel布局。文档

   布局效果类似collecttion-view，只是grid-panel没有滚动条，适合在list、collection-view等列表的list-item中使用。会自动计算内容高度。

2. Script新增对setInterval、clearInterval的支持。

0.3.2

1. 为Script增加JSAPI注册器。以便扩展JSAPI文档

   现在你可以通过GICJSAPIManager来为动态添加JSAPI，以便形成你自己的一套独有的JSAPI集合。

2. list、collection-view所有的section都支持添加header、footer。文档

3. 动画触发条件支持任意事件。文档

0.4.0

1. 增加JSRouter相关API，专门用来支持JS 导航相关。文档

2. Router模块中的nav-bar元素增加title子元素

   现在你可以通过nav-bar的title节点自定义page的title-view

3. image元素新增path属性。文档

   现在可以直接加载根目录下的图片

4. JS API修改.文档

   1. 获取事件参数。可以通过$eventInfo获取事件参数
   2. 增加require函数。现在可以在任意JS脚本的任意位置动态加载js文件

5. list元素增加显示索引功能。并且进一步的优化了显示性能。文档

0.4.2

1. for指令增加对数组的insert支持。

   1. NSMutableArray增加对方法insertObjects:atIndexes:的支持。
   2. JS数组目前对splice方法的已经得到完整支持。

2. bug修复。

0.4.3

1. 新增JS调用Toast提示的API
2. 增加了对Spring动画的支持。

0.4.4

1. 新增transforms形变元素。文档

0.4.5

1. JSRouter增加返回层级的参数。文档

   你现在可以选择返回的页面层级了。

0.4.6

1. 将Router中的页面返回按钮隐藏文字。

2. scroll-view元素增加水平滚动功能。文档

3. lable元素增加如下功能。文档

   1. 提供对link的支持。
   2. 提供下划线、删除线的支持。

0.4.8

1. for指令支持遍历JS对象。

2. 完善require函数。用法相当于node.js中的用法

3. 内置PromiseAPI

4. 支持yield以及generator。

   现在GIC已经可以支持ES8中的async、await了。

0.5.0

1. 新增附加属性系统。文档

2. grid-panel和collection-view 增加column-span附加属性。

3. 触摸事件的eventInfo增加touch point。 文档

   代码中使用$eventInfo来访问

海伟, [email protected]

GICXMLLayout可在MIT许可下使用。有关更多信息，请参阅LICENSE文件。