创建 IView 界面

IView 是 CocoaUI 独创的流式布局的界面控件, 用于替代原生的 UIView 类和之类. IView 使用 HTML + CSS 进行流式界面面布局(Flow Layout), 你可以将原生的 UIView 及其子类添加到 IView 中, 也可以反过来将 IView 添加到原生的 UIView 及其子类中.

有几种方式可以创建 IView 界面:

  1. 手工创建界面 DOM 树的 IView
  2. 从 XML + CSS 字符串中创建 IView
  3. 从单独的 XML + CSS 文件中创建 IView(推荐)

手工创建界面 DOM 树的 IView

IView view = [[IView alloc] init];
[view.style set:@"margin: 15;"];
IImage *logo = [IImage imageNamed:@"icon.png"];
[view addSubview:logo style:@"float: center; height: 80; margin: 10 0;"];

从 XML + CSS 字符串中创建 IView

NSString *xml = @""
    "<div style=\"width: 100%;\">"
    "    <div style=\"width: 100%; height: 100; background: #9cf; border-radius: 10; margin: 50;\">"
    "        <div style=\"width: 100; height: 50; float: center; background: #f66; margin-top: 10;\"></div>"
    "    </div>"
    "    <span style=\"float: center;\">Hello World!</span>"
    "</div>";
IView *view = [IView viewFromXml:xml];

从单独的 XML + CSS 文件中创建 IView(推荐)

假设你已经将界面的 XML 单独放到一个文件中, 文件名为 login.xml, 然后你就可以这样创建 IView 界面:

IView *view = [IView namedView:@"login"];
// 或者
IView *view = [IView namedView:@"login.xml"];

CSS 既可以内嵌到 XML 文件中, 也可以抽取出来放到一个单独的 CSS 文件中, 并像 Web 网页一样引用外部 CSS 资源文件.

总结

无论使用何种方式创建 IView 界面, 你都想要将创建出的 view 显示出来, 如果你用的是原生的界面, 那么可以将 view 添加到原生界面里:

[uiview addSubview: view];

当然, 如果要把原生的 UIView 添加到 IView 中, 也是非常简单:

UISwitch *swt = [[UISwitch alloc] init];
[view addSubview: swt];

IView 和 ITable 配合使用, 可以提供下拉刷新, 上拉加载更多等功能, 替代 UITableView. 具体参考例子.