• 2015-11-10

    谁在使用 CocoaUI 框架?

    Views: 10942 | 2 Comments

    首先介绍下 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 已经应用非常广泛了.

    Posted by ideawu at 2015-11-10 12:21:00 Tags:
  • 2015-09-24

    iOS 滚动选择器控件 iOSScrollPicker

    Views: 12390 | No Comments

    滚动选择器控件, 不同于系统(框架)自带的 UISlider, iOSScrollPicker 支持:

    • 甩动选择
    • 点击选择
    • 支持竖直(上下)滚动
    • 支持水平(左右)滚动

    这有点像 iPhone 系统里的时间设置控件(日历控件), 或者说老虎机效果. 一般的实现是用 UIScrollView 来实现, 但用 UITableView 来实现, 可以更简洁, 减少很多偏移量的数值计算.

    代码下载: https://github.com/ideawu/iOSScrollPicker

    截图:

    iOS 滚动选择器控件 iOSScrollPicker

    Posted by ideawu at 2015-09-24 17:49:24 Tags: , ,
  • 2015-06-19

    iOS 正确接收 HTTP chunked 数据的方法

    Views: 11547 | 1 Comment

    iOS 上的 NSURLConnection 一般能处理绝大部分的 HTTP 请求场景, 不过, 对于一种情况, 它无法处理, 那便是接收 HTTP chunked data. NSURLConnectionDataDelegate 有一个方法, 可以在读取到部分响应时进行回调, 但是, 数据不是按 HTTP chunked data 来接收的, 它会将多个 chunk 合并到一起.

    @protocol NSURLConnectionDataDelegate 
    - (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data;
    @end
    

    没办法, 只能使用 cURL for iOS, 在 iComet 的 iOS 例子里有介绍.

    首先, 下载 cURL for iOS: http://seiryu.home.comcast.net/~seiryu/libcurl-ios.html

    然后, 把里面的 libcurl.a 引入你的项目, 还要把它的头文件引入. 注意, cURL 依赖 libz.dylib.

    Continue reading »

    Posted by ideawu at 2015-06-19 19:54:21
  • 2015-06-17

    iOS流式布局UI框架CocoaUI开源

    Views: 9826 | 1 Comment

    CocoaUI 是一个强大的 iOS UI 框架, 使用 Web 开发者熟悉的 HTML+CSS 流式布局方式, 轻松地开发 iOS 原生 App 的界面.

    CocoaUI 的特性主要包括:

    • 高效的原生界面, 非低效的 WebView 控件方式
    • 自适应(Adaptive)动态流式布局, 轻松适配多种屏幕尺寸
    • 采用简洁高效的 HTML+CSS 语法定义布局(Layout)和展现(Appearance)

    Continue reading »

    Posted by ideawu at 2015-06-17 17:50:00 Tags:
  • 2015-03-25

    流式布局的原理和代码实现

    Views: 14847 | 2 Comments

    最简单的流式布局模型, 其实就是: 靠左, 靠右, 或者堆叠. 根据这个简单的理论, 可以用两个栈(Stack)数据结构, 一个表示靠左边的控件列表, 另一个表示靠右边的控件列表, 即可实现流式布局模型.

    用伪代码表示如下:

    // 视图控件
    class View{
        private FlowLayouter layouter;
        
        // 当控件发生 frame 改变后, 调用此方法标记为需要重新布局
        void setNeedsLayout(){
            View view = this;
            while(view){
                view.markNeedsLayout();
                // 当控件需要重新布局时, 一般地, 它的父节点也需要重新布局
                view = view.parent;
            }
        }
        
        void layout(){
            for(View child in this.children){
                this.layouter.place(child);
            }
        }
    }
    
    // 流式布局管理器
    class FlowLayouter{
        private Stack leftViews;
        private Stack rightViews;
        
        void place(View child){
            Position pos;
            child.layout(); // 子节点先进行布局
            while(!this.spaceFits(child)){
                if(child.floatLeft){
                    View view = this.leftViews.pop();
                    pos = view.pos;
                    // 当被移除的节点比其它节点更高时, 继续移除
                    while(pos.y > this.leftViews.last.y){
                        View view = this.leftViews.pop();
                        pos = view.pos;
                    }
                }
                if(child.floatRight){
                    View view = this.rightViews.pop();
                    pos = view.pos;
                    // 当被移除的节点比其它节点更高时, 继续移除
                    while(pos.y > this.rightViews.last.y){
                        View view = this.rightViews.pop();
                        pos = view.pos;
                    }
                }
            }
            
            // place child here
            child.pos = pos;
            
            if(child.floatLeft){
                this.leftViews.push(child.pos);
            }
            if(child.floatRight){
                this.rightViews.push(child.pos);
            }
        }
    }
    

    这段代码最重要的是两点:

    1. 当某个控件发生改变时, 它需要重新布局. 同时, 它的父节点, 以及父节点的父节点, 一直到节点树的根节点, 都需要重新布局. 当然, 这是性能最差的方案, 优化的思路就是减少需要重新布局的节点的数量, 这需要发动每个人的聪明才智来想.

    2. 用两个 Stack 来分别表示靠左的和靠右节点列表. 如果当前的空白空间不足以放下一个控件, 那么, 尝试从节点列表中移除一个节点, 这样, 这个布局区域就空出来了一些空间. 当然, 这个空间应该往下移, 不能和被移除的节点所占据的空间重叠. 因为流式布局的基本原理就是不重叠(除非通过特殊设定, 如负数的偏移量).

    有了这个简单的流式布局模型, 你可以在所有最基本的绝对定位的 GUI 库上面实现功能强大的流式布局, 例如, iOS 的 UIKit 不支持流式布局, 你可以根据上面的代码扩展, 给 iOS 界面开发加上流式布局功能.

    流式布局其实是非常有趣的一项功能, 它的模型很简洁, 但功能强大且应用广泛. GUI 界面的本质是树, 树是简洁而优美的, 而流式布局使用的数据结构是 Stack, 又是一种非常基础的数据结构.

    说句题外话, 我已经实现了 iOS 系统上面的 UI 流式布局 - CocoaUI, 你可以试用下.

    Posted by ideawu at 2015-03-25 14:33:48 Tags: ,
  • 2015-03-08

    iOS界面响应式布局方式对比

    Views: 12819 | 2 Comments

    iPhone 手机的成功, iOS 操作系统功不可没. 而 iOS 操作系统的成功, 与早期 iPhone 单一的屏幕分辨率也有极大的关系. 不客气地说, 正因为早期 iPhone 手机只有一个分辨率, iOS 操作系统和其上面的 App 才不需要关心所谓的"响应式布局", "流式布局", "自动布局"这些技术, 它们只使用绝对定位的布局 - 每一个控件的大小和位置都是定死的, 几乎不变. 这样, iOS 应用开发者把精力放在了界面外观和交互体验, 最终促成了 iPhone/iOS 的成功.

    不过, 从 iPad 的出现, 到 iPhone 5 发布, 以及后面的 iPhone 6/6+, iPhone/iOS 手机的屏幕分辨率开始多样化了, 这时, 界面布局便不能死守着绝对定位布局了.

    为了解决这个问题, 苹果的方案是"Auto Resizing"和"Auto Layout", 特别是后者, 解决了界面动态布局的问题.

    Continue reading »

    Posted by ideawu at 2015-03-08 15:36:31 Tags: ,
|<<<123>>>| 2/3 Pages, 15 Results.