Setting contentSize when adding an XIB's UIScrollView to a view

Question

I'm in iOS 7.0, Xcode 5.1.1.

In this setup, I just completed a sample where I have a storyboard that loads its main view from an XIB. I did this by deleting the main view in the scene in the storyboard that uses the view controller.

In this case, Cocoa loads the XIB for the view controller which ends up being very nice.

Ideally, I'd like the first view in the XIB to be the proper size for the frame of the device this is displayed on and the second view in the XIB is the UIScrollView.

I have turned Auto Layout off for this XIB, so that the scrollView will actually scroll.

My XIB's first view is 568 pixels in height. The scrollView's height is 1650 pixels in height.

What is confusing me is that I can not set the contentSize of the scrollView to 1650 and have the scrollView scroll the whole scrollview.

Oddly, I have to do this: self.myScrollView.contentSize = CGSizeMake(self.view.frame.size.width,1660 + (self.view.frame.size.height) * 2);

which is 2796.

As can be seen below:

(lldb) po self.myScrollView

UIScrollView: 0x10953e9c0; frame = (0 64; 320 1650);

(lldb) po self.myScrollView.contentSize (width=320, height=2796)`

Any idea on what part of view mojo I am destroying here?

Answer 1

Updated response

I'm not 100% clear on the setup in the xib that holds the scroll view, but I'm assuming the following:

• you have one UIView (call in aView) with a size on screen of 320 x 568 pixels;
• you then have a UIScrollView with a size on your screen of 320 x 1650 pixels.
• You have then added the scroll view to aView so that it is the only subview of aView. This should mean that not all of the scroll view is visible - only the first 568 pixels (vertically).

Assuming the above I'd suggest the following:

1. Make sure that the top-edge of the scroll view is flush with aView. You've probably done this, but it's worth checking. Select the scroll view, then go to the size inspector, make sure everything is zero aside from the height and width

2. In my app with the setup as above, I only needed the following two lines in viewDidLoad to get the scroll view scrolling:

    self.sv.frame = CGRectMake(0, 0, 320, 568);
    self.sv.contentSize = CGSizeMake(320, 1650); 
   

   Note in particular the size of the frame of the scroll view, it is NOT 1650, it's the size that you want the scroll view to take up when it's on screen.

If I've misunderstood the setup, and this is not what you're trying to do, you should edit your question to clarify. Finally, I notice that the one property of the scroll view that you haven't mentioned in your question is it's center property. The bounds, frame, and center are all inter-related. Try logging all three. My guess is that when you set the frame, the center is affected, and this is why you're having to make the strange adjustment to the size of your scroll view. Assuming the scroll view covers the whole screen, the center should be (160,284) - i.e. the midpoint of the frame. In this situation, it should not be negative.

Initial Response

Your question implies that you've not had much luck using scroll views in conjunction with Auto-Layout:

I have turned Auto Layout off for this XIB, so that the scrollView will actually scroll.

In fact, scroll views are perfectly compatible with Auto Layout, you just have to make sure you've done a couple of things, and not done a couple of other things. I appreciate the steps below provide an indirect, rather than a direct, solution to the question you asked, but if you can get an auto-layout/scroll view setup working your current problem will disappear.

Step 1. Select your view controller object and set it's size to Freeform (Attributes Inspector -> Simulated Metrics -> Size)

Step 2. Make your view controller as long as it needs to be to hold the entire scrollable area (1650 in your case)

Step 3. Add your scroll view to your controller's view and make it cover the entire view area. Don't add any constraints yet, but its height should be 1650 also.

Step 4. Use Auto Layout to pin the edges of the scroll view to its superview (do NOT set any width or height attribute for the scroll view)

Step 5. It's generally a good idea to give your scroll view a content view, so add a subview view you the scroll view and make it cover the entire scroll view. This is the view which will contain the scrollable content (controls, text etc)

Step 6. Constrain the Content View in the same way that you constrained the scroll view but this time, DO set an explicit height and width (height should be 1650)

Note that at no point do you set the scroll views contentSize, and nor do you ever give your scroll view an explicit height or width. The contentSize value is calculated for you from the height constraint you set on the content view in Step 6.