autolayout相关

昨天把搁置了很久的autolayout学习了一下，现在记录一下

autolayout是ios6中新加入的功能，通过给出Constraint，即约束条件来确定控件的位置，不需要通过设置frame属性

对3.5和4寸设备，不需要两套xib或进行复杂的判断来定义控件的位置。

先简单举个例子：

比如一个ImageView，拖到storyboard时设置的高度是460，宽度是284，x,y坐标为(36，64),可以看出，这个imageview距离屏幕上下左右的距离依次为

64，44，36，0，这四个数字就代表了这个imageview和其父视图的位置关系。通过加入这四个Constraint，如果将程序运行在3.5存屏幕上，这个imageview的高度就变成了

480-64-44 = 372，由于定义了约束条件，高度就会自动调整。

要使用autolayout，在XIB和Storyboard中，切换到file inspector

勾选Use Auto Layout,不用的话取消就行了，Xcode4.5开始好像就默认打钩了

添加Constraint，先选中一个控件，点击图中红色方框中的按钮，会弹出一个设置小窗口，在这个小窗口里面添加Constraint，可以看到有上下左右4个方向可以设置

点击绿色方框的下拉按钮，可以设置这个Constraint的距离是针对谁而言的，是self.view(即自身的superView)还是左边的CollectionView，选择superview的话意思就是说这个imageView左边跟superview的左边始终保持你设置数值那么多的距离。设置完成后点击add constraint,就添加了一组Constraint。

要修改Constraint的话，有两种方式

一种是选择一个控件，在size inspector面板里面可以看到Constraint，选择一个点击编辑

另外一种是直接选中一个Constraint，在Attributes Inspector里面直接修改

VFL的学习

Visual Format Language，以下简称vfl，视觉格式语言，是与ios6的auto layout一起推出的，通过特定格式的字符串来描述控件之间的约束

先看一个例子:NSString *vflStr = @“|-hPadding-[myButton]-hPadding-|”

vflStr对象就是一个vfl格式的字符串，格式稍后会介绍

下面来看下如何使用vfl

假设现在的VC中，我们先添加3个subview

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic,strong) UILabel *aLabel;
@property (nonatomic,strong) UIImageView *aImageView;
@property (nonatomic,strong) UIView *containerView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    _containerView = [[UIView alloc] init];
    _containerView.translatesAutoresizingMaskIntoConstraints = NO;
    _containerView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:_containerView];
    
    _aLabel = [[UILabel alloc] init];
    _aLabel.translatesAutoresizingMaskIntoConstraints = NO;
    _aLabel.lineBreakMode = NSLineBreakByCharWrapping;
    _aLabel.numberOfLines = 0;
    _aLabel.font = [UIFont systemFontOfSize:14];
    _aLabel.preferredMaxLayoutWidth = 270;
    [_containerView addSubview:_aLabel];
    
    _aImageView = [[UIImageView alloc] init];
    _aImageView.backgroundColor = [UIColor brownColor];
    _aImageView.translatesAutoresizingMaskIntoConstraints = NO;
    
    //add vfl constraints
	// Do any additional setup after loading the view, typically from a nib.
}

translatesAutoresizingMaskIntoConstraints  这个属性的意思是虾米？先看apple的注释

/* by default, the autoresizing mask on a view gives rise to constraints that fully determine the view's position.  Any constraints you set on the view are likely to conflict with autoresizing constraints, so you must turn off this property first. IB will turn it off for you.

 */

约束布局系统中是否把autoresizingmask转换为约束布局,Yes的话可能会引起冲突，要使用autolayout，就需要设置成NO

可以看见，目前对3个subview都没有设置frame，这部分完全由autolayout 来完成

NSDictionary *items = NSDictionaryOfVariableBindings(_containerView,_aLabel,_aImageView);
NSDictionary *metrics = @{@"hPadding":@10,@"vPadding":@10};
NSString *hConsForContainerView = @"|-hPadding-[_containerView]-hPadding-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:hConsForContainerView
                                                                      options:0
                                                                     metrics:metrics
                                                                        views:items]];
NSString *vConsForContainerView = @"V:|-vPadding-[_containerView]-|";
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vConsForContainerView
                                                                     options:0
                                                                     metrics:metrics
                                                                        views:items]];

上面的代码为_containerView添加了约束，现在运行程序，效果应该是这样的

_containerView离superview的上、左、右都有10个像素的距离

下面详细来看。

前两行的词典都是为后面的constraintsWithVisualFormat方法的参数

第一个由宏生成的词典映射了需要autolayout的各个view，可以理解为这个词典提供了在vfl中使用对应view的名字,例如："[_containerView]"，这样vfl才知到是对哪个view添加Constraint。

第二个词典的作用类似，有@"hPadding":@10，这个键值对，@"|-hPadding-[_containerView]-hPadding-|"，vfl才知道这句vfl里面的hPadding是10

第三行就是vfl的本体@"|-hPadding-[_containerView]-hPadding-|"

|：代表superview；

-：连接item与Constraint

[]:里面是UIView

这个字符串描述着这样一个画面：一个_containerView，在它的superview中，左右各相隔10个像素

vfl默认是水平的Constraint，如果是描述垂直方向，需要先添加一个@"V",就像:NSString *vConsForContainerView = @"V:|-vPadding-[_containerView]-|";

to be continued...