Centering a column of variable width text in a UIScrollView using auto-layout

Question

I have a seemingly simple design that I cannot express using Auto Layout constraints: in UIScrollView I need to show a centered column of text with a minimum width of 300 points and a maximum width of 500 points (saving a valid border of at least 10 points in all cases .)

The column of text is actually a UIStackView, but it does not really matter for this discussion, the view can also be easily compatible with UIImageView.

I tried to use uppercase views with different content and compression resistance, stack representation with a horizontal axis, width restrictions with constants with less or equal, etc. I want to do all this in a storyboard, sniffing during layout changes or using size classes feels like a hoax.

(Some of my experiments forced Xcode to hang by updating the storyboard: giving me a painful hint of no solution for these limitations).

And before you suggest this, I read about the intricacies of UIScrollView and Auto Layout .

This seems like an insoluble problem, which is a shame. This is a very common model, and designers like to use something with CSS (using min-width and max-width). Hope I missed something and that someone with a deeper knowledge of the automatic layout can explain the way to do this (and act as a link for others who would like to do the same.)

Update: The suggestions of Adam and Ben below are very useful for achieving this layout. But once you get a few blocks of text, the automatic iterative auto-layout solver cannot handle it (and Xcode freezes.) For more information: http://openradar.appspot.com/25173433

Answer 1

This is actually quite simple! I included the storyboard file as a demo. Key bits for text inside the content view:

• Leading / trailing fields> = 10
• Width> 300
• Width <= 500
• Center alignment

No priority changes are required unless you have other content that takes precedence.

Answer 2

Try the start and end limit of 10, but set their priority to 750. Then center horizontally and width> 300 and width <= 500 and leave them with priority 1000.

Answer 3

If I ask the problem correctly, I think I have a fairly simple setup that works for this.

I start with scrollview and then add the base UIView to it to work as a container. I anchor the UIView to the top, bottom, leading, and trailing edges of the scrollview, so that the size of the contents of the scrollview is controlled properly. I am adding a restriction for this kind of container to match the width with the scroll.

Then I add a UIStackView to the container view and give it the following restrictions:

• Align Center X to Superview
• Trailing space for observation> = 10
• Leading space for observation> = 10
• Width = 500 with priority 750
• Width> 300
• Lower observation space = 10
• Top observation space = 10

All with default priorities, except width = 500. Then I put a few labels in the stack view, and the result I get is a column that will have at least 10-point margin on both sides, but will never be wider than 500 points and will decrease to 300 points depending on the contents of the stack view.

Answer 4

I think I have a solution if I understand the problem correctly. I checked this with a UILabel inside a UIScrollView, but it should work for any view with an internal size. For any internal view you use, try these restrictions:

• Width <= 500
• Width> 300
• Align Center X to Superview
• Top space for Superview = 10
• Lower space for Superview = 10
• Leading space for Superview = 10 (priority 750)
• Trailing space for Superview = 10 (priority 750)
• Horizontal Content Compression Resistance: 250

Setting a low priority for compressing horizontal content is key. My UILabel has a bunch of text, so its own content size is about 2200 pixels. With the standard horizontal compression resistance, it will always expand to a maximum width of 500 pixels, and scrolling will scroll both horizontally and vertically on smaller screens. I want only vertical scrolling, so I set the horizontal compression resiliency to a lower priority on UILabel, which tells the auto layout to compress it to fit.