使用 Visual Format Language 定义水平和垂直约束

1.问题:

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

2.讨论:

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

　　　　 H:|-100-[_button]-100-|

　　　　　H:|-(<=100)-[_button(>=50)]-(<=100)-|

　　　　　H:|-[_button(>=100,<=200)]

　　　　V:[_button]-(>=100)-|

(注意:为了让程序看起来整齐一致并使设计者更容易做出决定,Apple 已经制定了 UI 之间的距离或留空标准。这个标准在 Apple 的 iOS Human Interface Guidelines 中进行了介绍。)

3.例子:

使用约束条件和Visual Format Language实现我们想要的UI

1)构造 UI 组件。所以我会写两个方法来帮助完成构造。记住,我们不需要再去设置这些 UI 组件的框架了。Auto Layout(自动布局)会帮助我们完成:

- (UITextField *)textFieldWithPlaceholder:(NSString *)paramPlaceholder{
    UITextField *result = [[UITextField alloc]init];
    result.translatesAutoresizingMaskIntoConstraints = NO;
    result.borderStyle = UITextBorderStyleRoundedRect;
    result.placeholder = paramPlaceholder;
    
    return  result;
}
- (void)constructUIComponents{
    _textFieldEmail = [self textFieldWithPlaceholder:@"Email"];
    _textFieldConfirmEmail = [self textFieldWithPlaceholder:@"Confirm Email"];
    
    _registerButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    _registerButton.translatesAutoresizingMaskIntoConstraints = NO;
    [_registerButton setTitle:@"Register" forState:UIControlStateNormal];
}

这个 textFieldWithPlaceHodler:方法仅仅创建了文本框,它包含一个指定的占位符文本, constructUIComponents 方法使用前面

使用 Visual Format Language 定义水平和垂直约束

推荐阅读