Height of contents of a UIScrollView view based on internal content using storyboard

Question

I am really having difficulty making my UIScrollView fully responsive, using only the limitations of the storyboard .

Here is my hierarchy:

 > - UIViewController > - UIView > - UIScrollView > - contentView > - module1View > - module2View > - module3View 

All modules are used to display diagrams. I want them to be responsive . I want their width to be 100% of the screen, and their height is determined by the ratio using the constraint. The modules are displayed next to each other, like news in a news feed.

My question is: how do you set the height of the contentView equal to the sum of all modules (module 1 + 2 + 3)?

In other words, I want to achieve:

• Top of contents View = top of module 1
• Top of module 2 = bottom of module 1
• Top of module 2 = bottom of module 2
• Bottom of contentView = bottom of module 3

To do this, I follow a tutorial found on the Internet. Here are the steps I followed:

• Configure UIScrollView to determine its location and position .
• Set the UIScrollView top , bottom , left and right spacing to the nearest neighbor to 0 .
• Setting restrictions between modules for their "stack" on one another.
• (I REPLACE HERE) Setting the bottom of the contentView on the bottom of module 3 to allow the UIScrollView scroll to the end of the content.

I tried to increase the height of the UIScrollView : it works, but it does not respond. Since the height of the module is calculated through a coefficient, depending on the device, the height "module 1 + 2 + 3" changes.

I tried adding a constraint from module 3 to contentView to set the bottom of module 3 = at the bottom of the contentView . All restrictions turn red with a warning everywhere.

Do you have an idea to set the height of the contentView based on responsive content? (For example, "wrap-content").

Thanks in advance for your help!

Answer 1

I managed to get dynamic scroll views that fully work from the storyboard, without code, with the following steps:

1) In the storyboard, add a scroll view and limit its edges along the edges of the main view or in any way

2) In the scroll window, add the plain old UIView as a container. Limit it to all 4 edges of the scroll, BUT ALSO add a width limit to the width relative to the scroll and an equal height limit to represent the scroll

3) Very important: set a low priority to limit equal height, for example. 250.

4) in the container view that you added in step 2, add 3 modules. Limit the upper edge of the first module at the top of the container view, limit the lower edge of the last module at the bottom of the container view, and limit all intermediate modules to the previous module in the chain. This should give you a whole chain of inextricable vertical constraints inside the container. You will also need to add any appropriate installation / x constraints for each module.

5) Create and run! The size of your scroll content should automatically be equal to the total height of all modules plus the distance between them, and dynamically changing the contents of the module will update the size of the scroll content using an automatic layout, rather than requiring explicit code to calculate and update.

Answer 2

Try to determine the runtime of the modules and programmatically add an automatic placement constraint for the modules.

  #define kDeviceHeight [UIScreen mainScreen].bounds.size.height #define kDeviceWidth [UIScreen mainScreen].bounds.size.width - (void)viewDidLoad { [super viewDidLoad]; [self setScrollViewHeight]; } -(void)setScrollViewHeight{ float module1_Height,module2_Height,module3_Height;// Calculate the height of modules over here and assign it to respective variables float viewVerticalSpacing = 5; // Provides space between two views float YAxis = 0; module1View.frame = CGRectMake(0, 0, kDeviceWidth, module1_Height); YAxis = YAxis + module1_Height + viewVerticalSpacing; module2View.frame = CGRectMake(0, YAxis, kDeviceWidth, module2_Height); YAxis = YAxis + module2_Height + viewVerticalSpacing; module3View.frame = CGRectMake(0, YAxis, kDeviceWidth, module3_Height); float scrollView_height = YAxis + module3_Height + viewVerticalSpacing; scroll_view.contentSize = CGSizeMake(kDeviceWidth, scrollView_height); scroll_view.frame = CGRectMake(0, 0, kDeviceWidth, kDeviceHeight); } 

Answer 3

For me, Daniel's solution was very useful, but it didn't work. Following are the updated steps:

1) In the storyboard, add a scroll view and limit its edges along the edges of the main view or in any way

2) In the scroll window, add the plain old UIView as a container. Limit it to all 4 edges of the scroll, BUT also add a width limit relative to the scroll in the parent view (highest view) and an equal height limit for the parent scroll view

3) Very important: set a low priority to limit equal height, for example. 250.