属性面板中可以选择屏幕尺寸:
autoSizeing 与 autoLayout不能同时使用,把autoLayout去掉以后才能使用autoSizeing
autoSizeing
外面四条线: 如果勾选了 外面四条线,表示与当前父图的距离固定的 。如果勾选了上面的一条线,表示当前view与父视图上边的距离固定(x坐标);
里面四条线:是否跟 着父控件等比例变,父控件变宽的时候子控件也变宽
通过代码设置autoresingMask:
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高。
enum {
UIViewAutoresizingNone = 0,
UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
UIViewAutoresizingFlexibleWidth = 1 << 1,
UIViewAutoresizingFlexibleRightMargin = 1 << 2,
UIViewAutoresizingFlexibleTopMargin = 1 << 3,
UIViewAutoresizingFlexibleHeight = 1 << 4,
UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};
UIViewAutoresizingNone就是不自动调整。
UIViewAutoresizingFlexibleLeftMargin 自动调整与superView左边的距离,保证与superView右边的距离不变。
UIViewAutoresizingFlexibleRightMargin 自动调整与superView的右边距离,保证与superView左边的距离不变。
UIViewAutoresizingFlexibleTopMargin 自动调整与superView顶部的距离,保证与superView底部的距离不变。
UIViewAutoresizingFlexibleBottomMargin 自动调整与superView底部的距离,也就是说,与superView顶部的距离不变。
UIViewAutoresizingFlexibleWidth 自动调整自己的宽度,保证与superView左边和右边的距离不变。
UIViewAutoresizingFlexibleHeight 自动调整自己的高度,保证与superView顶部和底部的距离不变。
UIViewAutoresizingFlexibleLeftMargin |UIViewAutoresizingFlexibleRightMargin 自动调整与superView左边的距离,保证与左边的距离和右边的距离和原来距左边和右边的距离的比例不变。比如原来距离为20,30,调整后的距离应为68,102,即68/20=102/30
self.view.autoreszingMask= UIViewAutoresizingFlexibleBottomMargin ;/......
autoressizeing可以屏幕适配,但局限较大,有些任务根本无法完成.autoSizeing可以办到的事情用autolayout都可以办到;
autoLayout:自动布局技术,专门用来布局UI界面的,从ios6开始引入;
autoLayout两个核心概念:参照,约束;
提示:选中aotolayout后下方多了一排工具栏:
从左到右分别是:Align,对齐模式 点击后会出现很多对齐方式(居中,靠右,靠左)
pin:间距,如上间距,下间距等
<strong>align:</strong>
先点击UI组件,然后点击align后会出现:
Leading Edges:左对齐
Trailing Edges:右对齐
Top Edges:顶部对齐
bottom Edges:底部对齐
Horizontal Center:水平居中
Vertial Centers:垂直居中对齐
BaseLines:
Horizontal Center in Container:在父控中水平居中
Vertical Center in Container:在父控件中垂直对齐
点击上面的对齐方式后,然后点击最下面的(Add Constraints )添加约束(注意点击下面的align只能添加新的约束,不能查看当前已添加的约束,如果要查看添加了哪些约束,应该查看左边的Constranints节点查看)
<strong>pin(可以设置控件的宽高,相对控件的位置)</strong>:
先点击UI,然后再点击最底部的pin,会出现相应的约束:
上:表示距离要参照view控件上边的距离 //默认的view为控制器的view,可以选择下拉里面的view,指定要参照的
左:表示距离要参照view控件左边的距离//可以选择下拉里面的view,指定要参照的view
下:表示距离要参照view控件下边的距离 //可以选择下拉里面的view,指定要参照的view
右:表示距离要参照view控件右边的距离//可以选择下拉里面的view,指定要参照的view
width:设置控件的宽
height:设置控件的高
Equal Widths:如果同时选择了多个控件,再点击pin,表示多个控件的宽度一样
<pre name="code" class="objc"> Equal Heights:如果同时选择了多个控件,再点击pin,表示多个控件的高度一样
约束下面的"update Frame"表示:添加约束的同时更新frame,它有以下三个选项。 None:不更新,如果选择它,会用虚线显示当前view的最终位置 Items of New Constraints:只有添加了新约束的控件才会加载frame,如果选择了本项,点击add Constraints会马上更新当前view All Frames in Container:所有的控件都会加载frame
如果左边出现黄色(警告):说明frame没有匹配view,有待调整(可以点击Fix MisPlacement)如果左边出现红色(错误):说明约束不完整,有些约束没有添加(不严谨),可能没有考虑到横屏、竖屏,位置等常见错误Ambiguou
s Layout 布局不能确定,即给出的约束条件无法唯一确定一种布局,也就是约束条件不足,无法得到唯一的布局结果。这种情况一般添加一些必要的约束或者调整优先级可以解决Unsatisfiable Constraints 无法满足约束,问题来源是有约束条件互相冲突,因此无法同时满足,需要删掉一些约束 防止约束重突,否则可能报错 如何删除已添加的约束?选择UI控件--->最右边的尺寸面板--->Constraints(可以选择下拉里面的 Delete)
select and edit:
<pre name="code" class="objc">选择UI控件--->最右边的尺寸面板--->Constraints-->"select and edit"如下选项:
Multiplier:表示当前的宽度是参照控件的宽度的多少倍;
Constant: 参照控件的宽度*multiplier+constant =当前控件的最终宽度
priority:优先级(如果约束冲突,选择优先级高的控件)
虚线框表示最终效果,点击最左边黄色的警告,然后选择update Frame--->Fix MisPlacement(匹配约束) View:表示控制器的View Top Layout Guide:顶部指导,最顶上的那段距离有了AutoLayout,就应该忘记Frame
利用NSLayoutConstraint代码添加约束:
//首先禁止autoresizing
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
// 2.约束蓝色
// 2.1.高度
NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:40];
[blueView addConstraint:blueHeight];
// 2.2.左边间距
CGFloat margin = 20;
NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];
[self.view addConstraint:blueLeft];
// 2.3.顶部间距
NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];
[self.view addConstraint:blueTop];
// 2.4.右边间距
NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];
[self.view addConstraint:blueRight];
// 3.约束红色
// 3.1.让红色右边 == 蓝色右边
NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
[self.view addConstraint:redRight];
// 3.2.让红色高度 == 蓝色高度
NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
[self.view addConstraint:redHeight];
// 3.3.让红色顶部 == 蓝色底部 + 间距
NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];
[self.view addConstraint:redTop];
// 3.4.让红色宽度 == 蓝色宽度 * 0.5
NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0.0];
[self.view addConstraint:redWidth];
NSLayoutConstraint说明:
+ (id)constraintWithItem:attribute:relatedBy:toItem: attribute:multiplier:constant:
参数说明:
WithItem:要约束的对象
attribute:对象的布局属性
relatedBy:布局关系
toItem:参照对象
attribute:参照对象的布局属性
multiplier:乘数
constant:常数
自动布局的核心公式
Object1.property1=(object2.property2*multiplier)+constant value