参考资料:
Auto Layout 和 Constraints - iOS · 碎碎念 - SegmentFault
Auto Layout Tutorial in iOS 9 Part 1: Getting Started
www.zybuluo.com/MicroCai/note/73867#autolayout-常见问题
#1 Auto Layout 简介
1. Auto Layout,通过设置在View上的约束,动态计算所有View的尺寸和位置。比如,你约束一个Button,使得它的水平中心线和一个ImageView相同。如果ImageView的尺寸或位置改变,Button会自动调整,以符合之前设置的约束。
外部变化 -> 发生于Superview的尺寸或位置改变。这时,所有view都要重新计算尺寸和位置。这些变化大部分发生在运行时,它们需要app能动态响应。
内部变化 -> 界面中的View的位置或尺寸的改变。比如,
--显示内容或图片时,新的内容或图片需要新的布局
--用户设置字体大小时,将改变与文本相关的控件的高度或宽度,布局必须能适应变化
2.Auto Layout是如何工作的呢?
考虑你设定的约束,自动计算出理想的位置和尺寸
3.Auto Layout常见问题
(1)设置了autolayout后,在代码中还能用self.someView.frame修改frame吗? 不能。
(2)为什么有些控件只设置x,y值约束,也不会出错?
UIKit 的一些控件如 UILabel、UIImageView 等有自适应特性,会根据内容自适应尺寸,所以不需要再约束其宽高。
(3)同样的约束用在 UIScrollView 和 UIImageView上,为什么会出现错误?
参考Nonomori 的文章:ScrollView 与 Autolayout
#2 不使用Auto Layout
1.打开File Inspector,不勾选Auto Layout
2.拖三个View出来,设置尺寸,位置,颜色。
Top left:Origin 20,20, Size 130 x 254 Green
Top right:Origin 170,20, Size 130 x 254 Yellow
Bottom:Origin 20,294, Size 280 x 254 Blue
3.在Size Inspector里,选择Frame Rectangle。就以左上角的View为例吧,Frame Rectangle能让它紧贴顶部和左部边缘,并且随着superview尺寸的改变,能在水平和垂直方向上相应调整布局。
Size Inspector但此时横向的效果图并不如意,三个view间并没有20的间隙。
横向效果图4.改变需要重新布局的view的frame
--将view与属性关联起来,并override viewWillLayoutSubviews()方法
ViewController.swift注意:viewWillLayoutSubviews()方法是针对4英寸的设备上的,所以对4.7或3.5英寸的设备并不奏效。而用nib方法或继续添加if分句都会过于麻烦,所以我们不妨回到Auto Layout上来。
当然,SnapKit也是一种解决的办法,可以尝试玩玩。
#3 使用Auto Layout
1.勾选Auto Layout,并去掉viewWillLayoutSubviews()方法。
2.加constraints
topLeftView topRightView bottomView看一下最后的效果
在不同尺寸不同方向上的布局
网友评论
UIView* viewWrapper = QUICK_SUBVIEW(self.view, UIView);
UIView* viewGreen = QUICK_SUBVIEW(viewWrapper, UIView);
UIView* viewYellow = QUICK_SUBVIEW(viewWrapper, UIView);
UIView* viewBlue = QUICK_SUBVIEW(self.view, UIView);
NSString* layoutTree = @"\
V:|[viewWrapper][viewBlue(viewWrapper)]| {left, right};\
H:|[viewWrapper]|;\
H:|[viewGreen][viewYellow(viewGreen)]| {top, bottom};\
V:|[viewGreen]|;";
[self.view q_addConstraintsByText:layoutTree
involvedViews:NSDictionaryOfVariableBindings(viewWrapper, viewGreen, viewYellow, viewBlue)];