How to Design an Uiscrollview in Storyboard

How to design an UIScrollView in storyboard

In Storyboard:

  • Select the ViewController
  • Set its Simulated Size to freeform and height to 1000.

Sample Image

How to use UIScrollView in Storyboard

I'm answering my own question because I just spent 2 hours to find the solution and StackOverflow allows this QA style.

Start to finish here is how to make it work in storyboard.

1: go to you view controller and click on Attribute Inspector.

2: change Size to Freeform instead of Inferred.

3: Go to the main view on that storyboard, not your scrollview but rather the top level view.

4: Click Size Inspector and set this view to your desired size. I changed my height to 1000.

Now you will see that you storyboard has your view setup so you can see the entire height of your scroll for easy design.

5: Drop on a scrollview and stretch it so it takes up the whole view. You should now have a scrollview with size of 320,1000 sitting on a view in your view controller.

Now we need to make it scroll and need to make it show content correctly.

6: Click on your scrollview and click on Identity Inspector.

7: Add a User Defined runtime attribute with KeyPath of contentSize then type of SIZE and put in your content size. For me it is (320, 1000).

Since we want to see our whole scroll view on the storyboard we stretched it and it has a frame of 320,1000 but in order for this to work in our app we need to change the frame down to what the visible scrollview will be.

8: Add a runtime attribute with KeyPath frame with Type RECT and 0,0,320,416.

Now when we run our app we will have a visible scrollview has a frame of 0,0,320, 416 and can scroll down to 1000. We are able to layout our subviews and images and whatnot in Storyboard just the way we want them to appear. Then our runtime attributes make sure to display it properly. All of this without 1 line of code.

How to design a very long Scrollview with XCode's Interface Builder

You can change the simulated size ( you can do it in xib also )

1-

Sample Image

2-

Sample Image

3-

Sample Image

Tip: if your content is too long you can better think of a UITableView

Getting ScrollView to Work with Autolayout and Storyboard

You have to provide the contentSize for a UIScrollView when laying it out using constraints.

For example:

You can set the width of View to be equal to the scrollView as this will provide the width of the scrollview's content. Then, to provide content height, layout red and yellow views vertically and use them to provide the height of View. This means you'll have to provide initial height for yellow view, or you can use a view that provides an intrinsicContentSize to determine the yellow view height so you don't have to manually change it.

Also I think you have to remove redview top == layout guide top, and add redview top == View top and yellowview bottom == View bottom

How to create a UIScrollView in storyboard?

At the end, when you implemented all stuff to the view, make an outlet for the UIScrollview and simply go to the viewcontroller.m file and put in some code to make the scrollview scroll. Atfer this step this should work. If not, make sure that Autolayout is disabled.

Here my tutorial for you:

1.Implement a scrollview

Sample Image

Put in a Image View, if you like.

Sample Image

set up the image size and file.

Sample Image

go to your .h file and add an scrollview outlet.

Sample Image

switch to .m file and put this code in the viewDidLoad medthod and replace the size to your contentSize which you desire. For example the width (x) = 320 and the high (y) = 700.

Sample Image

then simply connect the outlet to the scrollview itself:

Sample Image

and maybe change some details:

Sample Image

Thats all, hope it worked.

Best regards

Putting a UIScrollview in a viewcontroller (storyboard)

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

Move everything in a Storyboard view into a scroll view

To solve this issue I did something slightly similar to @paulvs to move all of the text fields into the scroll view first I made a new view controller and put a scroll view in it. Then I selected all of the text fields using command on the keyboard and copy-pasted them into the scroll view.

Not sure if this is the most elegant way to make sure the user can see the text boxes at the bottom but it seems to have worked to move the text fields.



Related Topics



Leave a reply



Submit