iOS,自动布局autoresizing和auto layout,VFL语言

1.使用autoresizing

2.使用autolayout

3.VFL语言(Visual Format Language:可视化格式语言)

使用autoresizing

点击xib文件，去掉使用autolayout（autolayout和只能使用一个）

  

如图中所示

1.代表视图距离父容器顶部距离固定

2.代表视图距离父容器左边距离固定

3.代表视图距离父容器底部距离固定

4.代表视图距离父容器右边距离固定

5.中间水平线表示视图随着父容器变宽而变宽(按比例)

6.中间垂直线表示视图随着父容器变高而变高(按比例)

autoresizing的局限性就是只能表现父视图与子视图的关系，而无法表达兄弟视图之间的关系。在处理复杂布局上比较无力

使用autolayout

 autolayout的2个核心概念： 参照、约束

注意：

如果使用autolayout来约束控件，那frame就失效了，官方也不建议我们再设置frame了  。

如果利用autolayout约束一个控件，和我们以前使用frame约束控件一样，必须设置宽度/高度/X/Y,如果缺少一个约束就会报错，报错有可能会引发一些未知的bug。

如果有红色错误：代表缺少约束，或者约束有冲突（约束可以重复添加 ）

如果有黄色警告：代表当前的位置大小和约束的位置大小不一样

在使用autolayout时，最好给每个控件起一个名称，方便阅读

在使用autolayout让某个控件相对于另一个控件约束，一定要在另一个控件周围

iOS8，默认情况下，左右两边会留出一段距离

xib编辑页面autolayout相关约束选项

设置好约束后在各个尺寸，横竖屏下查看效果

下面设置红色视图宽度为蓝色的一半。

先约束红色和蓝色等宽，然后选中约束，改变下图所写值（Multiplier乘数），然后红色就为蓝色宽的一半；

（注：在水平居中、垂直居中等约束方式上也可以进行类似的约束操作）

Priority优先级一般不用改(优先级最大为1000，优先级越高的约束越先被满足)

同理宽度也可以采取相同方法

代码实现Autolayout（太麻烦，开发中不介意这样用）

代码实现autolayout的注意点

*要先禁止autoresizing功能，设置view的下面属性为NO;

view.translatesAutoresizingMaskIntoConstraints=NO;

*添加约束之前，一定要保证相关控件都已经在各自的父控件上。（先add控件，再添加约束）

*不用再给view设置frame

代码实现autolayout的步奏

*利用NSLayoutConstraint类创建具体的约束对象。

*添加约束对象到相应的view上

-(void)addCOnstraint:(NSLayoutConstraint *)constraint;

-(void)addConstraints:(NSArray *)constraints;

在添加目标view约束时会遵循以下规则。(通过代码添加约束时参照该规则)

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

2)对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上(父view不同，继续找父view的父view...)

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

示例：

- (void)viewDidLoad {

[super viewDidLoad];

//添加2个控件到父控件上

//添加蓝色view

UIView *blueView=[[UIView alloc] init];

blueView.backgroundColor=[UIColor blueColor];

//禁用autoresizing

blueView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:blueView];

//添加红色view

UIView *redView=[[UIView alloc] init];

redView.backgroundColor=[UIColor redColor];

//禁用autoresizing

redView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:redView];

//添加约束

//添加蓝色View距离父控件左边的距离固定为20  x

/*

item == first item  需要设置约束的控件

attribute == 需要设置的约束

relatedBy == relation 等于

toItem == second item 被参照的控件

attribute == 需要设置的约束

multiplier == multiplier 乘以

constant == constant 加上

*/

//蓝色view的左边等于父控件的左边乘以1加20

NSLayoutConstraint *leftCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeLeft multiplier:1.0f constant:20];

[self.view addConstraint:leftCos];

//添加蓝色View距离父控件右边的距离固定为20  宽度

NSLayoutConstraint *rightCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeRight multiplier:1.0f constant:-20];

