Objective－c——UI基础开发第十天（自动布局）

一、autoresizing 的使用（了解）

只能参照父控件

1、实现横竖屏幕切换，不能把控件的frame血丝，需要进行屏幕适配

2、需要参照父控件

use auto layout禁用

才会出现autoresizing

3、autolayout和autoresizing是互斥的

不通过运行来查看不同尺寸下的情况

preview－》mainstoryboard

4、外侧的四根线勾选，表示该view距离父控件四周的边界的距离保持不变

内侧的两根线表示表示宽度和高度会随着父view 的变化而变化（等比例变化

二、autoresizing代码的实现和弊端

6根线，外侧四根控制与父控件的距离

内侧两个记录与父控件之间的相对变化

autoresizingMask

UIViewAutoresizingFlexibleTopMargin

UIViewAutoresizingNone

UIViewAutoresingFlexibleHeight

去 ｜ 或号

autoresing只适用子view和父view的

子view 和子view直接没法设置

只需要记住6根线的使用

autolayout（使用病掌握）

三、autolayout的基本使用

autolayout核心思想 ：参照和约束

可以设置控件和任意控件的约束

创建项目 可以禁用size class

UIStackView 除外，其它都应用autolayout

（align pin （大头钉 有固定的意思）resolve auto layout issues（解决auto layout问题

align上面的一些灰色：针对多个控件的设置

leading edge 左边距（leading头部

Trialling edge 右边距

top edge  上边距

bottom edge 下边距

horizontal centers 水平居中

vertical centers 垂直居中

basinlines 基线，一般表示底部

－——－－－－以上，针对多个控件的对齐方式

horizontal in container

vertically in container

add constraints 增加约束

当显示红线的时候：

表示缺少关键约束

或是约束冲突

————————以上针对align

添加宽高：pin中设置

也有四根线：constraints

表示该控件和其他控件的距离

width：表示本身的宽高

height

灰色：equal widths／equal heights ：设置多个控件等宽等高的情况下

——－－－－－————以上真对pin

当显示黄线的时候：

表示约束和实际的位置不相符合

resolve auto layout issues（解决autoolayout问题

selected views

update frame

update constraints

all views in view controller

更新约束只是让它去适应现在的约束

四、autolayout设置边界

使用autolayout的时候，稍不注意容易被添加一些值或者减少一些值 constant会产生偏移

（使用第三方库解决自动布局问题可以推荐）

使用了sutolayout 就不要再使用frame ：没有frame的概念

autolayout 要确定宽高和x、y你只需设置约束就好，不需要去计算

五、使用autolayout设置边界

pin中：constant to margins 的勾选是什么？

xcode自动帮你添加的间距

在自己设置的时候，把勾选去掉

当设置上下左右设置间距的时候有问题：是上边距是针对 状态条下方进行设置的距离

解决：点击下选箭头的按钮：出现：top layout guide ／view（current distance）

同样点击：bottom layout guide／view（current distance

有什么差别呢：

top layout guide 和bottom layout guide

是针对导航控制器和tabbar 设置的

六、auto layout 设置兄弟view之间的约束

clean constant 可以将约束清空

高度相等，顶部和底部对其

七、autolayout的上下约束设置

核心公式：

被约束view 的width ＝ 参照view 的width ＊ 系数 ＋ 常量

八、autolayout的小技巧

设置图片并添加约束

1、

先添加图片再进行居中显示，红线消失，而不需要设置宽高

一开始居中但没有图片的时候，会出现红线

原因：设置完图片之后，会默认使用图片的宽高

2、拖放小控件的时候，添加上下距离的约束，没设置宽高也不会出现红线：原因是有些控件是有默认宽高的像（switch、button、textfield，虽然有默认宽高，但会出现与实际不符的黄线，因为你需要修改它的宽度，否则默认宽度较短

3、

九、小应用

图片无压缩怎么设置（边界不能设置）

那么就设置中心点（只需设置图片的xy）宽高根据图片而定

1X

2X

使用1x而把图片放在2X图片会放大两倍

把多出来的截掉

垂直或水平居中，再用当前的位置进行计算，也就是说都是相对于中心点的变动

中心点是个相对的位置

上面屏幕的高度是不一样的，所以才以中心点为参照（即便中心点在变，始终是一个相对的位置

十、autolayout代码实现

添加约束的规则：

1）对于两个同层级view之间的约束关系，添加到它们的父view上

2）对于两个不同层级的view之间的约束关系，添加到离它们最近的共同父view上

3）对于有层次关系的两个view之间的约束关系，添加到层次较高的view上

高度为什么可以添加到自己身上：因为没有做任何参照

和其他的view有关系的一般要添加到父view上

代码实现

一定要把view 的autoresizing属性给禁用掉（因为是互斥关系

review.translatesAutoresizingMaskIntoConstraints=NO;

否则添加的约束都是没有作用的

1\添加顶部的约束(核心公式

NSLayoutConstraint *blueTop =[NSLayoutCOnstraint  constraintWithItem://被约束的view

attribute: NSLayoutAttributeLeft 被约束的属性

relatedBy :NSLayoutRelationGreaterThanOrEqual

toItem:参照的view

attribute:参照view的属性

multiplier：乘

constant：20加

2\设置完约束之后，添加到谁身上

//如果有子view和父view 的关系的话，就添加到父view上

self.view addConstraint:/addConstraints［后面会用到]

3\添加blueview的高度约束

NSLayoutConstraint *height =[NSLAyoutCOnstraint constraintWithItem attribute: toItem:nil attribute:NSLayoutAttributeNotAnAttribute

需要注意设置高度的时候，没有参照view就传nil 属性传NSLayoutNotAnAttribute

注意，右侧传入的constant 要负数

添加到哪？

如果添加到父view上也可以，添加到自己身上也可以 因为没有任何参照

十一、添加红色view

输入法：通用：中文时使用英文标示

注意：

1、千万不要忘记关闭translatesAutoresizingMaskIntoContraints属性

2、一定要保证相关控件都已经在各自的父控件上

3、不要给view设置frame

review的约束，是参照blueview

十二、VFL语言的使用

（可视化格式语言）

语法解释：

@“H：｜－20-［review］－20-｜”

H：表示水平方向

V：表示垂直方向

｜－ 边界 左／右（和左侧边界有距离，距离为20）

［review］

@“V：｜－20-［review（50）］－20－［purpleview（＝＝redView）”

V：表示垂直方向

｜－20-［review（50）］：review 距离顶部的高度是20间距，自身的高度为50

purpleVIew 的高度和review 相等，purpleView距离review 有20的间距

在设置宽度的时候

addConstraints：因为设置约束的时候不止设置一个view

水平方向上红色view和紫色view相等

@“H：［purple view（＝＝redView）］”

＝＝redView＊0.5为什么解析不了？

因为：VFL语言不支持乘法除法

所以如果要实现宽度一半的情况只能原先的设置方式

constraintsWithVisualFormat:放置VFL语言

水平方向上要不对top要不对bottom不能左右

垂直方向上只能左右不能上下

metrics：字典@{@“delte”:@20}

view:@{@“redView”:redView}]对应出现的对象