iOS布局方式的演变
- 使用Rect的frame布局方式
- autoresizingMask方式
- AutoLayout
- SizeClass
AutoLayout深入浅出前传
Frame布局
通过原点和长宽来确定View的展示
布局代码：
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 300, 300)];
view.backgroundColor = [UIColor lightGrayColor];
UIView *subView1 = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];
[view addSubview:subView1];
[self.view addSubview:view];
- 所有View的frame由Controller的rootView大小确定
- rootView大小由Controller根据分辨率自动确定
所以subView布局相对于parentView一层一层，利用parentView的长宽来确定尺寸和位置，多个并列的视图同时添加到一个parentView时，需要设计多个subView的比例，确定边界
平时开发常用的做法：
- 在View布局时，传入一个固定宽度的pViewSize，该size的高度为0
- 布局View的subView，传入一定一个固定宽度，高度为0的size，重复步骤1
- 在叶子节点View 上，算出高度，改变pViewSize的height值
- (void)setupCellSubsNew:(UIView *)viewParent inSize:(CGSize *)pViewSize indexPath:(NSIndexPath *)indexPath
{
// 子窗口高宽
NSInteger spaceXStart = 10
NSInteger spaceXEnd = pViewSize->width;
NSInteger spaceYStart = 8;
CGSize viewC1Size = CGSizeMake(spaceXEnd - spaceXStart, 0);
// 创建View
if (viewParent != nil)
{
if (_viewC1 == nil)
{
_viewC1 = [[UIView alloc] initWithFrame:CGRectZero];
[_viewC1 setBackgroundColor:[UIColor clearColor]];
[self.cardBackgroundView addSubview:_viewC1];
}
[_viewC1 setFrame:CGRectMake(spaceXStart, spaceYStart, viewC1Size.width, viewC1Size.height)];
// 创建V子界面
[self setupCellVendorC1SubsNew:_viewC1 inSize:&viewC1Size];
}
else
{
[self setupCellVendorC1SubsNew:nil inSize:&viewC1Size];
}
spaceYStart += viewC1Size.height;
// 调整间距
spaceYStart += 8;
pViewSize->height = spaceYStart;
}
- (void)setupCellVendorC1SubsNew:(UIView *)viewParent inSize:(CGSize *)pViewSize
{
// 子窗口高宽
NSInteger spaceYStart = 0;
NSInteger spaceXStart = 0;
CGSize viewC1R2Size = CGSizeMake(pViewSize->width, 0);
// 创建View
if (viewParent != nil)
{
[_viewC1R2 removeFromSuperview];
_viewC1R2 = [[UIView alloc] initWithFrame:CGRectZero];
[viewParent addSubview:_viewC1R2];
[self setupCellVendorC1R2Subs:_viewC1R2 inSize:&viewC1R2Size labels:labels lineCount:lineCount];
[_viewC1R2 setFrame:CGRectMake(spaceXStart, spaceYStart, viewC1R2Size.width, viewC1R2Size.height)];
}
else
{
[self setupCellVendorC1R2Subs:nil inSize:&viewC1R2Size labels:labels lineCount:lineCount];
}
if (viewC1R2Size.height > 0)
{
spaceYStart += viewC1R2Size.height;
}
// 设置父窗口尺寸
spaceXStart ＋= viewC1R2Size.width;
pViewSize->height = spaceYStart;
pViewSize->width = spaceXStart;
if (viewParent != nil)
{
[viewParent setSize:CGSizeMake(spaceXStart, subsHeight)];
}
}
autoresizingMask
解决不同屏幕下布局问题，如：横屏、竖屏的切换时，要么在旋转事件中重新对视图进行布局调整，要么就使用autoresizingMask来解决
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(10, 10, self.view.bounds.size.width-10*2, 100)];
view.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:view];
view.autoresizingMask = UIViewAutoresizingFlexibleWidth;
AutoLayout
Autolayout是XCode6开始引入的专门用来进行UI界面布局的技术一种布局技术，用来取代Frame布局在遇见屏幕尺寸多重多样的不足
通过控件之间的相互依赖确定View的位置和大小
SizeClass
size class是iOS8引入的概念，不同分辨率设备太多，如果按固有的布局方式来进行调整，工作量会越来越大，工作越来越繁琐，从而Apple简化了分辩率的概念，将尺寸抽象为Compact、Regular、Any(紧凑、正常、任意)三种情况
AutoLayout的使用
使用方式：
- Xib或StoryBoard
- NSLayoutConstraint约束设置
- VFL约束设置
- masonry设置约束
NSLayoutConstraint设置
+(instancetype)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(nullable id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;
约束条件满足：view1.attr1 = view2.attr2 * multiplier + constant
NSLayoutAttribute：表示View的Top、bottom、Left、Right等特性
NSLayoutRelation：表示>=、=、<=
VFL约束设置
VFL把水平与垂直方向的约束用字符串一并表达出来，而不是一个一个的添加
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(nullable NSDictionary *)metrics
views:(NSDictionary *)views;
format：VFL语句
opts：View之间的对齐方式
metrics：字典，key为VFL中出现的常量，value为常量表示的值，一定为NSNumber类型
views：字典，key为VFL中出现的View，value为实际的View
VFL语句示例：
NSString *hFlightInfoVFL = @"H:|[_flightInfoLabel]|";
NSString *vFlightInfoVFL = @"V:[_depAirportLabel]-margin-[_flightInfoLabel]|";
水平方向上：_flightInfoLabel与父View的间距为0
垂直方向上：_flightInfoLabel的顶部与_depAirportLabel底部的间距为margin
NSString *hArrowLineVFL = @"H:[_depTimeLabel]-[_arrowLineView(>=100)]";
NSString *vArrowLineVFL = @"V:[_arrowLineView(0.5)]";
水平方向上：_depTimeLabel的右边与_arrowLineView的左边间距为0，_arrowLineView的宽度最小为100
垂直方向上：_arrowLineView的高度为0.5
AutoLayout的性能
- AutoLayout中每一个约束都是一个简单的线性等式或不等式
- 布局系统在最后仍然需要通过frame来进行
相比frame布局系统，AutoLayout增加了约束计算过程
使用 Cassowary 算法解决约束问题就是对线性等式或不等式求解，所以其时间复杂度就是多项式时间的，所以View越多，约束越多，性能损耗越大
AutoLayout与TableViewCell高度计算
iOS7 + frame的布局方式：
- heightForRowAtIndexPath:中算出高度
- cellForRowAtIndexPath中创建cell并布局
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
[self configureCell:cell atIndexPath:indexPath];
return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
[self configureCell:_baseCell atIndexPath:indexPath];
[_baseCell layoutSubviews];
CGFloat height = [_baseCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
return height;
}
iOS8高度估算 + AutoLayout布局：
iOS8中UITableViewCell的高度引入自适应功能
iOS8中执行顺序：
- estimatedHeight预估高度
- cellForRow创建cell并布局
- heightForRow返回高度
若heightForRow返回了高度，则预估高度将作废，系统将使用heightForRow返回的值
_tableView.rowHeight = UITableViewAutomaticDimension;
_tableView.estimatedRowHeight = 70.0;
如果UITableView每行内容变化很大，行高差别很大，那我们可以使用以下方法为每一行设置各不相同的预估值。
- (void)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath {
if(indexPath.row == 0) {
return 40;
}
else if(indexPath.row = 2) {
return 75;
}
return 44;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if (IS_IOS8_OR_ABOVE) {
return UITableViewAutomaticDimension;
}
}
AutoLayout的优缺点:
优点：
- UI布局与数据处理分离
- 使用TableViewCell中避免了复杂的高度计算
- cell复用不用过多考虑子视图是否需要hidden
缺点：
- 布局逻辑并没有比使用frame更清晰，代码量也并没有减少，（更适合与Xib搭配）
- 需要维护大量的NSLayoutConstraint实例和逻辑
- 复杂的布局效果不太好实现
寒哥细谈之AutoLayout全解
Autolayout学习笔记
IOS AutoLayout 详解
从 AutoLayout 的布局算法谈性能
Flexbox优化
CSS核心：再说框模型
由FlexBox算法强力驱动的Weex布局引擎