idea's blog

CocoaUI 是一个非常强大方便的 UI 框架, 使用它, 可以极大的简化 iOS 界面开发, 你既不需要学习一套新的语法和语言, 也不需要使用繁琐的约束布局, 它用的就是 Web 开发中最常见的 HTML + CSS 流式布局方式, 但生成的是 iOS 原生的界面.

有用户这样评价:

@MrLiHong:
这个框架真心方便，之前大部分时间都花在调整UI布局上了，整个过程枯燥无聊！ 现在用这个框架后，效率提升太多，有更多的时间去写业务逻辑！ 非常感谢！！！

使用 CocoaUI 框架, 如果你遵循我推荐的步骤和方法, 可以让你的工作更快捷.

1. 首先, 你需要阅读 http://www.cocoaui.com/ 上面的文档, 一定十几个网页, 请务必要仔细阅读.

2. 接着, 下载 CocoaUI 框架的源码, 用 XCode 打开.

3. 用 CocoaUI Viewer 界面调试器来调试 UI. 在这一步, 你就是将美工设计的界面图直接转换成 app 界面, 所见即所得, 非常方便.

4. 最后, 在代码里加载 XML, 绑定事件. 一旦你用界面调试器调试完 UI 后, 就把 xml 文件移到你的 XCode 项目里, 然后用文档中提到的方法加载 UI. 加载后, 通过类似 getElementById() 一样的方法, 将 Objective-C 代码绑定到按钮或者输入框上面, 处理业务逻辑.

传统的 iOS 应用由于苹果自身的技术所限, 无法实现丰富的 UI 换皮肤(主题)功能, 更不用说 UI 热更新. 如果要实现换皮肤功能, 只能在开发阶段, 提前考虑和设计好几套 UI(xib), 然后在 app 运行时进行切换. 对于想在节日或者某些特殊节点临时给界面加一些点缀, 苹果自身的技术就无法实现了, 只能由开发者自己开动脑筋. 但无论如何, 都需要开发者"提前"想好所有的可能性! 这基本不现实.

而基于 CocoaUI 框架的 iOS 应用, 由于使用 XML+CSS 语言来定义界面, 所以只要程序员在代码中发起一个简单的 HTTP 请求, 就能从服务器端获取一套新的 UI, 从而实现 UI 热更新. 当然, 这要求在业务逻辑功能不变的前提下, 因为 CocoaUI 框架只解决 UI 相关的问题, 而业务逻辑仍然使用 Objective-C/Swift 语言来编写.

对于使用 CocoaUI 框架的应用来说, 要实现换皮肤(UI 热更新), 思路是这样的:

1. 开发阶段, 将一套完整的 XML+CSS 以及图片文件引入项目中, 打包时将包含这些 UI 资源文件, 所以应用在启动和使用过程中, 性能不会有任何影响.

2. 程序中实现文件更新功能, 在运行阶段从服务器端下载新的一套或者几套 XML+CSS+图片 UI 资源文件, 可以采用一些成熟的现有技术, 如断点续传, patch 更新等.

3. 一旦一套完整的 UI 资源文件下载完毕, 就可以根据服务器端的指令, 在某个时间, 或者根据某个条件触发, 切换到新的界面上来.

当然, 你可以用你自己喜欢的加密技术, 用来保护你的 UI 资源, 对于 CocoaUI 来说, 它关心的只是 XML+CSS, 而不一定是文件.

CocoaUI 是一个开源的强大的 iOS 原生 UI 框架, 并不是一个使用 WebView 的混合型浏览器框架. 官方网站是: http://www.cocoaui.com/

W3C 规范中对 CSS 样式的应用算法有规定, 这个规范中的算法比较复杂, 简单来说, 就是根据 CSS 样式选择器中的不同类型的元素出现的次数来计算优先级, 如果某个节点同时命中多个 CSS 样式规则, 以高优先级的样式为准.

