iOS UI 布局简史

UI 布局技术概览

• nib：nib 是 NeXT interface builder 的英文缩写，以二进制的形式存储界面信息，是 IB3.0 以前的文件格式。

• xib：xib 是 xml interface builder 的英文缩写，是 IB3.0 之后苹果公司推出的新一代，以 xml 格式存储界面信息，在最终执行前，xib 文件会被编译为 nib 文件。。。。。。（请注意大神@史前图 的评论）

• storyboard：故事版文件，是苹果最新推出的用于在界面开发中替代 xib 文件的一种新技术。本质上是一个 xml 文件的集中管理区，不但可以描述 xib 单个界面的结构，还可以描述界面之间的跳转及依赖关系。主要是靠手拖，感觉像积木玩具。

• frame：等效于代码版的 storyboard，但更灵活。目前比较常用。如果没有好的适配方案，是多众多机型尺寸还是有点棘手。（欢迎补充最优雅的适配方案教程地址）

• AutoLayout：自动布局（AutoLayout）是 iOS6 发布的界面布局技术，该算法的主要思想是：将基于约束系统的布局规则（本质上是表示视图布局关系的线性方程组）转化为表示规则的视图几何参数。实际上 AutoLayout 算法本身并非有 🍎 发明，只是苹果用 Objective-C 去实现了该算法，方便 iOS 开发者使用。AutoLayout 有多种使用方式，如 ① 可视化工具：Xcode 的 Interface Builder，② 纯代码：以Masonry为代表。更多内容见自动布局 Auto Layout (原理篇)

• FlexBox：弹性布局（Flexible Box）。对，就是目前 Web 端最流行的布局方式（以前是盒子模型），现在 APP 上也能使用。此方案就扩展出很多技术，如Yoga（最牛逼的代表，Facebook 出品，衍生出很多上层方案，如跨平台的ReactNative、Android 的Litho、iOS 的Yogakit）、FlexboxLayout（Android 代表，Google 出品）、FlexLib、FLEX等。（欢迎补充）

• swiftUI：官网，苹果官方推荐。更多内容见苹果发布全新 SwiftUI 框架：一次编码，五端通用

nib

xib

storyboard

frame

非刘海机型

// 在AppDelegate.h中
@property float autoSizeScaleX;
@property float autoSizeScaleY;

// 在AppDelegate.m中
#define ScreenHeight [[UIScreen mainScreen] bounds].size.height
#define ScreenWidth [[UIScreen mainScreen] bounds].size.width

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];

    if(ScreenHeight > 667){ // 这里以(iPhone 6)为准
        myDelegate.autoSizeScaleX = ScreenWidth/375;
        myDelegate.autoSizeScaleY = ScreenHeight/667;
    } else {
        myDelegate.autoSizeScaleX = 1.0;
        myDelegate.autoSizeScaleY = 1.0;
    }
}

CG_INLINE CGRect TS_CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
{
    AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
    CGRect rect;
    rect.origin.x = x * myDelegate.autoSizeScaleX;
    rect.origin.y = y * myDelegate.autoSizeScaleY;
    rect.size.width = width * myDelegate.autoSizeScaleX;
    rect.size.height = height * myDelegate.autoSizeScaleY;
    return rect;
}

#define MainScreenWidth [[UIScreen mainScreen] bounds].size.width

#define font(R) (R)*(MainScreenWidth)/375.0

self.btnForgetPassWord = [UIButton alloc]initWithFrame:TS_CGRectMake(161, 499, 54, 12);
[self.btnForgetPassWord setFont:[UIFont systemFontOfSize:font(12)]];

刘海机型

#define K_iPhoneXStyle ( (CGSizeEqualToSize(CGSizeMake(414, 896), [[UIScreen mainScreen] bounds].size)) || ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO) )
// 或
#define K_iPhoneXStyle ((KScreenWidth == 375.f && KScreenHeight == 812.f ? YES : NO) || (KScreenWidth == 414.f && KScreenHeight == 896.f ? YES : NO))


