iOS 适配/ autoLayout基本知识

历史

iPhone3GS、iPhone4\4s：没有屏幕适配最早开发里面的程序全部都是写死的

iPad 旋转出来之后 Autoresizing问世
iPhone5\5c\5s
兼容各种不同的情况
系统适配 ios版本适配ios6 7 8 9
屏幕适配 iPhone3.5 4.0 4.7 5.5 iPad 7.9 9.7
开发面向点去开发

autoResizing

必须关闭autolayout、sizeclass才能使用Autoresizing
在以前如果屏幕旋转会重写 willRotateToInterfaceOrientation 在设置一边frame
布局：
图形界面布局
外面的4 根线，实心线代表距离是控件摆放固定的位置，注意一般都是选中2 根线
内部的2 根线，横竖线表示宽度是否成比例拉伸. 当时选择的设备宽度为320，你运行在375的设备上，你设置成80就会按比例拉伸在375的设备上
局限性：解决父子控件的关系，不能解决兄弟控件的关系

代码中布局：一定在添加控件之前设置好Autoresizing
@property(nonatomic) UIViewAutoresizing autoresizingMask;
UIViewAutoresizing
UIViewAutoresizingNone 什么都没有
UIViewAutoresizingFlexibleLeftMargin —> 左边不固定，右边固定,间距随屏幕大小拉伸
UIViewAutoresizingFlexibleRightMargin —> 右边不固定，左边固定,间距随屏幕大小拉伸
UIViewAutoresizingFlexibleTopMargin —> 上边不固定，下边固定,间距随屏幕大小拉伸
UIViewAutoresizingFlexibleBottomMargin —> 下边不固定，上边固定,间距随屏幕大小拉伸
UIViewAutoresizingFlexibleWidth —> 宽度跟随父控件的宽度自动成比例拉伸
UIViewAutoresizingFlexibleHeight —> 高度跟随父控件的高度自动成比例拉伸
发现如果设置间距固定就选择相反方向的枚举属性，左边固定就用 UIViewAutoresizingFlexibleTopMargin，他的意思是右边不固定，这样左边就固定

autolayout

xcode4(iOS6.0)出现 autolayout 但不是很火，到xcode5(iOS)的时候才被广泛关注
参照：参照物，相对于那个控件设置约束
约束：参照那个控件的一些约束
图形界面布局

设置：align - Add New Alignment Constrains —> (添加新的对齐约束)

Horizontal Center in Container —> 水平居中约束
Vertical Center in Container —> 垂直居中约束

设置：pin - add New Constrains —> (确定大小、尺寸)约束

上面4根线的作用设置距离父控件上下左右距离多少
下面width、height 设置控件自己的大小

托线设置约束

父子之间控件
Leading Space to Container Margin —> Leading Space to Container 距离父控件左边的间距
Trailing Space to Container Margin ＝＝ Trailing Space to Container —> 距离父控件右边边的间距
Bottom Space to Container
Bottom Space to Container —> 距离父控件下边的间距

Center Horizontally in Container —> 与父控件水平居中
Center Vertical in Container —> 与父控件垂直居中
兄弟之间控件
Horizontal Spacing —> 相对于兄弟水平间距
Vertical Spacing —> 相对于兄弟竖直间距

Top —> 相对于兄弟上边距
Center Vertically —> 相对于兄弟垂直中心对齐
Baseline —> 文字距UI控件顶部的偏移量
Bottom —> 相对于兄弟下边距

Leading \ Left —> 相对于兄弟左边距
Center Horizontally —> 相对于兄弟水平中心对齐
Trailing \ Right —> 相对于兄弟右边距

Equal Widths —> 相对于兄弟宽度
Equal Heights —> 相对于兄弟高度
Aspect Ratio —>

Hold Shift To select multiple —> 按住Shift可以选择多个
Hold Option for alternates —> 按住Option可以替换(不好用)

