Collection Views
Learn all about using collection views in iOS to build composable and flexible layouts both in code and using Interface Builder. You’ll learn how to implement custom cells, animate changes and work with different types of data sources By Pasan Premaratne.
Learning path
This is part of the iOS User Interfaces with UIKit learning path. View path.
Who is this for?
This course is part of our iOS and Swift for Beginners Learning Path. You're ready for this course if you're working through that learning path in order, or you're someone who has just a little bit of iOS and Swift experience.
You'll start off by building a simple collection view that displays numbers is rows and grids using brand new diffable data sources and compositional layout APIs.
Then, you'll take a small detour to build an emoji library app using pre-iOS 13 API by implementing data sources and flow layouts.
Finally, you'll combine the two approaches to build a RayWenderlich.com library app that lets you browse courses.
Throughout the course, you'll practice everything you learn with hands-on challenges.
This course isn’t suited for intermediate or advanced developers. If that’s you, check out our intermediate or advanced video courses for more ways to level-up your developer skills!
Covered concepts
- Data Sources
- Diffable Data Sources
- Compositional Layouts
- Flow Layouts
- Structuring layouts in Interface Builder
- Handling touches with UICollectionViewDelegate
- Customizing layouts with UICollectionViewDelegateFlowLayout
- Creating custom collection view cells
- Implementing reusable headers and footers using UICollectionReusableView
Part 1: Building Simple Layouts
What are collection views? Find out where they are used and the projects you are going to build in this course.
Take a high level tour of collection view layouts and how they are composed together.
Start building a new collection-view-focused app from scratch. Compose layouts using UICollectionViewCompositionalLayout.
Start customizing the appearance of the collection view by creating custom cells.
A diffable data source is a dedicated object that handles the provision of data to the collection view. Get a high-level understanding of data sources in this episode.
Create data snapshots to provide the data source with initial data.
Challenge time! In this challenge, reconfigure the layout to display numbers in a grid instead of a list.
Wrap up this section by reviewing what you've learned about collection view layouts and data sources, and find out what's coming up in the next section.
Part 2: Going Old School
Prior to compositional collection views, flow layouts were the tool of choice. Find out why you should learn about this "old school" way!
Understand how flow layouts are used to specify item size, inter-item spacing and more.
Start defining the layout of your collection view using Interface Builder.
Learn how to define any object to act as the data source for a collection view using the UICollectionViewDataSource protocol.
Start creating your very own custom data source object to help the collection view set itself up.
With a data source defined, you can start adding methods to provide the collection view with necessary information.
Interface Builder can only take you so far in customizing the layout object. In this episode, start writing code to add custom sizing and spacing.
The collection view could be organized better to provide info about each emoji. Learn how reusable views can be used to create custom section headers.
The collection view is still pretty static. In this episode, handle user input to show detailed information about each emoji when tapped.
Find out how to add new emoji to the view by updating both the collection view and the data source.
To allow users to delete emoji they need an interface with controls. Find out how to set a collection view to edit mode and customize cell selection.
In this challenge, implement the delete logic to get rid of emoji when the delete button is pressed.
Wrap up this section by reviewing what you've learned about flow layouts and data sources, and find out what's coming up in the next section.
Part 3: Build the Library
Find out how to configure custom data models so that they can be used in diffable data sources and snapshots.
Learn about orthogonal scrolling and how to build horizontal scrolling sections inside a vertical collection view.
Take on a sizable challenge and implement all the data source logic for the collection view!
Learn how to build section headers using supplementary views and diffable data sources.
There's more than one way to switch view controllers. Learn how to instantiate Storyboard view controllers in code and present them programmatically.
In this episode, learn how to dynamically update a data source using new snapshots.
Everything is easier using diffable data sources, including deleting items. Learn how to apply changes and animate them in this episode.
Just like sections, items can also contain supplementary views. Here, you'll implement a badge icon for queued courses using badge supplementary views.
Like inserts and deletes, diffable data sources easily handle reordering data with new snapshots. Add logic to reorder your queue when courses are updated.
Wrap up this section by reviewing what you've learned in the course, and find out where to go next!