iOS面试- 0x03 UI布局

基于iOS的UI布局，思考大前端的UI布局思想

一、Frame的设置

直接设置子视图的postion和size控制位置和大小。 是ios中基础的布局方式。

拓展： 在web/h5中的布局，默认是流式布局，就是排成一列的方式，里面可以设置relative、resoluation，fixed； 实现了相对，绝对、悬浮的布局功能。

小结： frame 可以实现了h5中的relative、relative以及fixed的功能，不过它默认是静止的，而web/h5是流失布局的。

二、AutoresizingMask 自动调整尺寸 【相对性】

AutoresizingMask帮助我们确定(子视图）某个视图相对于父视图进行如何调整，是有限度的；需要在viewWillLayoutSubviews/viewDidLayoutSubviews中进行认为干预。

存在问题： 同一个视图上有两个子视图，如果确立它们之间的关系？ iOS6之前的按照比重， 后来使用AutoLayout进行实现。

三、AutoLayout 自动布局

size class(iOS8引入)，如果设备太多，按照固定方式布局进行调整造成工作量很大【现在基本上是去掉了】； Apple简化分辨率概念： 将尺寸抽象为Compact、Regular、Any(紧凑、正常、任意)三种情况。 —— AutoLayout

包含两个部分：1）autoresizingmask 2）contraints

autoresizingmask：描述xib中布局显示的呃逆荣，开发中给开发人员调整参数使用的。给每个view生成一个3段串码，每个预约条件成为唯一的id，并描述该约束相关的view以及约束类型与约束之。 constraints：在固定大小的view上拖拽也使用constraints来进行计算更新会浪费很大。

例子1：UIScrollView上精心自动布局的约数拉取。
通过contentSize来进行获取通过约束对UIScrollView进行撑大；
实践中可能存在的问题：由于Scrollview的contentSize由其subviews确定，其subviews的布局依赖于其父视图Scrollview的边界。 这时矛盾的； 解决：即要么不让UIScrollView的contentSize由其subviews确定，要么就让ScrollView的subviews不依赖其contentSize（即Scrollview的边界） 选择子View设置一个常量和UIScrollView一样。

例子2：UITableView中的重用Cell存在重叠的问题
原因：因为Cell中的重用，没有心的内容覆盖上一次显示的内容，所以，还是回显示上一次的内容
解决：在prepareForReuse 方法中重置变量为默认的状态。

- (void)prepareForReuse {
   将有关的UI以及变量重置为默认的状态
   [super prepareForReuse];
}

约束实现UI布局

1、IB的约束的建立
2、代码布局: 1) 直接添加constraints 2）VFL（Visual format language），苹果自定义的一种布局约束描述的规范。3）UI布局约束库

1、IB实现:
直接在xib上进行对约束的拉取

2、代码约束实现：
1）直接使用约束的方法

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

注意事项：
《1》在使用代码添加约束操作前，先去掉IB中对该VC的XIB中的autolayout勾选项。
《2》Disable 掉 Autoresizing _contentView.translatesAutoresizingMaskIntoConstraints = NO; _topButton.translatesAutoresizingMaskIntoConstraints = NO; _mutipleButton.translatesAutoresizingMaskIntoConstraints = NO; _bottomButton.translatesAutoresizingMaskIntoConstraints = NO;

2）VFL —— 解决原生方法写得过于繁琐

- (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;

3）Masonry库
简化写出更多的场景使用的函数，更加简短 masonry源码阅读

4) PureLayout 用的比较少
基本上分为：（父视图和子视图之间的关系） 边缘关系： Edge （ 边距： 对应边的关系， 边缘关系： 除了边距的关系之外，还对应的是关于左边也可以对应着外面的关系） 数轴的关系： x、-y轴关系和基线的关系 二维关系： 数据的大小，宽和高了；

四、SwiftUI —— FlexBox

盒子布局的方式，在iOS，目前本人还没用过 ，这个地方以后再补充。

本文由 mdnice 多平台发布