How to vertically stack two UI elements via Autolayout's visual format language

Question

I'm learning AutoLayout's Visual Format Language (VFL) and trying to construct a view that has two elements:

UITextView about 20 points from the top and should fill-up most of the vertical space available on an iPhone
UIButton that needs to sit below the UITextView, without any padding between the two. The button bottom should be 20 points from the bottom of the parent view.

I thought that the following would do the trick.

let verticalBindings = ["textView": self.textView, "button": self.button]

let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
    "V:|-20-[textView][button]-20-|",
    options: NSLayoutFormatOptions.AlignAllLeft,
    metrics:nil,
    views:verticalBindings)

self.view.addConstraints(verticalConstraints)

However, when I run, the UITextView is not visible and something within how I'm choosing to layout the elements is obscuring it. How do you layout the elements such that they're vertically stacked on top of each other?

I'm also not sure how to set the size of the textView such that it should be whatever vertical space available after subtracting from the padding at the top and bottom and the height of the button.

I would prefer to use the VFL to describe this layout.

Zigii Wong Zigii Wong · Accepted Answer · 2014-12-27T07:23:26

Are you forget to set Horizontal constraints? The code above work well.

- (void)viewDidLoad
{
   NSString *const kViewVertical = @"V:|-20-[_textView][_button]-20-|";
   NSString *const kTextViewHorizontal = @"|-[_textView]-|";
   NSString *const kButtonHorizontal = @"|-[_button]-|";

   NSDictionary *dictionary = NSDictionaryOfVariableBindings(_textView, _button);

   NSArray *contraintOne = [NSLayoutConstraint constraintsWithVisualFormat:kViewVertical
                                                               options:NSLayoutFormatAlignAllLeft
                                                               metrics:nil
                                                                 views:dictionary];

   NSArray *constraintTwo = [NSLayoutConstraint constraintsWithVisualFormat:kTextViewHorizontal
                                                               options:NSLayoutFormatAlignAllLeft
                                                               metrics:nil
                                                                 views:dictionary];

   NSArray *constraintThree = [NSLayoutConstraint constraintsWithVisualFormat:kButtonHorizontal
                                                               options:NSLayoutFormatAlignAllLeft
                                                               metrics:nil
                                                                 views:dictionary];
  [self.view addConstraints:constraintOne];
  [self.view addConstraints:constraintTwo];
  [self.view addConstraints:constraintThree];
}

Edit : Don't forget to set

[_button setTranslatesAutoresizingMaskIntoConstraints:NO];
[_textView setTranslatesAutoresizingMaskIntoConstraints:NO];

I am not good at Swift, anyway, hope this help.

How to vertically stack two UI elements via Autolayout's visual format language

1 Answers