One of the challenges every iOS developer faces on regular basis is loading data from the server, while keeping the UI responsive.
In this article we’re going to build a simple CollectionView Controller that fetches images from the server asynchronously while allowing the user to interact with the UI by either scrolling up, down, or selecting an image to view it in full screen. This tutorial assumes that you understand the basics of iOS development, and have worked with either UICollectionViewController or UITableViewController before but no prior networking or concurrency knowledge is required.
In this tutorial we will learn how to:
- Offload the image fetching from the Main UI thread to make the User Inferface responsive
- Avoid a common scenario when the wrong images are displayed in the cells after a scroll due to reusable cells
- Cache the images so that we don’t re-download them next time the cells become visible
- Only download images for visible cells. When the cell becomes invisible, stop the download to save bandwidth for the newly visible cells
- If the image download was stoped due to the cell becoming invisible, save the download progress so that it can be resumed next time it becomes visible again