UIScrollView that expands with contents' instrinsic size until height X, and then scrolls

Question

I'm basically trying to reproduce the behavior of the title and message section of an alert.

The title and message labels appear to be in a scroll view. If the label text increases then the alert height also increases along with the intrinsic content size of the labels. But at a certain height, the alert height stops increasing and the title and message text become scrollable.

What I have read:

Articles

• Auto Layout Magic: Content Sizing Priorities
• Editing Auto Layout Constraints (documentation)
• A Fixed Width Dynamic Height ScrollView in AutoLayout
• Using UIScrollView with Auto Layout in iOS

Stack Overflow

• Adding priority to layout constraints
• Inequality Constraint Ambiguity
• UIScrollView Scrollable Content Size Ambiguity
• Ambiguity with two inequality constraints
• IOS scrollview ambiguous scrollable content height in case of autolayout

The answer may be in there but I was not able to abstract it.

What I have tried:

Only focusing on the scroll view with the two labels I tried to make a minimal example in which a parent view would resize according to the intrinsic height of the scrollview. I've played around with a lot of constraints. Here is one combo (among many) that doesn't work:

I've worked with auto layout and normal constraints and even intrinsic content sizes. Also, I do know how to get a basic scroll view working with auto layout. However, I've never done anything with priorities and content hugging and compression resistance. From the reading I've done, I have a superficial understanding of their meanings, but I am at a loss of how to apply them in this instance. My guess is I need to do something with content hugging and priorities.

Answer 1

I think I have achieved an effect similar to the one you wanted with pure Auto Layout.

THE STRUCTURE

First, let me show you my structure:

Content View is the view that has the white background, Caller View and Bottom View have a fixed height. Bottom View has your button, Caller View has your title.

THE SOLUTION

So, after setting the basic constraints (note that the view inside scroll view has top, left, right and bottom to the scroll view AND an equal width) the problem is that the scroll view doesn't know what size should have. So here comes what I have done:

I wanted that the scroll could grow until a max. So I added a proportional height to the superview that sets that max:

However, this brings two problems: Scroll View still doesn't know what height should have and now you can resize and the scroll view will pass the size of his content (if the content is smaller than the max size).

So, to solve both issues I have added an equal height with a smaller priority from the View inside of the Scroll View and the Scroll View

I hope this can help you out.

Answer 2

Your problem can't be solved with constraints alone, you have to use some code. That's because the scroll view doesn't have an intrinsic content size.

So, create a subclass of scroll view. Maybe give it a property or a delegate or something to tell it what its maximum height should be.

In the subclass, invalidate the intrinsic content size whenever the content size changes, and calculate the new intrinsic size as the minimum of the content size and the maximum allowed size.

Once the scroll view has an intrinsic size your constraints between it and its super view will actually do something meaningful for your problem.

Answer 3

It can be done in Interface builder using auto layout without any difficulties.

1. set outer container view ("Parent container for scrollview" in your sample) height constraint with "less than or equal" relation.

2.add "equal heights" constraint to content view and scroll view. Then set low priority for this constraint.

That's all. Now your scrollview will be resized by height if content height changed, but only to max height limited by outer view height constraint.

Answer 4

You should be able to achieve this solution via pure autolayout.

Typically if I want labels to grow as their content grows vertically I do this

[label setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal]; 
[label setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisVertical];

In order for your scrollview to comply to your requirements you will need to make sure a line can be drawn connecting the top of the scrollview all the way through the labels to the bottom of the scrollview so it can calculate it's height. In order for the scrollview to confine to it's parent you can set a height constraint with a multiplier of the superview of say 0.8

Answer 5

You can do this fairly simply with two constraints

• Constraint 1: ScrollView.height <= MAX_SIZE. Priority = Required
• Constraint 2: ScrollView.height = ScrollView.contentSize.height. Priority = DefaultHigh

AutoLayout will 'try' to keep the scrollView to the contentSize, but will 'give up' when it matches the max height and will stop there.

the only tricky part is setting the height for Constraint 2.

When my UIStackView is in a UIViewController, I do that in viewWillLayoutSubviews

If you're subclassing UIScrollView to achieve this, you could do it in updateConstraints

something like

override func viewWillLayoutSubviews() {

    scrollViewHeightConstraint?.constant = scrollView.contentSize.height     

    super.viewWillLayoutSubviews()
}

Answer 6

To my project, I have a similar problem. You can using the following way to make it work around.

First, Title and bottom action height are fixed. Content has variable height. You can add it the mainView as one child using the font-size, then call layoutIfNeeded, then its height can be calculated and saved as XX. Then removed it from mainView.

Second, using normal constraint to layout the content part with scrollView, mainView has a height constraint of XX and setContentCompressionResistancePriority(.defaultLow, for: .vertical).

Finally, alert can show exact size when short content and show limited size when long size with scrolling.

Answer 7

I have been able to achieve this exact behavior with only AutoLayout constraints. Here is a generic demo of how to do it: It can be applied to your view hierarchy as you see fit.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let kTestContentHeight: CGFloat = 1200

        // Subview that will shrink to fit content and expand up to 50% of the view controller's height
        let modalView = UIView()
        modalView.backgroundColor = UIColor.gray

        // Scroll view that will facilitate scrolling if the content > 50% of view controller's height
        let scrollView = UIScrollView()
        scrollView.backgroundColor = .yellow

        // Content which has an intrinsic height
        let contentView = UIView()
        contentView.backgroundColor = .green


        // add modal view
        view.addSubview(modalView)
        modalView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([modalView.leftAnchor.constraint(equalTo: view.leftAnchor),
                                     modalView.rightAnchor.constraint(equalTo: view.rightAnchor),
                                     modalView.heightAnchor.constraint(lessThanOrEqualTo: view.heightAnchor,
                                                                       multiplier: 0.5),
                                     modalView.bottomAnchor.constraint(equalTo: view.bottomAnchor)])

        let expandHeight = modalView.heightAnchor.constraint(equalTo: view.heightAnchor)
        expandHeight.priority = UILayoutPriority.defaultLow
        expandHeight.isActive = true

        // add scrollview to modal view
        modalView.addSubview(scrollView)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([scrollView.topAnchor.constraint(equalTo: modalView.topAnchor),
                                     scrollView.leftAnchor.constraint(equalTo: modalView.leftAnchor),
                                     scrollView.rightAnchor.constraint(equalTo: modalView.rightAnchor),
                                     scrollView.bottomAnchor.constraint(equalTo: modalView.bottomAnchor)])


        // add content to scrollview
        scrollView.addSubview(contentView)
        contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([contentView.leftAnchor.constraint(equalTo: scrollView.leftAnchor),
                                     contentView.widthAnchor.constraint(equalTo: modalView.widthAnchor),
                                     contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
                                     contentView.topAnchor.constraint(equalTo: scrollView.topAnchor),
                                     contentView.heightAnchor.constraint(equalToConstant: kTestContentHeight)])
        let contentBottom = contentView.bottomAnchor.constraint(equalTo: modalView.bottomAnchor)
        contentBottom.priority = .defaultLow
        contentBottom.isActive = true
    }

}