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}]对应出现的对象

 

转载于:https://www.cnblogs.com/CityPe/p/5380749.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值