/GICXMLLayout

使用XML布局UI

Primary LanguageObjective-CMIT LicenseMIT

GICXMLLayout

CI Status Version License Platform

介绍

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开发的,因此天生具有强大的性能优势

在线文档

在线文档链接

Installation

GICXMLLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'GICXMLLayout', '~> 0.5.0'

IDE & 脚手架支持

GICXMLLayout已经有了配套的IDE开发工具以及脚手架的支持,以便你更快的创建项目以及进行开发。

IDE

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

脚手架

  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选项,将头文件的路劲添加上去。比如:

    18

这样就可以在Swift中使用GICXMLLayout

另外一个需要注意点:

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

  2. 由于在Swfit4中, 继承自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. inpute元素增加keyboard-type 的支持。文档

  3. 增加control元素。文档

    control的功能类似UIControl,提供enablehighlightselected等状态管理。

  4. 增加data-context元素。文档

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

  5. 增加router模块。文档

0.2.1

增加对Swift的支持

0.2.2

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

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

  3. 调整事件分发机制。增加double-taptouch-begintouch-movetouch-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. listcollection-view所有的section都支持添加header、footer。文档

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

0.4.0

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

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

    现在你可以通过nav-bartitle节点自定义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中的asyncawait了。

0.5.0

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

  2. grid-panelcollection-view 增加column-span附加属性。

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

    代码中使用$eventInfo 来访问

Author

海伟, 693963124@qq.com

License

GICXMLLayout is available under the MIT license. See the LICENSE file for more info.