UIView min and max height with Auto Layout

Question

I have a view which is correctly displayed on an iPhone 6 screen, but needs scrolling on an iPhone 5 screen. I am trying to change some Auto Layout constraint to remove the need to scroll on the latter.

Here is an attempt to explain my situation visually:

The first 2 screenshots are the existing situations on an iPhone 6 and iPhone 5. The third one is what I am trying to achieve (on iPhone 5 only).

I wrote the following Auto Layout contraints, but I am missing something here:

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=25,<=50)-[blueView]-(>=25,<=50)-[redView]-5-|"
                                                             options:0
                                                             metrics:nil
                                                               views:nameMap]];

Should Hugging and/or Compression Resistance be involved here? In what way?

Edit to show more of my actual code:

[self addSubview:loginNSignupScrollView];
[self.loginNSignupScrollView addSubview:logoImageView];
[self.loginNSignupScrollView addSubview:horizontalScrollView];
[self.loginNSignupScrollView addSubview:appVersionLabel];
[self.horizontalScrollView addSubview:loginView];


[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[loginNSignupScrollView]|"
                                                             options:0
                                                             metrics:nil
                                                               views:nameMap]];

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[loginView(==350)]"
                                                             options:0
                                                             metrics:nil
                                                               views:nameMap]];

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=30,<=60)-[logoImageView(==35)]-(>=25,<=50)-[horizontalScrollView]-30-[appVersionLabel]-5-|"
                                                             options:0
                                                             metrics:nil
                                                               views:nameMap]];

[self addConstraint:[NSLayoutConstraint constraintWithItem:self.horizontalScrollView
                                                 attribute:NSLayoutAttributeHeight
                                                 relatedBy:NSLayoutRelationEqual
                                                    toItem:self
                                                 attribute:NSLayoutAttributeHeight
                                                multiplier:0.0
                                                  constant:350]];

Answer 1

As you know, scroll views are special because, if you use auto layout inside them, the content size (the size of the scrollable content) is determined by the constraints from the inside out. Thus, you cannot directly do what you're trying to do. A better strategy is:

• The scroll view, pinned to the superview (the main view)

• A blank content view inside the scroll view, pinned to the scroll view with zero constants

• Everything else, inside the content view

Once you've set that up, two good things happen:

• The size of the content view is the scroll view's contentSize. So all you have to do is set that explicitly. A reasonable approach might be to set it in code in viewDidLayoutSubviews; that is the earliest that the true final interface size is known.

• The constraints of the content view's subviews become ordinary constraints, positioning them from the outside in as usual, based on the content view's size — which, as we have just said, you are setting explicitly.

Using that sort of strategy, I achieved this (4s and 6s simulators, respectively), which seems to be at least the kind of thing you're after; observe that we are indeed in a scroll view, though you can't tell from the screen shots:

It isn't totally identical to your screen shots because it wasn't clear to me what you were really after, so I allowed the white spaces to grow/shrink equally while keeping the view heights constant; it may be that you wanted the red view height to grow on the larger screen. But that's a minor quibble, I think.

The only code I used was to set the size of the content view, which (as I said) is the same as setting the scroll view's contentSize:

NSLayoutConstraint.activateConstraints([
    self.contentView.widthAnchor.constraintEqualToConstant(
        self.view.bounds.size.width),
    self.contentView.heightAnchor.constraintEqualToConstant(
        self.view.bounds.size.height),
])

Answer 2

I think you can pin your bottom view with bottom layout by some constant value so that bottom view will always keep diatance by that constant value from bottom.