IOS AutoLayout 代码约束—VFL
IOS 提供了两种添加约束的方法
第一种：
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
第二种：
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
第一种方法返回的是一个约束对象，也就是一条约束。看参数也比较好理解，就是在view1与view2之间设定一条约束，但往往一个控件需要好几条约束来约束，加上如此长的方法，所以导致一个控件就需要大量的代码来实现约束。
第二种方法返回的是array，包含的是一组约束，所以一般一个控件，调用两次第二种方法就能实现约束。所以这种方法更加的简洁，但是这种方法用到的是一种描述性语言，有点不好理解，下面就来简单介绍下第二种方法的用法。
先对这些参数进行说明：
（NSDictionary*）views：表示这组约束所涉及到的相关子view，比如一个界面上有 A、B两个控件，这组约束涉及到了这两个控件，那么就以字典类型将A、B控件设为参数views，可以用
NSDictionaryOfVariableBindings(A, B) 等效于 [NSDictionary dictionaryWithObjectsAndKeys:A @“A”, B, @“B'', nil];
（NSDictionary*）metrics：对于一些特定的宽、高，我们可以直接存放在字典中，这样在描述性语言中就可以直接用键来描述宽高。如：
NSDictionary *metrics = @{@"buttonWidth":@200.0};
(NSLayoutFormatOptions) opts:见枚举类型，解释部分，常用的就这些
NSLayoutFormatAlignAllLeft//控件之间左对齐NSLayoutFormatAlignAllRight//控件之间右对齐NSLayoutFormatAlignAllTop//...上对齐NSLayoutFormatAlignAllBottom//...下对齐NSLayoutFormatAlignAllLeading // 使所有视图根据当前区域文字开始的边缘对齐（英语：左边，希伯来语：右边）NSLayoutFormatAlignAllTrailing // 使所有视图根据当前区域文字结束的边缘对齐（英语：右边，希伯来语：左边）。NSLayoutFormatAlignAllCenterX // 使所有视图通过设置中心点的 X 值彼此相等来对齐。
(NSString*)format 这就是核心VFL语句了,举例说明
|-[view]-|//view与superview的左右边界为标准间距|-[view]//view与superview的左边界为标准间距，右边不处理|[view]//view与superview的左边界对齐，右边不处理|-20.0-[view]-30.0f-|//view与superview的左边边界间距分别为20，和30[view(100.0)]//view宽度为100|-[button1(button2)]-[button2]-| //button1与button2等宽，之间为标准间距.....V:|-20.0-[view(30.0)] //view距顶部边界20，自身高度为30.0
下面简单的讲个例子吧，要实现的效果如下图
labelOne 宽高都不限制，与顶部高度30、与bgview左边界30、与右边imageview间距30
labelTwo与labelOne间距最小为0，且两者左对齐，labelTwo与底部边界也为30
imageview宽高都为150，与button的间距至少30
button与底部间距30，与iamgeview左右对齐
bgView 与superview左右对齐、上对齐
为了实现上述效果，我们只需要先初始化这些控件，但在autolayout中不需要用alloc来初始化，而且要关掉autoresizing constraints
UIView *view = [self new]; view.translatesAutoresizingMaskIntoConstraints = NO;
所有约束如下
// Layout NSDictionary *views = NSDictionaryOfVariableBindings(bgView,labelOne,labelTwo,imageView,button); NSDictionary *metrics = @{@"imageEdge":@150.0,@"padding":@30.0};//设置一些常量 //设置bgView与superview左右对齐 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[bgView]|" options:0 metrics:metrics views:views]]; // 设置bgView与superview 上边界对齐 [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[bgView]" options:0 metrics:metrics views:views]]; // labelOne与imageview 的水平约束 [bgView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-padding-[labelOne]-padding-[imageView(imageEdge)]-padding-|" options:0 metrics:metrics views:views]]; // labelOne与labelTwo的竖直约束 [bgView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-padding-[labelOne]->=0-[labelTwo]-padding-|" options:NSLayoutFormatAlignAllLeft metrics:metrics views:views]]; //imageView与button的数直约束 [bgView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-padding-[imageView(imageEdge)]->=padding-[button]-padding-|" options:NSLayoutFormatAlignAllLeft|NSLayoutFormatAlignAllRight metrics:metrics views:views]];
通过这些约束就能实现上述效果。
====================================================
转载标签：
autolayoutios开发xcodeui |
分类： Xcode/iOS/MacOS |
AutoLayout是什么？
使用一句Apple的官方定义的话AutoLayout是一种基于约束的，描述性的布局系统。 Auto Layout Is a Constraint-Based, Descriptive Layout System.
- 基于约束 － 和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等
- 描述性 － 约束的定义和各个view的关系使用接近自然语言或者可视化语言（稍后会提到）的方法来进行描述
- 布局系统 － 即字面意思，用来负责界面的各个元素的位置。
使用约束条件来描述布局，view的frame会依据这些约束来进行计算 Describe the layout with constraints, and frames are calculated automatically.
AutoLayout和Autoresizing Mask的区别
Autoresizing Mask是我们的老朋友了…如果你以前一直是代码写UI的话，你肯定写过UIViewAutoresizingFlexibleWidth之类的枚举；如果你以前用IB比较多的话，一定注意到过每个view的size inspector中都有一个红色线条的Autoresizing的指示器和相应的动画缩放的示意图，这就是Autoresizing Mask。在iOS6之前，关于屏幕旋转的适配和iPhone，iPad屏幕的自动适配，基本都是由Autoresizing Mask来完成的。但是随着大家对iOS app的要求越来越高，以及已经以及今后可能出现的多种屏幕和分辨率的设备来说，Autoresizing Mask显得有些落伍和迟钝了。AutoLayout可以完成所有原来Autoresizing Mask能完成的工作，同时还能够胜任一些原来无法完成的任务，其中包括：- AutoLayout可以指定任意两个view的相对位置，而不需要像Autoresizing Mask那样需要两个view在直系的view hierarchy中。
- AutoLayout不必须指定相等关系的约束，它可以指定非相等约束（大于或者小于等）；而Autoresizing Mask所能做的布局只能是相等条件的。
- AutoLayout可以指定约束的优先级，计算frame时将优先按照满足优先级高的条件进行计算。
Autoresizing Mask是AutoLayout的子集，任何可以用Autoresizing Mask完成的工作都可以用AutoLayout完成。AutoLayout还具备一些Autoresizing Mask不具备的优良特性，以帮助我们更方便地构建界面。
AutoLayout基本使用方法
Interface Builder
手动使用API添加约束
创建
iOS6中新加入了一个类：NSLayoutConstraint，一个形如这样的约束- item1.attribute = multiplier ? item2.attribute + constant
1 |
[NSLayoutConstraint constraintWithItem:button |
2 |
attribute:NSLayoutAttributeBottom |
3 |
relatedBy:NSLayoutRelationEqua |
4 |
toItem:superview |
5 |
attribute:NSLayoutAttributeBottom |
6 |
multiplier:1.0 |
7 |
constant:-padding] |
添加
在创建约束之后，需要将其添加到作用的view上。UIView（当然NSView也一样）加入了一个新的实例方法：- -(void)addConstraint:(NSLayoutConstraint *)constraint;
- 对于两个同层级view之间的约束关系，添加到他们的父view上
- 对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上
- 对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
刷新
可以通过-setNeedsUpdateConstraints和-layoutIfNeeded两个方法来刷新约束的改变，使UIView重新布局。这和CoreGraphic的-setNeedsDisplay一套东西是一样的～Visual Format Language 可视格式语言
UIKit团队这次相当有爱，估计他们自己也觉得新加约束的API名字太长了，因此他们发明了一种新的方式来描述约束条件，十分有趣。这种语言是对视觉描述的一种抽象，大概过程看起来是这样的： accept按钮在cancel按钮右侧默认间距处最后使用VFL（Visual Format Language）描述变成这样：
1 |
[NSLayoutConstraint constraintsWithVisualFormat:@\"[cancelButton]-[acceptButton]" |
2 |
options:0 |
3 |
metrics:nil |
4 |
views:viewsDictionary]; |
1 |
UIButton *cancelButton = ... |
2 |
UIButton *acceptButton = ... |
3 |
viewsDictionary = NSDictionaryOfVariableBindings(cancelButton,acceptButton); |
{ acceptButton = ""; cancelButton = ""; }
- [cancelButton(72)]-12-[acceptButton(50)]
- 取消按钮宽72point，accept按钮宽50point，它们之间间距12point
- [wideView(>=60@700)]
- wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
- V:[redBox][yellowBox(==redBox)]
- 竖直布局，先是一个redBox，其下方紧接一个宽度等于redBox宽度的yellowBox
- H:|-[Find]-[FindNext]-[FindField(>=20)]-|
- 水平布局，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线'|‘ 表示superview的边缘）
容易出现的错误
因为涉及约束问题，因此约束模型下的所有可能出现的问题这里都会出现，具体来说包括两种：- Ambiguous Layout 布局不能确定
- Unsatisfiable Constraints 无法满足约束
- po [[UIWindow keyWindow] _autolayoutTrace]
- [view constraintsAffectingLayoutForOrientation/Axis: NSLayoutConstraintOrientationHorizontal/Vertical]
- [view hasAmbiguousLayout]
- [view exerciseAmbiguityInLayout]
布局动画
动画是UI体验的重要部分，更改布局以后的动画也非常关键。说到动画，Core Animation又立功了..自从CA出现以后，所有的动画效果都非常cheap，在auto layout中情况也和collection view里一样，很简单（可以参考WWDC 2012 Session笔记——219 Advanced Collection Views and Building Custom Layouts），只需要把layoutIfNeeded放到animation block中即可～1 |
[UIView animateWithDuration:0.5 animations:^{ |
2 |
[view layoutIfNeeded]; |
3 |
}]; |
部分代码
纯净代码UI正常布局后，添加autolayout就可以了，调整相当方便//-----autoLayout
[_btn_1 setTranslatesAutoresizingMaskIntoConstraints:NO];
[_btn_2 setTranslatesAutoresizingMaskIntoConstraints:NO];
[_btn_3 setTranslatesAutoresizingMaskIntoConstraints:NO];
[_btn_4 setTranslatesAutoresizingMaskIntoConstraints:NO];
CGSize winSize = [[iHappySDKSingle shareSingle] getScreenSize];
CGFloat tpo = _btn_1.frame.origin.y;
CGFloat hpod = _btn_1.frame.origin.x;
CGFloat btnH = _btn_1.frame.size.height;
CGFloat vpod = winSize.width*0.15-btnH;
NSNumber* tp = [NSNumber numberWithFloat:tpo];
NSNumber* hd = [NSNumber numberWithFloat:hpod];
NSNumber* vd = [NSNumber numberWithFloat:vpod];
NSNumber* bh = [NSNumber numberWithFloat:btnH];
NSNumber* btm = [NSNumber numberWithFloat:vpod*2];
NSDictionary *dict1 = NSDictionaryOfVariableBindings(_btn_1,_btn_2,_btn_3,_btn_4);
NSDictionary *metrics =@{@"hPadding":hd,@"vPadding":vd,@"top":tp,@"btm":btm,@"btnHeight":bh};
NSString *vfl1 = @"|-hPadding-[_btn_1]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1
options:0
metrics:metrics
views:dict1]];
NSString *vfl2 = @"|-hPadding-[_btn_2]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl2
options:0
metrics:metrics
views:dict1]];
NSString *vfl3 = @"|-hPadding-[_btn_3]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl3
options:0
metrics:metrics
views:dict1]];
NSString *vfl4 = @"|-hPadding-[_btn_4]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl4
options:0
metrics:metrics
views:dict1]];
NSString *vfl5 = @"V:|-(<=top)-[_btn_1(btnHeight)]-vPadding-[_btn_2(btnHeight)]-vPadding-[_btn_3(btnHeight)]-vPadding-[_btn_4(btnHeight)]-(>=btm)-|";
if (_btn_1.hidden) {
vfl5 = @"V:|-(<=top)-[_btn_2(btnHeight)]-vPadding-[_btn_3(btnHeight)]-vPadding-[_btn_4(btnHeight)]-(>=btm)-|";
}
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl5
options:0
metrics:metrics
views:dict1]];
- (void)setAutoLayoutForKuang:(UIView*)imgv
{
UIView * view = self;
[imgv setTranslatesAutoresizingMaskIntoConstraints:NO];
NSDictionary *dict1 = NSDictionaryOfVariableBindings(imgv);
NSDictionary *metrics = @{@"width":[NSNumbernumberWithFloat:imgv.frame.size.width],
@"height":[NSNumber numberWithFloat:imgv.frame.size.height],
@"top":[NSNumber numberWithFloat:imgv.frame.origin.y]
};
NSString *vfl1 = @"[imgv(width)]";
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl1
options:0
metrics:metrics
views:dict1]];
NSString *vfl2 = @"V:[imgv(height)]";
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl2
options:0
metrics:metrics
views:dict1]];
[view addConstraint:[NSLayoutConstraint constraintWithItem:imgvattribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:viewattribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
[view addConstraint:[NSLayoutConstraint constraintWithItem:imgvattribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:viewattribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
//animation
[UIView animateWithDuration:0.25 animations:^{
[imgv layoutIfNeeded];
}];
}
在WWDC2012里苹果推出了，Auto Layout的概念。我们可以通过Auto Layout来适应屏幕的改变。
比如我们要做一个如下的界面。
如果按照以前的frame的方式的话，大概代码如下
- 01 UIView *myview = [[UIView alloc] init];
- 02 myview.backgroundColor = [UIColor greenColor];
- 03 UIView *redView = [[UIView alloc] init];
- 04 redView.backgroundColor = [UIColor redColor];
- 05 UIView *blueView = [[UIView alloc] init];
- 06 blueView.backgroundColor = [UIColor blueColor];
- 07 [myview addSubview:redView];
- 08 [myview addSubview:blueView];
- 09 redView.frame = CGRectMake(50, 80, 100, 30);
- 10 blueView.frame = CGRectMake(180, 80, 100, 30);
- 11 self.view = myview;
通过上面的代码我们就能很简单的实现上面的布局效果了，但是使用auto layout的时候我们需要使用如下代码来实现。
- 01 UIView *myview = [[UIView alloc] init];
- 02
- 03 myview.backgroundColor = [UIColor greenColor];
- 04
- 05 UIView *redView = [[UIView alloc] init];
- 06
- 07 redView.backgroundColor = [UIColor redColor];
- 08
- 09 UIView *blueView = [[UIView alloc] init];
- 10
- 11 blueView.backgroundColor = [UIColor blueColor];
- 12
- 13 [myview addSubview:redView];
- 14
- 15 [myview addSubview:blueView];
- 16
- 17 [myview setTranslatesAutoresizingMaskIntoConstraints:NO];
- 18
- 19 [redView setTranslatesAutoresizingMaskIntoConstraints:NO];
- 20
- 21 [blueView setTranslatesAutoresizingMaskIntoConstraints:NO];
- 22
- 23 NSMutableArray *tmpConstraints = [NSMutableArray array];
- 24
- 25 [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"|-50-[redView(==100)]-30-[blueView(==100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView,blueView)]];
- 26
- 27 [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)]];
- 28
- 29 [tmpConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[blueView(==redView)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView,redView)]];
- 30
- 31 [myview addConstraints:tmpConstraints];
- 32
- 33 self.view = myview;
最后对于向下兼容的时候我们可以通过
- 1 if([myview respondsToSelector:@selector(addConstraints:)]){
- 2
- 3 //支持auto layout
- 4
- 5 }else{
- 6
- 7 //不支持
- 8
- 9 }
随着iphone 5的推出，在开发应用程序的时候我们不得不开始很认真的考虑关于屏幕大小的问题了，在iphone 5之前，我们在开发iphone应用程序的时候我们只需要考虑Retina屏幕就可以了，这个很简单基本是要准备一个xxx@2x.png图片就可以了。应用程序在运行的时候会自动判断屏幕的大小来选择不同的图片来显示。然而iphone 5出来之后发现屏幕变高了。现在屏幕的高度变为568px了。所以不得不从新考虑一下如何才能应对屏幕大小的问题了。