IOS布局笔记二（ Visual Format Language 定义水平和垂直约束）

上一篇文章：IOS布局笔记一（代码实现自动布局）

定义限制条件来改变一个 UI 组件在其父视图的水平和垂直方向布局的方法。

可以使用方程式里 H:方向符号代表水平方向的边距,使用 V:方向符号代表垂直方向的边 距。

转载请注明，本文转自： http://1.wildcat.sinaapp.com/?p=60

1.改变按钮在屏幕上的边距

 

使用 visual Format Language 在水平方向的限制条件使用的三个例子

要编写的例子的约束条件如下:

·邮件区域离视图的顶部具有一个标准的垂直方向距离。

·确认邮件的区域在垂直方向山距邮件区域有一个标准的距离。

·注册按钮距确认邮件区域的垂直方向上具有一个标准的距离。

·所有的组件在水平方向上在其父视图中都是居中的。

·邮件和确认邮件区域在水平方向上距父视图两边都有一个标准的距离。

·按钮的宽度被修改成 128 像素。

 

//
//  VisualFormatLang.h
//  AutoLayoutDemo
//
//  Created by wildcat on 14-4-21.
//  Copyright (c) 2014年 com.wildcat. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface VisualFormatLang : UIViewController

@end

//
//  VisualFormatLang.m
//  AutoLayoutDemo
//
//  Created by wildcat on 14-4-21.
//  Copyright (c) 2014年 com.wildcat. All rights reserved.
//

#import "VisualFormatLang.h"

@interface VisualFormatLang ()
//添加私有属性
@property (nonatomic, strong) UITextField *textFieldEmail;
@property (nonatomic, strong) UITextField *textFieldConfirmEmail;
@property (nonatomic, strong) UIButton *registerButton;
@end

@implementation VisualFormatLang
//声明全局静态变量
NSString *const kEmailTextFieldHorizontal=@"H:|-[_textFieldEmail]-|";
NSString *const kEmailTextFieldVertical=@"V:|-[_textFieldEmail]";

NSString *const kConfirmEmailHorizontal=@"H:|-[_textFieldConfirmEmail]-|";
NSString *const kConfirmEmailVertical=@"V:[_textFieldEmail]-[_textFieldConfirmEmail]";
NSString *const kRegisterVertical=@"V:[_textFieldConfirmEmail]-[_registerButton]";

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    //构造控件
    self.textFieldEmail =[self textFieldWithPlaceholder:@"Email"];
    self.textFieldConfirmEmail =[self textFieldWithPlaceholder:@"Confirm Email"];
    self.registerButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.registerButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.registerButton setTitle:@"Register" forState:UIControlStateNormal];
     //添加控件到视图中
    [self.view addSubview:self.textFieldEmail];
    [self.view addSubview:self.textFieldConfirmEmail];
    [self.view addSubview:self.registerButton];
    [self.view addConstraints:[self constraints]];  //为父视图添加约束

}
//任意方向旋转
- (NSUInteger) supportedInterfaceOrientations{
    return UIInterfaceOrientationMaskAll;
}
#pragma mark - 构造UI 组件
//创建了文本框,它包含一个指定的占位符文本,
- (UITextField *) textFieldWithPlaceholder:(NSString *)paramPlaceholder{
    UITextField *result = [[UITextField alloc] init];
    result.translatesAutoresizingMaskIntoConstraints = NO;  //禁止使用autoLayout
    result.borderStyle = UITextBorderStyleRoundedRect;
    result.placeholder = paramPlaceholder;
    return result;
}

#pragma mark - 添加约束
- (NSArray *) emailTextFieldConstraints{
    NSMutableArray *result = [[NSMutableArray alloc] init];
    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_textFieldEmail);
    [result addObjectsFromArray:
     [NSLayoutConstraint
      constraintsWithVisualFormat:kEmailTextFieldHorizontal
                          options:0
                          metrics:nil
                            views:viewsDictionary]];
    [result addObjectsFromArray:
     [NSLayoutConstraint
      constraintsWithVisualFormat:kEmailTextFieldVertical
                          options:0
                          metrics:nil
                            views:viewsDictionary]];
    return [NSArray arrayWithArray:result];
}
- (NSArray *) confirmEmailTextFieldConstraints{
    NSMutableArray *result = [[NSMutableArray alloc] init];
    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_textFieldConfirmEmail, _textFieldEmail);
    [result addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat:kConfirmEmailHorizontal
                                             options:0
                                             metrics:nil
                                               views:viewsDictionary]];
    [result addObjectsFromArray:[NSLayoutConstraint
                                 constraintsWithVisualFormat:kConfirmEmailVertical
                                 options:0
                                 metrics:nil
                                 views:viewsDictionary]];
    return [NSArray arrayWithArray:result];
}

- (NSArray *) registerButtonConstraints{
    NSMutableArray *result = [[NSMutableArray alloc] init];
    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_registerButton, _textFieldConfirmEmail);
    [result addObject:[NSLayoutConstraint constraintWithItem:self.registerButton
                                                       attribute:NSLayoutAttributeCenterX
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:self.view
                                                       attribute:NSLayoutAttributeCenterX
                                                      multiplier:1.0f
                                                        constant:0.0f]];
    [result addObjectsFromArray:[NSLayoutConstraint
             constraintsWithVisualFormat:kRegisterVertical
                                 options:0
                                 metrics:nil
                                   views:viewsDictionary]];
    return [NSArray arrayWithArray:result];
}
//构造并收集所有的限制 条件到一个数组里
- (NSArray *) constraints{
    NSMutableArray *result = [[NSMutableArray alloc] init];
    [result addObjectsFromArray:[self emailTextFieldConstraints]];
    [result addObjectsFromArray:[self confirmEmailTextFieldConstraints]];
    [result addObjectsFromArray:[self registerButtonConstraints]];
    return [NSArray arrayWithArray:result];
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

@end

接下来学什么，请看：IOS布局笔记三（使用不同父类的 view 进行约束）

未完，待续。。。