代码设置约束
约束添加到who上
如果这个约束只与自己有关，那么添加到自己身上
如果这个约束自己与父控件有关，那么添加到父控件上
如果这个约束自己与其他控件有关系，那么添加到他们公共父辈的控件上
NslayoutConstraint *constraint = [NSlayoutConstraint constraintWithItem:view1 attribute:attr1 relatedBy:relation toItem:view2 attribute: attr2 multiplier:multiplier constant:c];
view1 : 要约束的view
attr1 : 那个属性(x, y, width, height)
NSLayoutAttributeLeft —> 左
NSLayoutAttributeRight —> 右
NSLayoutAttributeTop —> 上
NSLayoutAttributeBottom —> 下
NSLayoutAttributeLeading —> 左
NSLayoutAttributeTrailing —> 右
NSLayoutAttributeWidth —> 宽度
NSLayoutAttributeHeight —> 高度
NSLayoutAttributeCenterX —> 中心点X
NSLayoutAttributeCenterY —> 中心点Y
NSLayoutAttributeBaseline —> 基本线
NSLayoutAttributeLastBaseline —> 同 NSLayoutAttributeBaseline
NSLayoutAttributeFirstBaseline —> 第一条基本线
iOS8 新增约束
NSLayoutAttributeLeftMargin —> 左边距
NSLayoutAttributeRightMargin —> 右边距
NSLayoutAttributeTopMargin —> 上边距
NSLayoutAttributeBottomMargin —> 下边距
NSLayoutAttributeLeadingMargin —> 左边距
NSLayoutAttributeTrailingMargin —> 右边距
NSLayoutAttributeCenterXWithinMargins —> 中心X边距
NSLayoutAttributeCenterYWithinMargins —> 中心Y边距

NSLayoutAttributeNotAnAttribute —> 没有边距
relation : 约束关系
NSLayoutRelationLessThanOrEqual <=
NSLayoutRelationEqual ==
NSLayoutRelationGreaterThanOrEqual >=
view2 : 参照的view
attr2 : 参照的属性(x, y, width, height)
multiplier : 倍数关系
c : 额外的值, 在倍数之外的值

view1.attr1 relation(= or < or >) view2.attr2 * multiplier(倍数) + c
注意：1.一定先有父控件，再添加约束，否则会报错误.
// 使用约束一定要设置这个值，禁止系统把AutoresizingMask的一些设置转换成Autolayout
2. self.view1.translatesAutoresizingMaskIntoConstraints = NO;

Visual Format Language —> VFL 可视化格式语言

代码
H:[控件(width)]—margin[控件(width)]
H:[控件(>=width@priority)]
V:[控件(height)]-margin-[控件(==控件)]
H:|-margin-[控件(width)]-margin-[控件(width)]-margin-|

width : 宽度
height : 高度
margin : 间距
H : 水平
V : 竖直

NSArray *array = [NSLayoutConstraint constraintsWithVisualFormat:VFL options:options metrics:metrics views:views];
[self.view1 addConstraints:array];
VFL : VFL语句
options : 设置这个约束的方向的一些控件对齐方式，一般不填, 如果填写就填 kNilOptions
*********************** 以后补充其属性什么意思 *******************************
views : NSDictionaryOfVariableBindings(控件变量名) —> VFL中控件对应的真实控件变量
metrics NSDictionaryOfVariableBindings(变量名): —> VFL动态值

Masonry

一个基于autolayout的第三方布局框架，大大简化了autolayout的代码
// 一定要添加到 # “Masonry”
// 所有地方都不用加前缀mas_
#define MAS_SHORTHAND
// mas_equalTo基本数据类型不需要包装(@100), 可以直接100
#define MAS_SHORTHAND_GLOBALS
写法
mas_ 开头
mas_makeConstraints:
make 创建约束器
mas_remakeConstraints: 重新创建约束，把以前的约束删掉，重新创建约束
mas_UpdateConstraints: 修改约束，覆盖以前的一些约束
尺寸:
make.size.mas_equalTo(sizeValue).multipliedBy.offset(Value);
make.width.mas_equalTo(Value);
make.height.mas_equalTo(Value);

边界:
make.left.mas_equalTo(Value);
make.right.mas_equalTo(Value);
make.leading.mas_equalTo(Value);
make.trailing.mas_equalTo(Value);
make.height.mas_equalTo(Value);
make.edges.mas_equalTo(Value).insets(UIEdgeInsetsMakeValue);

中心点:
make.center.mas_equalTo(centerValue);
make.centerY.mas_equalTo(Value);
make.centerX.mas_equalTo(Value);

另一种写法，不需要包装
make.centerX.equalTo(centerX);

规律: make.属性.equalTo/mas_equalTo(参照属性).multipliedBy.offset(值)
文字描述: 约束属性 = 参照属性 * 值 + 偏移值
动画：必须执行 layoutIfNeeded 刷新界面

一般1个控件是4个约束就能确定自己的大小与位置，如果设置多个约束会冲突
如果出现黄(警告)、红(错误)问题约束肯定有问题，所以必须设置完约束之后没有问题算约束成功