# UIScrollView Tutorial: Getting Started

**URL:** <https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195>\
**Category:** 🎓 Courses & Articles\
**Created:** [June 21, 2017, 1:00pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195 "2017-06-21T13:00:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![owenb](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/owenb/32/101345_2.png) [@owenb](https://forums.kodeco.com/u/owenb)\
**Post date:** [June 21, 2017, 1:00pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/1 "2017-06-21T13:00:55Z")

</div>

In this UIScrollView tutorial you'll learn how to zoom large images, center content while zooming, page content, and use Auto Layout with UIScrollView.

* * *
 This is a companion discussion topic for the original entry at [https://www.raywenderlich.com/560-uiscrollview-tutorial-getting-started](https://www.raywenderlich.com/560-uiscrollview-tutorial-getting-started)

---

<div class="post-metadata">

**Author:** ![frankdrebin123](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/frankdrebin123/32/81494_2.png) [@frankdrebin123](https://forums.kodeco.com/u/frankdrebin123)\
**Post date:** [June 22, 2017, 7:11am UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/2 "2017-06-22T07:11:42Z")

</div>

I thought iOS 11 introduced a simpler way to keep the content of a scrollview centered when zooming, as discussed in the WWDC 2017 sessions. It involves setting  
imageView.centerXAnchor.constraints(equalTo: scrollView.contentLayoutGuide.centerXAnchor)  
imageView.centerYAnchor.constraints(equalTo: scrollView.contentLayoutGuide.centerYAnchor)

Why did you keep the old method around in your updated tutorial ? Or am I missing something ?

MT

---

<div class="post-metadata">

**Author:** ![muclbahaloute](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/muclbahaloute/32/69720_2.png) [@muclbahaloute](https://forums.kodeco.com/u/muclbahaloute)\
**Post date:** [June 27, 2017, 5:21pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/3 "2017-06-27T17:21:41Z")

</div>

Sadly after adding the following lines…

```
override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    updateMinZoomScaleForSize(view.bounds.size)
}

```

…and running the application the scrollView’s zoomScale property is not getting updated (it’s set to 1.0, by default I think) and the picture looks exactly the same way as in the previous step. I tried moving the call to updateMinZoomScaleForSize() method to viewDidAppear() without success, the zoomScale is still 1.0.

---

<div class="post-metadata">

**Author:** ![muclbahaloute](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/muclbahaloute/32/69720_2.png) [@muclbahaloute](https://forums.kodeco.com/u/muclbahaloute)\
**Post date:** [June 27, 2017, 6:01pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/4 "2017-06-27T18:01:07Z")

</div>

Pardon, mea culpa - I did not set the delegate for the scrollView, all is well now.

---

<div class="post-metadata">

**Author:** ![owenb](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/owenb/32/101345_2.png) [@owenb](https://forums.kodeco.com/u/owenb)\
**Post date:** [June 28, 2017, 3:21pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/5 "2017-06-28T15:21:50Z")

</div>

Hi frankdrebin123,

I tested the code you posted and it doesn’t work well with a scrollview (unless I’m missing something). Scrollview’s content size (width/height) is determined by the constraints of its contents to itself. The imageView must be constrained to the top/bottom/left/right of the scrollview. Constraining the centers doesn’t give the scrollview’s content an actual size.

I’ve watched the WWDC 2017 sessions dealing with layout. Which one were you referring to?

Thanks,  
Owen

---

<div class="post-metadata">

**Author:** ![hideyf](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/hideyf/32/81494_2.png) [@hideyf](https://forums.kodeco.com/u/hideyf)\
**Post date:** [June 28, 2017, 5:52pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/6 "2017-06-28T17:52:19Z")

</div>

This is one of the possible solutions using scrollView.contentLayoutGuide

[UIScrollView-AutoLayout](https://github.com/Ricky-Choi/UIScrollView-AutoLayout)

---

<div class="post-metadata">

**Author:** ![owenb](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/owenb/32/101345_2.png) [@owenb](https://forums.kodeco.com/u/owenb)\
**Post date:** [June 28, 2017, 11:46pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/7 "2017-06-28T23:46:22Z")

</div>

I was thinking of a solution similar but not sure that the extra UIView & code are worth the squeeze.

---

<div class="post-metadata">

**Author:** ![frankdrebin123](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/frankdrebin123/32/81494_2.png) [@frankdrebin123](https://forums.kodeco.com/u/frankdrebin123)\
**Post date:** [June 29, 2017, 7:22am UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/8 "2017-06-29T07:22:37Z")

</div>

Session 201 look at the 24:51 (min:sec) mark.

---

<div class="post-metadata">

**Author:** ![owenb](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/owenb/32/101345_2.png) [@owenb](https://forums.kodeco.com/u/owenb)\
**Post date:** [June 29, 2017, 2:43pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/9 "2017-06-29T14:43:29Z")

</div>

Hi frankdrebin123,  
Thanks for forwarding the session info. Somehow I missed this section.  
I’ll look into putting together a clean solution that uses the center anchors and apply it to the tutorial.

Thanks,  
Owen

---

<div class="post-metadata">

**Author:** ![ppdany](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/ppdany/32/77416_2.png) [@ppdany](https://forums.kodeco.com/u/ppdany)\
**Post date:** [July 6, 2017, 1:15am UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/10 "2017-07-06T01:15:51Z")

</div>

Yes please! center anchors would be great because the current solution actually only works the first time the keyboard comes up and is dismissed (and maybe the Xcode Beta is buggy as sometimes not even then) but if you tap again to the text field after the keyboard is dismissed, the keyboard will show up but the view won’t move up. I printed the values to check what’s going on and somehow keyboardFrame.height has a value of 0 (and thus adjustmentHeight = 20) after the first dismiss of the keyboard.

Also, the tutorial says to add a Show Detail segue at the end which makes it impossible to go back to the previous View and leaves no choice but to end the app. The final project has a Show segue instead though, but then how can you hide the top menu like in the Photos app to have a full-screen view?

In any case, great tutorial!  
Thanks!

---

<div class="post-metadata">

**Author:** ![xilinx64](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/xilinx64/32/81494_2.png) [@xilinx64](https://forums.kodeco.com/u/xilinx64)\
**Post date:** [September 11, 2017, 1:20pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/11 "2017-09-11T13:20:38Z")

</div>

Hi!  
I used your code to scroll when the keyboard appears. I use swift 4. But when I use your code the contentInset is set but the view does not scroll automatically. Any Idea?  
Thanks

---

<div class="post-metadata">

**Author:** ![owenb](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/owenb/32/101345_2.png) [@owenb](https://forums.kodeco.com/u/owenb)\
**Post date:** [September 19, 2017, 4:25am UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/12 "2017-09-19T04:25:43Z")

</div>

Hi xilinx64,  
I’m not sure what you mean by ‘not scroll automatically’.  
I just tested with the final project and even with keyboard up on simulator, I can scroll side to side.  
Give me a step by step and maybe I can help 🙂

Owen

---

<div class="post-metadata">

**Author:** ![roman\_emilio](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@roman\_emilio](https://forums.kodeco.com/u/roman_emilio)\
**Post date:** [September 27, 2017, 6:40pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/13 "2017-09-27T18:40:47Z")

</div>

Hi. It doesn’t work well in iOS 11. Any suggestions?

---

<div class="post-metadata">

**Author:** ![lastccx](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@lastccx](https://forums.kodeco.com/u/lastccx)\
**Post date:** [October 9, 2017, 2:22pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/14 "2017-10-09T14:22:25Z")

</div>

Hi, how about setting the Origin Point UIScrollView’s bounds to the center of the screen and then set the image view’s center to CGPoint.zero?

Maybe we could first set the contentSize to zero, then set contentInset to add extra space, and then scroll the (0,0) to the center so that the origin point of the bounds of UIScrollView will be on the center of screen. Next we add imageView, set a frame to imageView and set imageView’s center to zero so that it is centered on screen?

Maybe you could go one step further and make a custom UIScrollView that automatically does the centering of imageView?

---

<div class="post-metadata">

**Author:** ![rohan2817](https://s3.amazonaws.com/cdn.raywenderlich.com/community/forum-assets/noun-game-ghost-878668.png) [@rohan2817](https://forums.kodeco.com/u/rohan2817)\
**Post date:** [October 13, 2017, 12:10pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/15 "2017-10-13T12:10:40Z")

</div>

Hi, This is a very nice tutorial to understand concepts of scrollview. I implemented it my project. But I am facing a problem where I have nearly 4 textfields below each other. This code is moving the scroll more at the bottom if I go on clicking each text field. Any idea how to resolve this issue?

---

<div class="post-metadata">

**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\
**Post date:** [October 14, 2017, 1:41pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/16 "2017-10-14T13:41:22Z")

</div>

@owenb Do you have any feedback on this one? Thank you - much appreciated! :]

---

<div class="post-metadata">

**Author:** ![owenb](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/owenb/32/101345_2.png) [@owenb](https://forums.kodeco.com/u/owenb)\
**Post date:** [October 15, 2017, 3:26pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/17 "2017-10-15T15:26:20Z")

</div>

Please explain what issues you are having.  
Thanks

---

<div class="post-metadata">

**Author:** ![owenb](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/owenb/32/101345_2.png) [@owenb](https://forums.kodeco.com/u/owenb)\
**Post date:** [October 15, 2017, 3:29pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/18 "2017-10-15T15:29:25Z")

</div>

Once change that is needed to the existing tutorial code is to replace **UIKeyboardFrameBeginUserInfoKey** with **UIKeyboardFrameEndUserInfoKey**. This fixes the issue of the scrollview not moving up properly after showing the keyboard the second time.  
This will probably also fix your issue of multiple textfields not showing at the bottom.

I just updated the tutorial with this fix.

---

<div class="post-metadata">

**Author:** ![andyibanez](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/andyibanez/32/76657_2.png) [@andyibanez](https://forums.kodeco.com/u/andyibanez)\
**Post date:** [October 27, 2017, 2:22am UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/19 "2017-10-27T02:22:19Z")

</div>

The site won’t let me post more than one link, so you will have to fix those manually to view them. My apologies.

There are issues when the images are too small. They do not get centered properly.

Take the following screenshot for example:

[![](https://i.imgur.com/6nKDRmT.png) ](https://i.imgur.com/6nKDRmT.png)

It looks fine at first, until you rotate it (put the link together manually):

https:/ /i .imgur. com/QMNumR7.png

On some devices, they look alright. Consider the following screenshot on both iPad and iPhone 7 Plus:

They look good when in portrait:

iPad: [https://i.i](https://i.i) mgur. com/buUh2FC.png  
iPhone: https:/ /i.im gur. com/yYwQOYx.jpg

And look what happens on the iPad when you rotate. It goes to the left whereas it stays properly centered on iPhone:

iPad: https :// i. im gur. co m/aggcckX.png  
iPhone: https:/ /i.im gur. co m/TfDpYCO.jpg

And that’s not the worst that can happen, sometimes, this happens on both iPad and iPhone:

https:/ /i.im gur. com/4Wl9tB U.png

What’s worse is that _sometimes_ rotating the device and back fixes it. Not all the time.

I have tried to fix this by playing with the constraints. Unfortunately I can’t say I’ve had much luck. My only guess is this happens when both width and height dimensions are smaller than the screen.

Any clues on solving this? My web browser displays images for various sources, I can’t guarantee they will always be the same size.

---

<div class="post-metadata">

**Author:** ![andyibanez](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/andyibanez/32/76657_2.png) [@andyibanez](https://forums.kodeco.com/u/andyibanez)\
**Post date:** [October 27, 2017, 8:13pm UTC](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195/20 "2017-10-27T20:13:53Z")

</div>

So far I have been able to understand that rotating on iPad won’t call traitCollectionDidChange. It’s a bit of progress…

EDIT:

```
Alright, I was able to solve it on iPad by adding this:

    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    coordinator.animate(alongsideTransition: { (context) in
        self.updateConstraintsForSize(self.view.bounds.size)
    })
}

```

There is still the fact that small images occasionally show misplaced when the view loads, but I’m sure I will get it eventually.

[Next page](https://forums.kodeco.com/t/uiscrollview-tutorial-getting-started/31195.md?page=2)