How to make an UIScrollView work with Autolayout and dynamic content?

Question

I have this views hierarchy in a xib file:

UIView
UIScrollView
- UIView
  - UIView
  - UITableView
UIButton

Let's call contentView the UIView that is the direct child of the UIScrollView. I've set its top, bottom, leading and trailing constraints to pin the scroll view. Then, since I'm populating the table view at runtime and I don't know its height beforehand, I set the scroll view's contentSize in code:

[self.scrollView setContentSize:CGSizeMake(self.contentView.frame.size.width, self.tableView.frame.size.height)];

But I don't make this work... what could I be missing?

Add your contrain to UIView in which child is UIScrollView. And doesn't setContentSize. — Tanuj, Dec 16 '15 at 11:17
@Tanuj I've just done that, and it doesn't seem to work for me... — AppsDev, Dec 16 '15 at 11:37

Sana · Answer 1 · 2015-12-18T04:57:09.000

2

AppsDev, check this video out it helped me a lot doing UIScrollView via storyboard https://www.youtube.com/watch?v=UnQsFlMGDsI

Also never set the scrollView's contentSize as it has to be determined by scrollView on its own and that's why we have AutoLayout.

I believe we should have one tag for uiscrollview-autolayout

edited Dec 18 '15 at 04:57

answered Dec 16 '15 at 23:31

Sana

9,895
15
59
87

score 0 · Answer 2 · answered Dec 17 '15 at 01:40

Don't set the content size manually. Instead,

Constrain your contentView's four edges to the edges of the scrollView.
Constrain your contentView's width to be equal to the scrollView's width. (This will prevent the content from being wider than the scrollView.)
Constrain the contentView's top and sides to the corresponding edges of the child view.
Constrain the contentView's sides and bottom to the sides and bottom of the tableView.
Now here's where it gets tricky: constrain the bottom of the child view to be equal to the top of the table view. However, unless you explicitly set a height constraint on the child view, you'll get a layout error that the height of the scrollView's contents will be ambiguous. To get around this, you can set the child's placeholder height to make Interface Builder happy, but then you'll also have to set its height somewhere at runtime.

Now you should be set. The scrollView can now calculate the full height and width of its contents by examining the constraint hierarchy, and you don't have to set its content height manually.

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

I finally managed to make this work by following the @Sana answer and also this post to be able to scroll the table view content.

Thanks u all for replying.

edited May 23 '17 at 10:27

Community

1
1

answered Dec 17 '15 at 14:29

AppsDev

12,319
23
93
186

score -1 · Answer 4 · answered Dec 16 '15 at 11:21

Just for example:

UIView *containerView               = [[UIView alloc] init];
    UIScrollView *scrollView            = [[UIScrollView alloc] init];
    [containerView addSubview:scrollView];

    containerView.translatesAutoresizingMaskIntoConstraints = NO;
    scrollView.translatesAutoresizingMaskIntoConstraints    = NO;
    NSDictionary *viewsDictionary       = NSDictionaryOfVariableBindings(containerView, scrollView);

    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil
                                                                            views:viewsDictionary]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil
                                                            views:viewsDictionary]];

I've already set the views in IB, should I add them in code? — AppsDev, Dec 16 '15 at 11:36
Yes, I've just embedded the scroll view in another UIView and set constraints between them in IB. — AppsDev, Dec 16 '15 at 11:38
remove all the constraints from UIScrollView, only UIView constarints is enough. — Tanuj, Dec 16 '15 at 11:40
checkout this example: https://github.com/jamieforrest/ScrollingButtons — Tanuj, Dec 16 '15 at 11:43

score -1 · Answer 5 · answered Dec 16 '15 at 13:12

-1

Use this code My code help you.

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
   [self.scrollView setContentSize:CGSizeMake(self.contentView.frame.size.width, self.tableView.frame.size.height)];
}

answered Dec 16 '15 at 13:12

Vidhi Patel

603
5
10

You should not use setContentSize when you're using auto layout. – NRitH Dec 17 '15 at 01:30

How to make an UIScrollView work with Autolayout and dynamic content?

5 Answers5