W3C 规范具体可以见这个文档: http://www.w3.org/TR/CSS2/cascade.html, "6.4.3 Calculating a selector's specificity" 一节.

例如下面的两条 CSS 样式规则和 HTML:

<style>
ul li .clz{color: #33f;}
li .clz{color: #f33;}
</style>

<ul>
    <li><span class="clz">Hello World!</span></li>
</ul>

如果按照 W3C 规范来计算优先级, 那么会计算出:

第一条的优先级: a=0, b=0, c=1, d=2
第二条的优先级: a=0, b=0, c=1, d=1

Continue reading »

首先介绍下 CocoaUI 框架. CocoaUI 是我开发的一个 iOS UI 开发框架, 用来解决 iOS 设备上的界面布局和多设备屏幕适配问题. 当初, 在开发懒投资 iOS app 的时候, 我们都没有多少 iOS 开发的经验, 根据我们做 Web 开发多年的经验, 我们认为 iOS 的约束布局方式不符合大多数程序员的思维, 所以有必要借鉴 Web 界面布局(主要是流式布局, HTML+CSS 定义), 来开发 iOS 应用.

所以, CocoaUI 框架应运而生了. CocoaUI 在 2015-06-17 开源了, 源码托管在 GitHub 上面. 并且, 我还弄了一个以 cocoaui.com 为域名的网站, 在上面放 CocoaUI 相关的文档等.

有了 CocoaUI, 懒投资 iOS app 的开发速度非常快速, 我们多个传统的 Web 程序员同时开发, 协作得非常好. 由于完全是代码布局, 没有使用 XIB/StoryBoard 这些高度集成的受限技术, 整个项目模块划分非常清晰, 从来不会遇到代码冲突, 做界面的单元测试也极其方便.

我多次说过苹果的约束布局为什么那么落后, 是一项非常丑陋的技术. 而 CocoaUI 使用 Web 浏览器的布局思路和技术, 具有广大的用户基础, 上手非常简单.

目前, 我知道的使用 iOS CocoaUI 框架开发的大中型 app 有: 懒投资, 爱尚三福. 当然, 还有很多 app 没有主动给我反馈. 但 CocoaUI 已经应用非常广泛了.

CSS 的完整英文名称是: Cascading Style Sheets, 级联样式表. 除了可以定义丰富的样式, 以及进行界面控件布局外, CSS 最重要的特性便是名字中的"级联(Cascading)"一词. 级联代表了父子关联, 天生便是和数据结构中的"树"相关的.

我创建的 CocoaUI iOS UI 框架, 是一个使用 CSS 进行 iOS 上流式布局的开发框架, 极大地方便了 iOS 应用的界面开发, 轻松适配多种屏幕. 因为 CocoaUI 使用 CSS 来进行界面布局和定义界面样式, 所以需要对 CSS 的样式规则进行匹配, 将某一条 CSS 样式作用到某一个 UIView(IView) 上面.

Continue reading »

CocoaUI Viewer 是一个界面调试器, 专门用来调试 CocoaUI 的 XML 界面, 使用这个工具, 你可以进行所谓的所见即所得式的 UI 开发. 现在开源之后, 你可以在不同的模拟器里运行这个调试器, 以便调试界面在 iPhone 4/5/6/6p 上面的适配.

关于使用 CocoaUI 框架进行 iOS app 开发的流程, 我推荐是这样:

1. 在自己的 Mac 上搭建一个 nginx web 服务器, 以便能通过 HTTP 访问到 XML 界面文件.
2. 在模块器里启动 CocoaUI Viewer, 填入要调试的 XML 文件的 URL.
3. 调试完毕后, 把 XML 文件添加进你的 Xcode 项目.
4. 然后就可以在代码里通过 [View namedView@"a.xml"] 来显示界面了.

CocoaUI Viewer 的项目在 CocoaUI 项目里.

下载地址: https://github.com/ideawu/cocoaui
官方网站: http://www.cocoaui.com/