How to handle UIScrollView in Swift

UIScrollView

A view that allows the scrolling and zooming of its contained views. In other words, UIScrollView is a view with an origin that’s adjustable over the content view. it clips the content to its frame, which generally coincides with that of the application’s main window. A scroll view tracks the movements of fingers, and adjusts the origin accordingly.

I think the most important part of the scroll view is to understand how it actually works. Therefore I summarize as “the origin will be adjustable over the content view and it will clip the content to its frame.”

When you create a UIScrollView, you will see two layout guides provided.

• frameLayoutGuide — The layout guide based on the untransformed frame rectangle of the scroll view. = every content in scroll view.
• contentLayoutGuide — The layout guide based on the untranslated content rectangle of the scroll view. = the view we see while scrolling only.

Therefore when you create scrollView and make auto layout for your contents, you should link the constraint to the content layout guide not to the scroll view.

Below are the scroll view features that i summarized:

• must have content because the scrollview should know the size of the content view so it knows when to stop scrolling.
• tracts the movements of fingers, and adjusts the origin accordingly.
• The scroll view itself does no drawing except for displaying vertical and horizontal scroll indicators
• it bounces back when scrolling exceeds the bounds of the content.
• As users scroll in the scroll view, the object adds and removes subviews as necessary.
• a scroll view has no scroll bars, it must know whether a touch signals an intent to scroll vs an intent to track a subview in the content.

👉🏻 it determine by touch down event by starting a timer and, before the timer fires, seeing if touching finger makes any movement. if the timer fires without any changes in position, the scroll view cancels any tracking events. while, if there’s any movement from the user, the scroll view cancels any tracking in the subview and performs the scrolling itself.

To see the changes on the scroll view, you can override the methods as below

• touchesShouldBegin(_:with:in:) — when a finger touches down in displayed content -> returns Bool, return false if you don’t want the scroll view to send event messages to view. if you want a view to receive those messages, return true(by default).
• isPagingEnabled — A Boolean value that determines whether paging is enabled for the scroll view., if the value is true = the scroll view stops on multiples of the scroll view’s bounds when the user scroll. and the default value is false.
• touchesShouldCancel(in:) — returns whether to cancel touches related to the content subview and start dragging. -> Bool
• also handles zooming and panning of content by pinch-in and out gesture.

UIScrollView class can have a delegate and must adopt the UISCrollViewDelegate protocol.

• [required] viewForZooming(in:) — Asks the delegate for the view to scale when zooming is about to occur in the scroll view.
• [required] scrollViewDidEndZooming(_:with:AtScale:) — Tells the delegate when zooming of the content in the scroll view completed.
• [must be different] maximumZoomScale and minimumZoomScale — A floating-point value that specifies the maximum scale / minimum scale factor that can be applied to the scroll view’s content.

So how to make scrollView in the easiest way?

1. create UIScrollView and add constraint to 0 to every side (top, bottom, left, right).

then you will see some errors but just ignore atm 😃

2. To make it simple and easy, it’s better to create a UIView inside a scroll view. so that you can set the content size easily because UIScrollview must know its content size.

Alternatively, it’s not necessary for you to create a UIView(but creating an outer view is much easier!), you can also create anything that you need like label, button etc but make sure you set all the constraints to it (so that it will know its size). just read every steps then you’ll understand what I’m tryin to say…

3. make the view’s top, bottom, left and right constraint to the Content Layout guide as 0.

4. Now we should let the frame know what to show while scrolling. so we should set the its width same as the scroll view’s frame layout. (ratio as 1)

5. Lastly, the view should have its size but since we don’t have any content inside the view, let’s make the view’s height as 1400 to check if it really works.

6. when you run the simulator, it works well! but if you wanna dynamically resize the view, delete the height of the view, and set the height for the contents inside the view and make constraints to it. So that the view will calculate and know its size (height).

That’s it! I don’t know if you guys can fully understand what I’m trying to explain but I hope it helped you a little bit of understanding UIScrollView. I had a really hard time using UIScrollView at first, that’s why I decided to make an article for it. If i have any mistakes or anything to add up, please feel free to comment and let me know 😃😃

If you need some reference, go to https://developer.apple.com/documentation/uikit/uiscrollview

for more detail!