XML 界面布局

CocoaUI 支持用类似 HTML 源码那样的 XML 文件进行界面布局. 使用 XML + CSS 布局, 可以让你的 Objective-C 代码更加简洁, 代码的功能模块划分更加清晰. 结合 CSS 外部文件引用功能, 你可以将样式相关的代码放在一起统一管理, 重复使用.

一个简单的示例

完整的代码可以参见 CocoaUI 的 Demo 项目源码: https://github.com/ideawu/cocoaui-demos

<div style="margin: 15;">
    <style src="login.css" />
    
    <img id="logo" src="user.png" />
    
    <div class="row">
        <img src="ic_name.png" class="row_icon" />
        <input id="name" type="text" placeholder="Username" class="row_input" />
    </div>
    
    <div class="row">
        <img src="ic_pass.png" class="row_icon" />
        <input id="password" type="password" placeholder="Password" class="row_input" />
    </div>
    
    <div id="captcha_div" style="display: none;">
        <img id="captcha_img" />
        <div style="margin: 15 0; border-bottom: 1 solid #eee;">
            <img src="ic_captcha.png" style="width: 18; height: 24; margin: 8 8 0 0;" />
            <input id="captcha" type="text" placeholder="Captcha" style="width: 100%; height: 40;" />
        </div>
    </div>
    
    <button id="submit">Login</button>
</div>

CocoaUI 支持的标签

style, div, span, img, input, button, h1, h2, h3, h4, h5, p, b, hr, select/option.

CocoaUI 还支持更多的 HTML 标签, 但只使用少数几个标签, 可以让你更舒服地完成任务.

从 XML 文件初始化原生界面

IView *view = [IView namedView:@"login"];
[self addIViewRow:view];

这段代码会从一个名为 login.xml 的 XML 布局文件中, 初始化原生的 UI 控件, 之后你就可以显示它.

如何在 OC 代码里引用标签?

你必须给标签定义 id 属性, 然后在代码里这样获取它的引用:

IImage *logo = (IImage *)[view getViewById:@"logo"];

内联 CSS 样式

将这段代码放在 XML 中:

<style>
.col{
    height: 100;
    margin: 10;
}
</style>

引用外部的 CSS 样式文件

<style src="login.css" />

完整的代码可以参见 CocoaUI 的 Demo 项目源码: https://github.com/ideawu/cocoaui-demos