iOS屏幕适配实践浅谈

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践

前端开辟的屏幕适配其实算是根本功，每个码农在经久实践中都有本身的总结。

在 iOS 平台上，苹不雅爸爸对适配的支撑小我感到很不人道化，供给了 AutoLayout、sizeClass 等技巧，感到没有前端类似 flexBox 如许的技巧来得灵活。像是点歪了技能树，过于看重应用 xib 设备 UI，但很多码农照样习惯纯代码编程。Cocoa 没有 css 如许的纯构造文件，导致很多时刻我们将构造、UI 和逻辑写在一路，十分纷乱、冗长。

下面简单介绍下在实践中适配屏幕的偏向思路，抛砖引玉。

大年夜设计到代码：沟通与标准

App 的 UI 界面是由设计人员(产品，UI)绘制的，然后由开辟实现，两边要有优胜的沟通，并且把设计内容标准化、文档化。

对设计方来说，适配的规矩老是在设计师心中的，是按比例的缩放，照样固定的间距，是公用一套规矩，照样在大年夜屏下有特别的构造，都须要有明白方法传达给耿直的码农们。

iOS屏幕适配实践浅谈

一般常见的构造方法有：

固定间距：在不合尺寸下，间距老是固定。
流式构造：文字，图片等在不合屏幕下贱式排布，比如大年夜屏下一行显示四┞放图片，小屏一鹦三张，图片尺寸固定。
比例放大年夜：间距，文字大年夜小，图片大年夜小等比例放大年夜。
保持比值：两个UI元素或者图片的长宽等属性保持必定的比值。
对齐：元素间按某个偏向对齐。

设计师须要将这些构造规矩标注清跋扈，有利沟通，也便利日后追溯。

iOS屏幕适配实践浅谈

UI 的搭建：xib VS 纯代码

苹不雅一向用 xib 来标榜他们家 App 开辟简单易上手：将各类你须要的器械往屏幕上一拖一放，一个 UI 界面就搞定了，这很 cool 不是嘛!

Xib 的长处显而易见：

易上手、可视化，所见即所得
削减代码量
快，合适小 App 快速开辟

起首，xib 本身过于愚蠢，只能搭建一些简单的 UI，动态性很差，难以知足 App 复杂的 UI 交互需求。

其次，做过机能优化的同窗都知道，xib(or StoryBoard)的机能是很差的，相对于用纯代码 alloc 的组件来说，xib 加载慢，并且会占用 App 包的体积。不仅仅是 App 的机能，应用老 mac 打开较大年夜的 xib 文件，有时刻会卡的你困惑人生，严重影响开辟效力(心境)。

除此以外，对于团队协作来说，xib 也不是一个浩揭捉?项：浏览艰苦，无法在 git 上查看汗青修改，轻易造成冲突，造成冲突后难以解决，元素经由过程 outlets 与代码的链接难以保护，轻易在修改中造成讹夺等等。

别的，对于我这种半途转到前端的工程师来说，对一切在 IDE 界面上设备的器械都有种迷之不信赖，感到不如一行行黑导僮爸的代率攀来的靠谱。

当然我们不是完全禁用了 xib，用代码码 UI 的缺点也很明显：繁琐，代码量大年夜。是以对一些元素较多，又比较固定的 UI 组件，我们可以用 xib 来削减代码量：

iOS屏幕适配实践浅谈

针对UI代码繁琐，反复编码多的情况，我们可以经由过程恰当封装(UI 工厂类)，组织构造(MVC，分别 UI 代码)等手段，清楚逻辑。

不善于：

比例构造
动态性较强的页面局部
不合屏幕大年夜小比例的适配
复杂的 UI

// label 工厂办法 
+ (UILabel *)labelWithFont:(UIFont *)font 
                     color:(UIColor *) 
                      text:(NSString *)text 
             attributeText:(NSAttributeString *)attributeText 
                 alignment:(NSTextAlignment)alignment;

构造：返璞归真

大年夜 iOS7 开端苹不雅在 Cocoa 平台惹人 AutoLayout 进行 UI 的根本构造。然则 AutoLayout 异常反仁攀类，不仅代码繁琐并且应用不灵活限制很多。

比如我想要把三个元素等间距地展示在屏幕上，用 AutoLayout 写完根本蛋都碎了，更别说动态地在两套构造间切换这种高等需求。

烘菀呕不雅推出 sizeClass，试图解决多套构造的问题，然则仍然没有触及到码农的痛点，并且依附 xib 使它泛用性不好。

1/5 1 2 3 4 5 下一页尾页

　　推荐阅读

　　电商如何在“双十一”实现流量销量双绝杀

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践对于电商而言，平日网站流量是靠推广得来的，常见的可以经由过程优化关键词，做外部链接，发文┞仿宣传，>>>详细阅读

本文标题：iOS屏幕适配实践浅谈

地址：http://www.17bianji.com/lsqh/38739.html

1/2 1