How to add Scroll View in Swift 5?

Question

I wanna add scroll view in my project but in swift 5 I can't add it I tried many ways

@IBOutlet weak var scrollView: UIScrollView! 
@IBOutlet weak var imageViewBottomConstraint: NSLayoutConstraint!
@IBOutlet weak var imageViewLeadingConstraint: NSLayoutConstraint!
@IBOutlet weak var imageViewTopConstraint: NSLayoutConstraint!
@IBOutlet weak var imageViewTrailingConstraint: NSLayoutConstraint!

Solution 1

It works 100% when I Disabling the content layout guides in properties

Solution 2

1.Add scrollView(1) in storyboard, add needed constraint to top/bottom/trailing/leading.

2.Then uncheck "Content Layout Guides" in Size inspector section for your scrollView.

3.Then you need to put into your scrollView new UIView(2), its constraints are for top/bottom/trailing/leading to superView(1) and equal width to superView(1).

4.Then the height of your view(2) you can add as constraint or you can add the content, which will give the height to your view(2).

Example with the height setted

Example with the content, which give the height to your view(2)

Solution 3

If you use interface builder first of all add your scroll view and set scroll view constraint (top, bottom, leading and trailing) as (0,0,0,0). View hierarchy must be like this view -> scroll view -> view(content view). Again add constraints for your content view. Content view must have equal width and equal height with parent view (Scroll View). Control drag from content view to scroll view in Document Outline

For more information you can look at this https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithScrollViews.html

Solution 4

You can skip constraints altogether.

1. Add the ScrollView to your storyboard.
2. Create an IBOutlet in your ViewController.
3. Set the scrollview's height: scrollView.contentSize = (CGSize(width: desiredWidth, height: desiredHeight)

The desired width can be either a number or the width of another view. You can take the main view's width for exemple, by creating an IBOutlet to it: scrollView.contentSize = (CGSize(width: mainView.frame.size.width, height: desiredHeight)

The desired height is whatever value you require for the content to be shown in full while scrolling.

I find this way much easier to understand and control.

Solution 5

You don't need to uncheck Content Layout Guides(it's there to help us). It's actually not that hard to set it up. Here's how to do it using Xcode 11+ and supporting iOS 11+

1 - Add ScrollView and set top, bottom, leading and trailing constraints to 0 in relation to its superview

2 - Add a Content View(any UIView), drag a connection to the Content Layout Guide and set leading,top,trailing and bottom constraints to 0(make sure to set it to 0)

3 - Drag from your Content View to the Frame Layout Guide and set it to Equal Width

4 - Add a height constraint constant to the Content View

View more solutions