CODEWITHSUNDEEP
iosxcodeuiviewuiscrollview
Kex
Kex

Reputation: 8579

Putting a UIScrollview in a viewcontroller (storyboard)

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

Upvotes: 1

Views: 1637

Answers (2)

vacawama
vacawama

Reputation: 154563

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

Upvotes: 1

Joris
Joris

Reputation: 15

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)

Upvotes: 1

Related Questions