1

Hey I want to add a scroll view to my view controller, I have dragged a UIScrollView onto the canvas, it is the required size (228*128). I want this scrollview to scroll a view of size (576*128), i.e. double width. I'm not sure how to go about doing this. Do I first draw the (576*128) view on a separate xib file? How would I link all this up after? The image below is my setup. Do I have to create a custom class for the UIView that contains the content and init this is my view controller? Just not sure how to go about it. Thanks!

enter image description here

updated image below.........

enter image description here

Kex
  • 8,023
  • 9
  • 56
  • 129
  • Take a look at this answer, it might help http://stackoverflow.com/questions/16889123/how-to-add-objects-to-a-uiscrollview-that-extend-beyond-uiview-from-storyboard/16889377#16889377 – Mike S Jan 04 '15 at 16:32

2 Answers2

1

Link your scrollview to an outlet, then do this:

Objective-C:

[scrollView setContentSize:CGSizeMake(576, 128)];

Swift:

scrollView.contentSize = CGSize(width:576, height: 128)

After this, you can add elements to your scrollview seperately, or you could add them to a uiview and then add it to your scrollview by doing:

Objective-C:

[scrollView addSubview:view];

Swift:

scrollView.addSubview(view);

(By the way, you say 'double width'. 228 * 2 is not 576px but 456px)

Joris
  • 15
  • 4
1

You can lay this out entirely in Interface Builder.

  1. Start with a fresh ViewController. In the Size Inspector on the right, set the Simulated Size to Freeform. Set width to 640 and height to 600. This will give you a sufficiently wide ViewController to see the full width of your scroll view (for layout purposes only).

    Freeform Size

  2. Drag out a scrollView. Add constraints to center it in the view, and constrain it to the bottom of your ViewController. Constrain its width to 576 and its height to 128. We'll fix up the width in a later step.

  3. Add a contentView to the scrollView by dragging out a UIView and dropping it into the scrollView. Pin it to the left, top, right, and bottom of the scroll view and constrain its width to 576 and height to 128. To do this, click on the pin icon at the bottom of the screen |-[]-|, uncheck Constrain to margins, turn on all four orange I-beams (struts), set their constants to zero, check the boxes next to width and height and set their values to 576 and 128 respectively. Finally, click on Add 6 constraints.

    Adding 6 constraints

  4. Make the background of the contentView yellow so you can see it.

  5. Add content to your contentView. I added three labels "Left Side", "Middle", and "Right Side". layout scroll view

  6. Now let's make the scrollView the right size. Click on the scrollView's width constraint and make it a Placeholder by clicking on the Remove at build time checkbox.

    Placeholder

  7. Add another width constraint to the scrollView. Set it equal to 228, and set its priority to 750. With this lower priority, you won't have conflicts in Interface Builder, but when you build the other one will be left out and this will constrain your scrollView to a width of 228.

    Priority 750

  8. At this point, your Document Outline will look like this showing all of the constraints:

    Document outline showing constraints

  9. Now build, and your scrollView will scroll! showScroll

vacawama
  • 150,663
  • 30
  • 266
  • 294
  • Just tried this, in my XCODE there is no Remove at runtime checkbox. I do have Intrinsic size property though that I can change to "placeholder". Is that the same thing? Followed your guide and when I run the program I can't see the scrollview on screen. Just all white. – Kex Jan 05 '15 at 09:16
  • Which version of Xcode do you have? You should be using the latest version in the App Store. Are you running with Size Classes enabled or disabled? – vacawama Jan 05 '15 at 11:35
  • version 6.1.1, I uploaded a photograph above. That is my setup using you instructions. You can see the "placeholder" field in the options. Not sure how to find out if I am running with size classes enabled. Does it look right what I have? – Kex Jan 05 '15 at 15:39
  • You are looking at the intrinsic size of the contentView. That is not what you want. Set that back to default. You need to locate the constraint for the scrollView width. You can either find that in the Document Outline View on the left, or at the top of your screen where it says View -> Scroll View -> View if you click on the last View you can see a list of constraints. Choose the one for the scroll view width then look at it in the size inspector. – vacawama Jan 05 '15 at 15:59
  • Hey! So I did all that, the view appears now. It won't scroll though. Looks correct but just doesn't scroll. I have "enable scrolling" enabled on the scrollview. Nothing though – Kex Jan 06 '15 at 06:40
  • your step 3 "Pin it to the left, top, right, and bottom of the scroll view and constrain its width to 576 and height to 128". How do I pin it? Do you mean just drop the uivew into the scroll view? – Kex Jan 06 '15 at 06:41
  • I updated the instructions for step 3 and added the Document Outline view in step 8. It would probably be a good idea to start with a fresh ViewController and follow the steps again. – vacawama Jan 06 '15 at 14:30