Android like ScrollView in iOS Swift2.1

Question

In Android, one used ScrollView as the root in an XML file, then include many other different kinds of views inside it, that allowed the scroll behavior.

How does Swift 2.1 and Xcode 7.1.1 do this, since the storyboard is not long enough to insert all the different kinds of views I want to put in, like I did in the XML code for Android?

I am thinking iOS with an Android brain :(

Answer 1

There is a scroll view for iOS also in the interface builder object library:

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.

Is this what you were thinking of?

If you want the scroll view to change size I would recommend trying this:

You want to do is drop the scroll view onto the view controller and and add constraints.

I have never used a scroll view before, so this might not work.

Answer 2

0 lines of code

Storyboard is long enough:

All you need to do is to create a freeform view, put all your content is that freeform view using top-to-bottom Autolayout constraints, and use that view as the content of your UIScrollView.

Tutorial

1. View Controller > Show the Attributes inspector > Size > Freeform
2. View Controller > Show the Size Inspector > Simulated Size > Freeform > width & height
3. Add a UIScrollView
4. Add 4 AutoLayout constraints, with top/left relative to superview, and bottom/right of superview relative to scrollview
   • Scroll.Top = Superview.Top Margin
   • Scroll.Leading = Superview.Leading
   • Bottom Layout Guide.Top = Scroll.Bottom
   • Scroll.Trailing = Superview.Trailing
5. Add a UIView as a subview to UIScrollView
6. Repeat 4 AutoLayout constraints, same rule: anchored top, superview relative to subview width/height
   • Content.Top = Scroll.Top
   • Content.Leading = Scroll.Leading
   • Scroll.Bottom = Content.Bottom
   • Content.Trailing = Scroll.Trailing
7. Add all subviews to that UIView. Ensure you can trace an AutoLayout chain of constraints all the way from top to bottom (and left to right) with again the same rule as 4. and 6. anchored top & superview.width and superview.height relative to content.
8. Vertical height of your content view is handled by 7. For the width, and in this example, I decided to go full width. Notice how the Content view's width is relative to the root view width:
   • Content.width = View.width

Methodology

• Create a hierarchy of views using the following structure:

  1. root UIView (the one owned by the UIViewController
  2. UIScrollView scroller (must stretch with relationship to the root)
  3. content UIView (which will dictate the scroller scroll bars & area)
  4. everything else goes into the content view

• Understand what dictates the size of the content

  1. either hard sizes
  2. either relationship to contained views (continuous constraints)
  3. either relativity to superviews

• Understand the the edge-to-edge AutoLayout constraint continuity rule

  1. You should be able to follow a continuous set of constraints top-to-bottom or left-to-right for the directions that will define the size of en enclosing view
  2. You do not need such continuity for merely locating elements ; in fact, continuity where you do not need it may create conflicts

• to make the enclosure size relative to the enclosed views (what you are trying to achieve vertically in your example):

  1. attach the fist top view to a rigid location
  2. attach each view underneath to the object above it
  3. attach the bottom of the enclosure to the bottom of the last object

---

► Find this solution on GitHub and additional details on Swift Recipes.