首页 > 代码库 > 使用 Visual Format Language 定义水平和垂直约束
使用 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 方法使用前面??到的方法和按钮创建了两个文本框。
- (void)addUIComponentsToView:(UIView *)paramView{ [paramView addSubview:_textFieldEmail]; [paramView addSubview:_textFieldConfirmEmail]; [paramView addSubview:_registerButton];}
这个方法来帮助我们将控件添加到指定View
2)
接下来的的任务就是创建一些方法,这些方法允许我们构造并收集所有的限制 条件到一个数组里。为此,我们有三个方法来返回每个 UI 组件的限制条件到一个数组里。 我们还有一个方法,它将收集从这三个 UI 组件返回的所有限制条件并将它们放进一个大的 数组里。下面是我们如何实现它的:
- (NSArray *)emailTextFieldConstraints{ NSMutableArray *result = [[NSMutableArray alloc]init]; NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_textFieldEmail); [result addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_textFieldEmail]-|" options:0 metrics:nil views:viewsDictionary]]; //NSLayoutConstraint constraintsWithVisualFormat:<#(NSString *)#> options:<#(NSLayoutFormatOptions)#> metrics:<#(NSDictionary *)#> views:<#(NSDictionary *)#> [result addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-50-[_textFieldEmail]" 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:@"H:|-[_textFieldConfirmEmail]-|" options:0 metrics:nil views:viewsDictionary]]; [result addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_textFieldEmail]-[_textFieldConfirmEmail]" options:0 metrics:nil views:viewsDictionary]]; return [NSArray arrayWithArray:result];}- (NSArray *)registerButtonConstraints{ NSMutableArray *result = [[NSMutableArray alloc]init]; NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(_registerButton,_textFieldConfirmEmail); [result addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_textFieldConfirmEmail]-[_registerButton]" options:0 metrics:nil views:viewsDictionary]]; [result addObject:[NSLayoutConstraint constraintWithItem:_registerButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f]]; return [NSArray arrayWithArray:result];}//实际上这是视图控制器的限制条件实例方法,它将收集三个 UI 组件的所有限制条件并 将其返回到一个大的数组里。- (NSArray *)constraints{ NSMutableArray *result = [[NSMutableArray alloc]init]; [result addObjectsFromArray:[self emailTextFieldConstraints]]; [result addObjectsFromArray:[self confirmEmailTextFieldConstraints]]; [result addObjectsFromArray:[self registerButtonConstraints]]; return [NSArray arrayWithArray:result];}
实际上这是视图控制器的限制条件实例方法,它将收集三个 UI 组件的所有限制条件并 将其返回到一个大的数组里。现在到了控制器的主要部分了,就是这个 viewDidLoad 方法:
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self constructUIComponents]; [self addUIComponentsToView:self.view]; [self.view addConstraints:[self constraints]];}- (NSUInteger)supportedInterfaceOrientations{ return UIInterfaceOrientationMaskAll;}
使用 Visual Format Language 定义水平和垂直约束
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。