Talk at iOS Dev Scout SG. Apr 2021

1. Memory friendly UIScrollView
Yuichi Fujiki from ShopBack
28.04.2021
iOS DevScout Meetup
Apr 2021

2. A little about myself
• Senior iOS engineer at ShopBack
• In the
f
ield since 2011
• Hobby is to experiment with my body
2
Introduction

3. A little about ShopBack
3
Introduction

4. Agenda - Memory Friendly UIScrollView
• Image viewer
• Nested scroll view
• https://github.com/yfujiki/
iOSDevScoutMeetUpApr2021
4
Agenda

5. Image viewer
• What we want to build
5
Image Viewer

6. Simple version
• UIImageView inside UIScrollView
• Largest image for max zoom level
6
Image Viewer - Simple Version

7. Simple version
• Just let UIScrollView handle zoom
7
Image Viewer - Simple Version
Pitfall!

8. What is the issue?
• We are using too much memory
8
Image Viewer - Simple Version

9. • We will get pixellated view when zooming in
What if we just use small image?
9
Image Viewer - Simple Version

10. • Zoom level 1
Different images for different zoom levels
10
Image Viewer - CATiledLayer Version

11. • Zoom level 2
Different images for different zoom levels
11
Image Viewer - CATiledLayer Version

12. • Zoom level 4
Different images for different zoom levels
12
Image Viewer - CATiledLayer Version

13. CATiledLayer version
• CATiledLayer inside UIScrollView
13
Image Viewer - CATiledLayer Version
Ref: https://download.developer.apple.com/videos/wwdc_2010__sd/session_104__designing_apps_with_scroll_views.mov

14. Key concept about zoom levels
14
Image Viewer - CATiledLayer Version
UIScrollView
CATiledLayer
zoomScale = 1 zoomScale = 2 zoomScale = 4
levelOfDetail = 0 levelOfDetail = 1 levelOfDetail = 2
• levelsOfDetail = 3
• levelsOfDetailBias = 2
zoomScale = 1 is defined by
the original bounds of
the content view

15. Let’s say we set
f
irst bounds with 4 tiles…
15
Image Viewer - CATiledLayer Version
UIScrollView
CATiledLayer
zoomScale = 1 zoomScale = 2 zoomScale = 4
levelOfDetail = 0 levelOfDetail = 1 levelOfDetail = 2
zoomScale = 0.5 zoomScale = 1 zoomScale = 2
levelOfDetail = -1 levelOfDetail = 0 levelOfDetail = 1
• levelsOfDetail = 3
• levelsOfDetailBias = 1

16. Code - zoomScale = 1
Image Viewer - CATiledLayer Version
zoomScale = 1

17. Code - maximum zoom scale
Image Viewer - CATiledLayer Version
zoomScale = 4

18. Code - minimum zoom scale
Image Viewer - CATiledLayer Version
828x465

19. Code - levelsOfDetail
Image Viewer - CATiledLayer Version
Level 0
Level 1
Level 2

20. Code - drawRect
Image Viewer - CATiledLayer Version

21. Results
Image Viewer - CATiledLayer Version
UIImageView CATiledLayer
For precise measurement,
always use Instruments + real device

22. Nested scrollviews
• What we want to build
• UITableViews inside UIScrollView
22
Nested Scrollviews

23. Nested scrollviews
• What we want to build
• UITableViews inside UIScrollView
23
Nested Scrollviews
• Can’t we just use single UITableView
with multiple sections? - YES

24. Nested scrollviews
• In general, we could face complex layout requirements
that demands nested scrollview
24
Nested Scrollviews
• Can’t we use UICollectionViewCompositionalLayout?
• YES!!! But with limitations
• >= iOS 13
• Some complex layouts are still not possible

25. • Make UITableView frame to
be the same size as it’s content size
• Make UITableViews frames to
f
ill up
entire contentSize of UIScrollView
• UIScrollView (gray) will control all scrolling
Simple version
25
Nested Scrollviews - Simple Version

26. Implementation
26
Nested Scrollviews - Simple Version
Top Constraint
Vertical
Constraint
Bottom Constraint

27. • UITableView’s cell won’t reuse
• All cells for both UITableViews will be
loaded into memory
What is the issue?
27
Nested Scrollviews - Simple Version

28. • Outer ScrollView handles scroll when
both TableViews are visible
• Let the inner TableView handle scroll when
the TableView occupies the view
Switch Scrolling Control
28
Nested Scrollviews - Scrolling Switching Version
• Setting the content area properly
• Allow both gesture recognisers to work
• Switching scrolling control at the right timing

29. Implementation - setting content area
29
Nested Scrollviews - Scrolling Switching Version
Height
Constraint
Top Constraint
Bottom Constraint

30. Implementation - enable gesture
30
Nested Scrollviews - Scrolling Switching Version
• Without this, UITableView (inner) captures all gestures and UIScrollView
(outer) does not get any gesture at all

31. Implementation - switch scrolling control
31
Nested Scrollviews - Scrolling Switching Version

32. Results
32
Nested Scrollviews - Scrolling Switching Version
Simple Switch Scrolling

33. • Outer ScrollView handles scroll all the time
• As the viewport moves, calculate the frame
of each tableview to
f
it inside the viewport
Control the frames
33
Nested Scrollviews - Frame Controlling Version
Ref: https://oleb.net/blog/2014/05/scrollviews-inside-scrollviews/

34. Implementation
34
Nested Scrollviews - Frame Controlling Version

35. Implementation
35
Nested Scrollviews - Frame Controlling Version
Bounds
of
Scroll
View
Content
Area
of
Scroll
View
Content
Area
of
Table
View
Frame
of
Table
View

36. Implementation
36
Nested Scrollviews - Frame Controlling Version
Bounds
of
Scroll
View
Content
Area
of
Scroll
View
Content
Area
of
Table
View
Frame
of
Table
View

37. Implementation
37
Nested Scrollviews - Frame Controlling Version
Bounds
of
Scroll
View
Content
Area
of
Scroll
View
Content
Area
of
Table
View
Frame
of
Table
View

38. Implementation
38
Nested Scrollviews - Frame Controlling Version
Bounds
of
Scroll
View
Content
Area
of
Scroll
View
Content
Area
of
Table
View
Frame
of
Table
View

39. Results
39
Nested Scrollviews - Frame Controlling Version
Simple Frame Controlling

40. Conclusions
• Naive usage of UIScrollView leaves a lot of margin to
improve memory usage
• Keep experimenting. Even going through already
treaded path yourself will give you great insight
• https://github.com/yfujiki/iOSDevScoutMeetUpApr2021
40
Conclusion