// 其他宏
#define KScreenWidth ([UIScreen mainScreen].bounds.size.width)
#define KScreenHeight ([UIScreen mainScreen].bounds.size.height)
#define K_iPhoneXStyle ((KScreenWidth == 375.f && KScreenHeight == 812.f ? YES : NO) || (KScreenWidth == 414.f && KScreenHeight == 896.f ? YES : NO))
#define KStatusBarAndNavigationBarHeight (K_iPhoneXStyle ? 88.f : 64.f)
#define KStatusBarHeight (K_iPhoneXStyle ? 44.f : 20.f)
#define KTabbarHeight (K_iPhoneXStyle ? 83.f : 49.f)
#define KMagrinBottom (K_iPhoneXStyle ? 34.f : 0.f)

#define KScaleWidth(width) ((width)*(KScreenWidth/375.f))
#define IsIphone6P          SCREEN_WIDTH==414
#define SizeScale           (IsIphone6P ? 1.5 : 1)
#define kFontSize(value)    value*SizeScale
#define kFont(value)        [UIFont systemFontOfSize:value*SizeScale]

AutoLayout

• setNeedsLayout：告知页面需要更新，但是不会立刻开始更新。执行后会立刻调用 layoutSubviews。

• layoutIfNeeded：告知页面布局立刻更新。所以一般都会和 setNeedsLayout 一起使用。如果希望立刻生成新的 frame 需要调用此方法，利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。

• layoutSubviews：系统重写布局。

• setNeedsUpdateConstraints：告知需要更新约束，但是不会立刻开始。

• updateConstraintsIfNeeded：告知立刻更新约束。

• updateConstraints：系统更新约束。

FlexBox

方向性 （传统布局方向是从左到右，从上至下）弹性伸缩 （传统尺寸定义是通过像素等来精确定义）元素对齐（可以做到插拔）

Yoga

React Native

• 京东 618：ReactNative 框架在京东无线端的实践：这篇文章算是带我入门 RN 的，然后 2018 年初在华西公用推广 RN，也参考了此篇文章。不过京东现在主推Taro。

• 美团：只搜到美团官方的 RN 技术文章，不具有代表意义。不过相信大家接触入门 RN，肯定去下载过高仿美团客户端 React-Native 版。

• 携程：携程应该算是 APP 使用 RN 最多的厂家，当初还在 0.48 左右时就深度定制 RN，如热更新、分包等，网上能搜到很多携程 RN 的文章，如携程机票 React Native 整洁架构实践。终于在 2019 年开源了CRN，个人觉得开源得太晚了，对 RN 市场没有提供太大作用。

• 华医通医生端：我的第一个 RN 产品，除了 IM 及相关的，其他页面均是 RN，占比估计 85%+。

Litho

Litho is a declarative framework for building efficient user interfaces (UI) on Android. It allows you to write highly-optimized Android views through a simple functional API based on Java annotations. It was primarily built to implement complex scrollable UIs based on RecyclerView. With Litho, you build your UI in terms of components instead of interacting directly with traditional Android views. A component is essentially a function that takes immutable inputs, called props, and returns a component hierarchy describing your user interface.

Litho 是高效构建 Android UI 的声明式框架，通过注解 API 创建高优的 Android 视图，非常适用于基于 Recyclerview 的复杂滚动列表。Litho 使用一系列组件构建视图，代替了 Android 传统视图交互方式。组件本质上是一个函数，它接受名为 Props 的不可变输入，并返回描述用户界面的组件层次结构。

YogaKit

FlexboxLayout

swiftUI

后语

• 自动布局 Auto Layout (原理篇)

• iOS 上的 FlexBox(箱式) 布局及 yogaKit 框架使用

• 从 Auto Layout 的布局算法谈性能

• iOS 如何使用 facebook 开源的 YogaKit(一)

• Flexbox 布局详解

• iOS 屏幕适配(纯代码)

• 几行代码帮你轻松完成 ios 屏幕适配

• iOS 关于全面屏适配的方案及 UI 在不同尺寸下适配方案

• Masonry 使用注意篇

• 京东 618：ReactNative 框架在京东无线端的实践

• 携程机票 React Native 整洁架构实践

• 基本功 | Litho 的使用及原理剖析