[self.view addConstraint:rightCos];

//添加蓝色View距离父控件顶部边的距离固定为20 y

NSLayoutConstraint *topCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeTop multiplier:1.0f constant:20];

[self.view addConstraint:topCos];

//添加蓝色View的高度50                   高度

NSLayoutConstraint *heightCos=[NSLayoutConstraintconstraintWithItem:blueView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:nilattribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:50];

[blueView addConstraint:heightCos];

//设置红色约束

//红色高度和蓝色一样  height

NSLayoutConstraint *redHeightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeightmultiplier:1.0f constant:0];

[self.view addConstraint:redHeightCos];

//红色的右边和蓝色右边对齐  x

NSLayoutConstraint *redRightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRightmultiplier:1.0f constant:0];

[self.view addConstraint:redRightCos];

//红色的顶部和蓝色底部距离固定20   y

NSLayoutConstraint *redTopCos=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:20];

[self.view addConstraint:redTopCos];

//红色宽度等于蓝色宽度一半

NSLayoutConstraint *redWidthCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidthmultiplier:0.5f constant:0];

[self.view addConstraint:redWidthCos];

}

VFL语言(Visual Format Language:可视化格式语言)

VFL语言是苹果公司为了简化Autolayout的编码而推出的抽象语言

VFL示例

  • H:[cancelButton(72)]-12-[acceptButton(50)]
  • canelButton宽72，acceptButton宽50，它们之间水平间距12
  • H:[wideView(>[email protected])]
  • wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
  • V:[redBox]-[yellowBox(==redBox)]
  • 竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox
  • H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
  • 水平方向上，Find距离父view左边缘默认间隔宽度10，之后是FindNext距离Find间隔默认宽度0；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

和上面代码实现Autolayout完成同样的demo效果

- (void)viewDidLoad {

[super viewDidLoad];

//添加2个控件到父控件上

//添加蓝色view

UIView *blueView=[[UIView alloc] init];

blueView.backgroundColor=[UIColor blueColor];

//禁用autoresizing

blueView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:blueView];

//添加红色view

UIView *redView=[[UIView alloc] init];

redView.backgroundColor=[UIColor redColor];

//禁用autoresizing

redView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:redView];

//添加约束

/*

VisualFormat:VFL语句

options:对齐方式

metrics:VFL语句中用到的变量值

views:VFL语句中用到的控件

*/

//blueView水平方向距离两边各20距离,设置了x值和宽度

NSArray *blueViewHorizontal=[NSLayoutConstraintconstraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nilviews:@{@"blueView":blueView}];

[self.view addConstraints:blueViewHorizontal];

//blueView垂直方向距离顶部20距离，高度50 ，blueView底部距离redView为20距离  redView高度==blueView；并且设置红色和蓝色右边对齐

NSArray *blueViewVertical=[NSLayoutConstraintconstraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]"options:NSLayoutFormatAlignAllRight metrics:nilviews:@{@"blueView":blueView,@"redView":redView}];

[self.view addConstraints:blueViewVertical];

//注意：在VFL语句中是不支持乘除法，要用autolayout代码实现

//    NSArray *redViewHorizontal=[NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView)]" options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];

//    [self.view addConstraints:redViewHorizontal];

NSLayoutConstraint *redViewW=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

[self.view addConstraint:redViewW];

}

时间： 2024-10-09 13:30:13

iOS,自动布局autoresizing和auto layout,VFL语言的相关文章

iOS Programming Introduction to Auto Layout 自动布局

iOS Programming Introduction to Auto Layout ? 自动布局 A single application that runs natively on both the iPad and the iPhone is called a universal application. 一个原生的能运行在iPad 和iPhone 的应用叫做universal application? Then select the Homepwner target in the pr

手写代码自动实现自动布局，即Auto Layout的使用

