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.

4.6 (36) · 2 Reviews

Download materials
Save for later
Comments
Share

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

01
Toggle description

What are collection views? Find out where they are used and the projects you are going to build in this course.

Toggle description

Take a high level tour of collection view layouts and how they are composed together.

Toggle description

Start building a new collection-view-focused app from scratch. Compose layouts using UICollectionViewCompositionalLayout.

Toggle description

Start customizing the appearance of the collection view by creating custom cells.

Toggle description

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.

Toggle description

Create data snapshots to provide the data source with initial data.

Toggle description

Challenge time! In this challenge, reconfigure the layout to display numbers in a grid instead of a list.

Conclusion 1:13
Toggle description

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

Toggle description

Prior to compositional collection views, flow layouts were the tool of choice. Find out why you should learn about this "old school" way!

Toggle description

Understand how flow layouts are used to specify item size, inter-item spacing and more.

Toggle description

Start defining the layout of your collection view using Interface Builder.

Toggle description

Learn how to define any object to act as the data source for a collection view using the UICollectionViewDataSource protocol.

Toggle description

Start creating your very own custom data source object to help the collection view set itself up.

Toggle description

With a data source defined, you can start adding methods to provide the collection view with necessary information.

Toggle description

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.

Toggle description

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.

Toggle description

The collection view is still pretty static. In this episode, handle user input to show detailed information about each emoji when tapped.

Toggle description

Find out how to add new emoji to the view by updating both the collection view and the data source.

Toggle description

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.

Toggle description

In this challenge, implement the delete logic to get rid of emoji when the delete button is pressed.

Conclusion 2:11
Toggle description

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

Toggle description

Find out how to configure custom data models so that they can be used in diffable data sources and snapshots.

Toggle description

Learn about orthogonal scrolling and how to build horizontal scrolling sections inside a vertical collection view.

Toggle description

Take on a sizable challenge and implement all the data source logic for the collection view!

Toggle description

Learn how to build section headers using supplementary views and diffable data sources.

Toggle description

There's more than one way to switch view controllers. Learn how to instantiate Storyboard view controllers in code and present them programmatically.

Toggle description

In this episode, learn how to dynamically update a data source using new snapshots.

Toggle description

Everything is easier using diffable data sources, including deleting items. Learn how to apply changes and animate them in this episode.

Toggle description

Just like sections, items can also contain supplementary views. Here, you'll implement a badge icon for queued courses using badge supplementary views.

Toggle description

Like inserts and deletes, diffable data sources easily handle reordering data with new snapshots. Add logic to reorder your queue when courses are updated.

Conclusion 1:58
Toggle description

Wrap up this section by reviewing what you've learned in the course, and find out where to go next!

Up next

iOS & Swift
UIKit Animation
Get started animating your views in iOS! Learn to control changes in their visible properties over time, a... more

Instructors

Pasan Premaratne

Contributors

Pasan Premaratne

Instructor

Ehab Amer

Tech Editor

Christine Sweigart

Editor

Adriana Kutenko

Illustrator

Over 300 content creators. Join our team.