文档章节

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

Jack088
 Jack088
发布于 2015/10/12 13:48
字数 1118
阅读 155
收藏 1

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

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

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

说实话, 所谓 Auto Layout 的原理非常简单, 也不是新事物. 其本质是相对布局, 而且很多年以前 .Net 的 UI 就有了 Dock/Anchor 特性. 原理简单, 符合人的一般思维, 这是个优点, 问题是, 苹果采用了一种非常丑陋的方式来实现这个原理. 不信, 你可以看看这段代码:

苹果的 Auto Layout

UIView *superview = self;
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
[superview addSubview:view1];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[superview addConstraints:@[
    //view1 constraints
    [NSLayoutConstraint constraintWithItem:view1      attribute:NSLayoutAttributeTop      relatedBy:NSLayoutRelationEqual         toItem:superview      attribute:NSLayoutAttributeTop     multiplier:1.0       constant:padding.top],
    [NSLayoutConstraint constraintWithItem:view1      attribute:NSLayoutAttributeLeft      relatedBy:NSLayoutRelationEqual         toItem:superview      attribute:NSLayoutAttributeLeft     multiplier:1.0       constant:padding.left],
    [NSLayoutConstraint constraintWithItem:view1      attribute:NSLayoutAttributeBottom      relatedBy:NSLayoutRelationEqual         toItem:superview      attribute:NSLayoutAttributeBottom     multiplier:1.0       constant:-padding.bottom],
    [NSLayoutConstraint constraintWithItem:view1      attribute:NSLayoutAttributeRight      relatedBy:NSLayoutRelationEqual         toItem:superview      attribute:NSLayoutAttributeRight     multiplier:1       constant:-padding.right],
]];

这段代码就是为了实现 padding(内边距), 但是用却用了一坨长长的代码. 任何人看到这段代码都应该感到恶心才对!

果不其然, iOS 程序员们发明了一些工具来消除这种难看的代码. 例如和 Facebook 有关系的名为 Masonry 的框架, 封装了一些函数来. 例子如下:

封装的相对布局

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
    make.right.equalTo(superview.mas_right).with.offset(-padding.right);}];

万变不离其宗, 其实质还是相对布局, 虽然代码量少了, 看起来简洁了, 而且好像在说"人话"(human nature language), 但是经验告诉我们, 用"人话"来做计算机编程, 基本上就是个笑话! 一是拖沓, 二是学习成本太高.

还有一点我必须要提到, 那就是相对布局的固有缺陷. 相对布局的缺陷就是其自身 - 相对. 相对意味着完成一件事, 你需要两个条件(两个参数). 如果你要动态地添加 UI 控件, 你不知道谁在你身边, 怎么办?

其实, 最好的布局方式, 应该是对于每一个控件, 它不需要关心其它的控件是谁, 每一个控件只需要自主地做好自己的份内事即可. 这就是 Web 界面布局(流式布局)的原理 - 每个人做好自己的事, 整体就自然而然好了.

那么, iOS 界面布局有没有这样简洁高效的方法的? 有! 使用 CocoaUI 界面库(libIKit.a), 你就可以使用 Web 界面布局的思路和原理来做 iOS 应用的界面布局. 这就是例子:

简洁的Web布局

[superview.style set:@"padding: 10;"];

没错! 只需要一行代码, 一行直观的符合程序员思维的代码, 每一个 Web 开发者都熟悉的的一行代码, 就完成所谓"自动布局" 40 行的代码. 不仅代码急剧减少, 思维还理顺了, 脑筋也不拧巴了.

CocoaUI(libIKit.a) 界面布局框架的功能不仅如此. 你知道, iOS 开发时我们经常用 .xib(nib) 来设计界面, 然后在代码里用一行代码来加载初始化界面. 使用, CocoaUI, 你也可以使用类似的技术, 直接从一个 HTML/XML 文件中加载初始化界面, 而且这个 HTML/XML 文件可以直接用浏览器来打开和预览!

如果你想提高 iOS 应用界面的开发效率, 可以试试 CocoaUI 吧. 先下载这个 Xcode 工程例子, 跑起来再说.


本文转载自:http://www.tuicool.com/articles/VNZNbyr

Jack088
粉丝 46
博文 580
码字总数 90438
作品 0
扬州
程序员
私信 提问
iOS 流式布局 UI 框架 CocoaUI 开源了!

CocoaUI 是一个强大的 iOS UI 框架,使用 Web 开发者熟悉的 HTML+CSS 流式布局方式,轻松地开发 iOS 原生 App 的界面。CocoaUI 的特性主要包括: 高效的原生界面, 非低效的 WebView 控件方式...

ideawu
2015/06/17
11.4K
9
iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普

iOS 终于支持了 PWA,一起来认识一下这个强化版「小程序」 | 科普 发布于 2018-04-13 文章被以下专栏收录

少数派
2018/07/06
0
0
Bootstrap3和jQuery实现响应式iOS/Android风格滚动到页顶(底)弹跳效果

在线演示 如果大家使用iOS或者android相关移动平台的话,对于页面滑动到最底端后的弹跳效果肯定不会陌生,在这篇教程中,我们将使用最新版的Bootstrap3和jQuery来生成一个类似移动设备app的w...

gbin1
2013/11/15
1K
0
如何判断你是合格的高级iOS开发工程师?

前言 随着移动互联网的高速发展泄洪而来,有意学习移动开发的人越来越多了,竞争也是越来越大,需要学习的东西很多。如何才能在激烈的移动开发者竞争中一枝独秀,成为一名真正合格的高级iOS...

_小迷糊
2018/05/26
0
0
疯狂ios讲义之不使用界面布局文件开发UI界面

如果打算使用纯代码来开发UI界面,则不需要设计任何界面布局文件,没有界面布局文件,也就不再需要使用自定义的视图控制器。这样程序可以直接在应用程序委托对象的application: didFinishLau...

博文视点
2014/01/20
2.5K
7

没有更多内容

加载失败,请刷新页面

加载更多

面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
13分钟前
10
0
读书笔记:深入理解ES6 (八)

第八章 迭代器(Iterator)与生成器(Generator) 第1节 循环语句的问题   在循环、多重循环中,通过变量来跟踪数组索引的行为容易导致程序出错。迭代器的出现旨在消除这种复杂性,并减少循...

张森ZS
13分钟前
10
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
17分钟前
10
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
26分钟前
9
0
重磅发布 | 全球首个云原生应用标准定义与架构模型 OAM 正式开源

导读:2019 年 10 月 17 日,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应用模型 Open Application Model (OAM...

阿里云官方博客
29分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部