手写代码自动实现自动布局,即Auto Layout的使用,有需要的朋友可以参考下. 这里要注意几点: 对子视图的约束,若是基于父视图,要通过父视图去添加约束. 对子视图进行自动布局调整,首先对UIView的一个属性设置,这是因为如果我们用Interface Builder,勾选Ues Autolayout,这时autoresizingMask就会被Auto Layout 取代,在手写代码时,我们就需要手动控制,代码如下 [_shadow setTranslatesAutoresizingMask

iOS 开发实践之 Auto Layout

原:http://xuexuefeng.com/autolayout/?utm_source=tuicool 本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自动布局)在实际项目中的使用. Auto Layout 在 2012 年的 iOS 6 中发布,距今已经 2 年多了,如果从 2011 年在 Mac OS X 上发布的 Auto Layout 开始算起,已经超过 3 年了.如果你的简历上写着 2 年以上工作经验,而竟然不会使用 Auto Layout

iOS 开发实践之Auto Layout(From Vincent Sit)

本文是博主 iOS 开发实践系列中的一篇,主要讲述 iOS 中 Auto Layout(自动布局)在实际项目中的使用. Auto Layout 在 2012 年的 iOS 6 中发布,距今已经 2 年多了,如果从 2011 年在 Mac OS X 上发布的 Auto Layout 开始算起,已经超过 3 年了.如果你的简历上写着 2 年以上工作经验,而竟然不会使用 Auto Layout,真有点不可思议. 本文将会通过若干个 Demo 进行讲解,通过实践来理解 Auto Layout 到底是什么

IOS界面适配二: Auto Layout的使用(上)

上一篇讲了IOS中基础的距离单位,链接为 IOS界面适配一: Pt与Px的关系 ,使用距离单位可以定义我们程序中View的大小,但是,仅仅使用Pt定义大小是远远不够的. 比如,我们想让一个button距离手机左边界为20pt,右边界为20pt,距上为30pt,高度自身为20pt,如果在iphone5中(为320pt*568pt),我们要在代码中这么定义 以下代码写在ViewController中的viewDidLoad方法中: UIButton * button = [[UIButton all

ios8 iOS Auto Layout

引言: Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应. 要完全掌握Auto Layout是一件非常消耗精力的事情,需要大量的实践,并且在根本上面,理解其如何使用,如果要全面的介绍Auto Layout和使用场景估计几篇博文都介绍不完, 本文希望能将使用Auto Layout的重点和技巧以及注意事项,进行一个介绍.成为学习Auto Layout的一个导航文章. 参考资料

iOS之Xcode8 Auto Layout新特性

目录 1.Incrementally Adopting Auto Layout 2.Design and Runtime Constraints 3.NSGridView 4.Layout Feedback Loop Debugging 一.Incrementally Adopting Auto Layout Incrementally Adopting Auto Layout是什么意思呢?在我们IB里面布局我们的View的时候,我们并不需要一次性就添加好所有的constraints.我们可以一

iOS发展 ---- 至iPhone 6自适应布局设计 Auto Layout

Apple从iOS 6增加了Auto Layout后開始就比較委婉的開始鼓舞.建议开发人员使用自适应布局,可是到眼下为止,我感觉大多数开发人员一直在回避这个问题,无论是不是因为历史原因造成的,至少他们在心底还坚守着固定布局的老传统思想. 随着iPhone6.iPhone6 Plus的到来,使用自适应布局更是迫在眉睫的事,固定布局的老传统思想脆弱的不堪一击.如今的iPhone有4种尺寸.假设算上iPad,如今Apple的iOS设备有5种尺寸. 我们在准备使用自适应布局设计应用界面之前.能够把这5种

iOS Auto Layout Demystify

Book Descripter Auto Layout transforms the way you create iOS user interfaces. As flexible as it is powerful, Auto Layout gives you unprecedented control over your iOS user interfaces. But Auto Layout has a reputation for difficulty. In iOS Auto Layo