IOS simple Visual Format layout doesn't work

Question

I'm practicing with visual format layout using Objective-C & XCode 7 but struggling with getting a very simple layout to work. My app is just a simple Single View application and I'm trying to add a UILabel to main view. Below is the code.

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UILabel *label = [[UILabel alloc] init];
    label.text = @"Hello world";
    label.layer.borderWidth = 1.0f;
    label.layer.borderColor = [UIColor redColor].CGColor;

    [self.view addSubview:label];

    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(label);
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"|[label]|"
                                             options:0
                                             metrics:nil views:viewsDictionary]];
    [self.view addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label]|"
                                             options:0
                                             metrics:nil views:viewsDictionary]];

    NSLog(@"constraints: %@", self.view.constraints);
}

Run this I got a bunch of errors:

    2016-02-01 18:14:15.729 AutolayoutVisualFormat[26671:909266] constraints: (
    "<_UILayoutSupportConstraint:0x79771ab0 V:[_UILayoutGuide:0x7976f950(0)]>",
    "<_UILayoutSupportConstraint:0x79786d30 V:|-(0)-[_UILayoutGuide:0x7976f950]   (Names: '|':UIView:0x79771790 )>",
    "<_UILayoutSupportConstraint:0x797884e0 V:[_UILayoutGuide:0x79772e30(0)]>",
    "<_UILayoutSupportConstraint:0x79777540 _UILayoutGuide:0x79772e30.bottom == UIView:0x79771790.bottom>",
    "<NSLayoutConstraint:0x7978d930 H:|-(0)-[UILabel:0x7976d000'Hello world']   (Names: '|':UIView:0x79771790 )>",
    "<NSLayoutConstraint:0x7978da50 H:[UILabel:0x7976d000'Hello world']-(0)-|   (Names: '|':UIView:0x79771790 )>",
    "<NSLayoutConstraint:0x7978fcb0 V:|-(0)-[UILabel:0x7976d000'Hello world']   (Names: '|':UIView:0x79771790 )>",
    "<NSLayoutConstraint:0x7978fce0 V:[UILabel:0x7976d000'Hello world']-(0)-|   (Names: '|':UIView:0x79771790 )>"
)
2016-02-01 18:14:15.733 AutolayoutVisualFormat[26671:909266] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSAutoresizingMaskLayoutConstraint:0x7a0630a0 h=--& v=--& H:[UILabel:0x7976d000'Hello world'(0)]>",
    "<NSLayoutConstraint:0x7978d930 H:|-(0)-[UILabel:0x7976d000'Hello world']   (Names: '|':UIView:0x79771790 )>",
    "<NSLayoutConstraint:0x7978da50 H:[UILabel:0x7976d000'Hello world']-(0)-|   (Names: '|':UIView:0x79771790 )>",
    "<NSLayoutConstraint:0x7a080130 'UIView-Encapsulated-Layout-Width' H:[UIView:0x79771790(320)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7978da50 H:[UILabel:0x7976d000'Hello world']-(0)-|   (Names: '|':UIView:0x79771790 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.
2016-02-01 18:14:15.733 AutolayoutVisualFormat[26671:909266] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
    (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSAutoresizingMaskLayoutConstraint:0x7a0758b0 h=--& v=--& V:[UILabel:0x7976d000'Hello world'(0)]>",
    "<NSLayoutConstraint:0x7978fcb0 V:|-(0)-[UILabel:0x7976d000'Hello world']   (Names: '|':UIView:0x79771790 )>",
    "<NSLayoutConstraint:0x7978fce0 V:[UILabel:0x7976d000'Hello world']-(0)-|   (Names: '|':UIView:0x79771790 )>",
    "<NSLayoutConstraint:0x7a081610 'UIView-Encapsulated-Layout-Height' V:[UIView:0x79771790(568)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7978fce0 V:[UILabel:0x7976d000'Hello world']-(0)-|   (Names: '|':UIView:0x79771790 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

You didn't provide frame to label. So it will not display anywhere. — Surjeet Singh, Feb 01 '16 at 11:24

score 3 · Accepted Answer · edited May 23 '17 at 12:14

Add this line it will work

[label setTranslatesAutoresizingMaskIntoConstraints:NO];

When using Auto Layout on views created in code, there are a few caveats to be aware of. The first is related to the value of the property translatesAutoresizingMaskIntoConstraints. This property is YES by default, which means Auto Layout constraints will be created based on the view's autoresizing mask. We want the view to respect the Auto Layout constraints we will add so this property should be set to NO.
It was old technology that was earlier used for managing view sizes You can refer this link UIView autoresizingMask - Interface Builder to Code - Programmatically create struts and springs - Swift or Objective-C

When this property is YES, which it is by default, the autoresizing mask of a view is translated into constraints. For example, if a view is configured as in Figure 6-1 and
translatesAutoresizingMaskIntoConstraints is YES, then the
constraints |-20-[button]-20-| and V:|-20-[button(20)] are added to
the view’s superview. The net effect is that unaware views behave as
they did in versions of OS X prior to 10.7. For views that are aware of Auto Layout, in most circumstances you will want translatesAutoresizingMaskIntoConstraints to be NO. This is because the constraints generated by translating the autoresizing mask are already sufficient to completely specify the frame of a view given its superview’s frame, which is generally too much. For example, this will prevent a button from automatically assuming its optimal width when its title is changed.

Thank you, adding that solves my problem. Could you explain about autoresizing mask? I also see it from Apple document but not sure what it is about. — Yaiba, Feb 01 '16 at 11:46
I can't vote yet but +1 for adding explanation about autoresizing mask (y) — Yaiba, Feb 02 '16 at 02:44

IOS simple Visual Format layout doesn't work

1 Answers1