IOS Auto Layout代码实现自动布局--VFL(Visual format language)

Auto Layout是在WWDC2012上被引入到iOS中的，从iOS6.0以后就开始支持，但是大多数的开发者还是习惯使用传统的UI布局方式，虽然有一大部分开发者早已使用了Auto Layout，这其中大多数的开发者是在拖拽IB文件或者是使用StoryBoard时才会选择用Auto Layout的布局方式。

Auto Layout是一种基于约束的、描述性的布局系统。也就是使用约束条件来描述布局，View的Frame会根据这些描述来进行计算。

在iOS6.0以后加入了一个新类：NSLayoutConstraint。我们可以使用可视化格式化语言Visual Format Language(稍后的文章中会介绍)的方式创建约束(还有一种创建的方式，后面的文章会介绍)。如下这个方法：

 
   [cpp]  
   view plain 
   copy 
    
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

我们可以用这个方法实现如下效果的布局：

IOS Auto Layout代码实现自动布局--VFL(Visual format language)

实现的代码如下，注释是凭自己的理解写的，有什么不妥之处请评论指出。

 
   [cpp]  
   view plain 
   copy 
    
  
if(floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1)  
    {  
        self.edgesForExtendedLayout = UIRectEdgeNone;  
    }  
      
    //自动布局  
    //正常的创建按钮，但不用设置按钮的Frame属性  
    UIButton * leftButton = [UIButton buttonWithType:UIButtonTypeSystem];  
    leftButton.layer.borderWidth = 2.0;  
    leftButton.layer.borderColor = [UIColor blackColor].CGColor;  
    [leftButton setTitle:@"左" forState:UIControlStateNormal];  
    [self.view addSubview:leftButton];  
      
    UIButton * rightButton = [UIButton buttonWithType:UIButtonTypeSystem];  
    rightButton.layer.borderWidth = 2.0;  
    rightButton.layer.borderColor = [UIColor blackColor].CGColor;  
    [rightButton setTitle:@"右" forState:UIControlStateNormal];  
    [self.view addSubview:rightButton];  
      
    //将自适应向布局约束的转化关掉(根据情况有时需要有时不需要)  
    [leftButton setTranslatesAutoresizingMaskIntoConstraints:NO];  
    [rightButton setTranslatesAutoresizingMaskIntoConstraints:NO];  
      
    //创建一个存放约束的数组  
    NSMutableArray * tempConstraints = [NSMutableArray array];  
      
    /* 
     创建水平方向的约束:在水平方向,leftButton距离父视图左侧的距离为80，leftButton宽度为60,rightButton和leftButton之间的距离为30，rightButton宽60 
     */  
    [tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-80-[leftButton(==60)]-30-[rightButton(==60)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton,rightButton)]];  
      
    /* 
     创建竖直方向的约束:在竖直方向上,leftButton距离父视图顶部30，leftButton高度30 
     */  
    [tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[leftButton(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton)]];  
    /* 
     竖直方向的约束:在竖直方向上，rightButton距离其父视图顶部30，高度与leftButton的高度相同 
     */  
    [tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[rightButton(==leftButton)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(rightButton,leftButton)]];  
      
    //给视图添加约束  
    [self.view addConstraints:tempConstraints];  

这里需要注意的问题是，当我们将一个创建好的约束添加到View上时，添加的目标View要遵循以下的规则:

对于两个同层级View之间的约束关系，添加到他们的父View上。
对于两个不同层级View之间的约束关系，添加到他们最近的共同的父View上
对于有层次关系的两个View之间的约束关系，添加到层次较高的父View上

这篇文章就介绍到这里，后面的文章会继续介绍菜鸟学习iOS—AutoLayout。

欢迎各位的指正和评论，转载请注明转自董宝君的iOS专栏

在上一篇文章iOS学习笔记02——以编码的方式实现Auto Layout自动布局（一）中我们简单的介绍了使用Visual Format Language创建布局约束来实现自动布局，这种方法创建的布局约束能够满足大部分的布局的需求。但是想要实现类似于这样的约束：button.width = 2 * button.height就不能满足要求了，这一篇我们我们简单介绍一下如何创建这样的布局约束。

Apple就是非常贴心，它为我们提供了另外一个方法创建类似于view1.attr1 = view2.attr2 * multiplier + constant这样的约束，方法如下：

 
    [cpp]  
    view plain 
    copy 
     
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

下面我们用这种方法创建一个布局约束，实现一个按钮button的布局，button距离父视图的左侧60点，距离顶部30点，其中宽度W = 2 * H + 10。效果图如下

不多说，上代码

 
    [cpp]  
    view plain 
    copy 
     
   
- (void)viewDidLoad  
{  
    [super viewDidLoad];  
    // Do any additional setup after loading the view.  
    self.edgesForExtendedLayout = UIRectEdgeNone;  
      
    UIButton * button = [UIButton buttonWithType:UIButtonTypeSystem];  
    button.layer.borderColor = [UIColor blackColor].CGColor;  
    button.layer.borderWidth = 2.0;  
    [button setTitle:@"W=2*H" forState:UIControlStateNormal];  
    [self.view addSubview:button];  
      
    [button setTranslatesAutoresizingMaskIntoConstraints:NO];  
      
    NSMutableArray * tempConstraints = [NSMutableArray array];  
      
    [tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-60-[button]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];  
    [tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[button(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];  
      
    [self.view addConstraints:tempConstraints];  
      
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:button attribute:NSLayoutAttributeHeight multiplier:2.0 constant:10.0]];  
}  