how to avoid hardcoding with programmatic autolayout

Question

I have an issue when using autolayout (I'm new to it) where, although my constraints function as expected (everything centered horizontally, vertical spacing as I want it), when I move to landscape orientation, the bottom button disappears.

I understand that this happens because I've constrained my objects based on a portrait orientation view, and this no longer applies when the height and width values shift as we move to landscape. I just don't really know how to account for these changes when changing orientation. Any advice?

code and screenshot below:

-(void)setConstraints {
    [self.view removeConstraints:self.view.constraints];

    UIButton *cameraButton = self.cameraButton;
    UILabel *camera = self.videoLabel;
    UIButton *libraryButton = self.libraryButton;
    UILabel *library = self.libraryLabel;


    NSDictionary *views = NSDictionaryOfVariableBindings(camera, cameraButton, libraryButton, library);

    NSDictionary *metrics = @{@"horizontalSpacing":@500.0, @"verticalSpacing":@125};


    //set up top button to be horizontally centered
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-[cameraButton]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:views];

    //set up top button vertical from top of superview
    constraints = [constraints arrayByAddingObjectsFromArray:
                   [NSLayoutConstraint constraintsWithVisualFormat: @"V:|-175-[cameraButton]"
                                                           options:0
                                                           metrics:nil
                                                             views:views]];
    //set up top button label to be horizontally centered
    constraints = [constraints arrayByAddingObjectsFromArray:
                   [NSLayoutConstraint constraintsWithVisualFormat: @"|-[camera]-|"
                                                           options:0
                                                           metrics:nil
                                                             views:views]];

    //set up second button to be horizontally centered
    constraints = [constraints arrayByAddingObjectsFromArray:
                   [NSLayoutConstraint constraintsWithVisualFormat: @"|-[libraryButton]-|"
                                                           options:0
                                                           metrics:nil
                                                             views:views]];
    //set up label for second button to be horizontally centered
    constraints = [constraints arrayByAddingObjectsFromArray:
                   [NSLayoutConstraint constraintsWithVisualFormat: @"|-[library]-|"
                                                           options:0
                                                           metrics:nil
                                                             views:views]];

    //set up vertical constraints by spacing ALL objects appropriately
    constraints = [constraints arrayByAddingObjectsFromArray:
                   [NSLayoutConstraint constraintsWithVisualFormat: @"V:[cameraButton]-[camera]-verticalSpacing-[libraryButton]-[library]"
                                                           options:0
                                                           metrics:metrics
                                                             views:views]];


    self.libraryLabel.textAlignment = NSTextAlignmentCenter;
    self.videoLabel.textAlignment = NSTextAlignmentCenter;

    self.libraryLabel.backgroundColor = [UIColor redColor];

    [self.view addConstraints:constraints];

}

score 0 · Accepted Answer · answered Aug 21 '15 at 15:58

0

You are getting exactly what you asked for. If that isn't what you want, don't ask for that!

Think about your vertical constraints:

@"V:|-175-[cameraButton]"
@"V:[cameraButton]-[camera]-verticalSpacing-[libraryButton]-[library]"

That constitutes a single chain of constraints from the top down. Naturally, if the screen is shorter than your 175 plus your verticalSpacing plus the sizes and minimal spacings of the other views, the bottom view(s) will be off the bottom of the screen.

If that isn't what you want, change your design so that isn't what you get. For example, position some of your views from the top down and some of your views from the bottom up. Or allow some of your spaces to change as a percentage of the superview height.

answered Aug 21 '15 at 15:58

matt

515,959
87
875
1,141

to the rescue again! I know that it's giving me exactly what I'm asking for, I intend to change that. I guess the answer to my question was to use percentages of superview height. Thanks. I fully understand why I'm having the issue, it isn't a mystery to me. I know what my code is doing; I guess I was just asking for a way to make my constraints relative to the superview (as a percentage). Appreciate the help once again. – karan satia Aug 21 '15 at 16:11
"I guess I was just asking for a way to make my constraints relative to the superview" No problem; it's easy. But you can't do it with the "visual format" syntax; you have to use the full constraint syntax. That way you can use the `multiplier` to express the percentage. Or you can do it by forming the constraints in the nib editor. — See, for example, my answer here: http://stackoverflow.com/questions/26373598/how-to-create-percentage-of-total-width-using-autolayout – matt Aug 21 '15 at 16:17
poked around a bit and just used full constrant syntax as you mentioned. I have to say, autolayout is actually a lot of fun. I can see how it can get really deep. – karan satia Aug 21 '15 at 17:01

how to avoid hardcoding with programmatic autolayout

1 Answers1