Intro to iOS Development
  • Welcome
    • β˜€οΈIntroduction
    • 🐣Getting Started
    • 🐦Course Staff
  • Logistics
    • πŸ“œSyllabus
    • πŸ—“οΈSchedule
    • πŸ–ŠοΈGrading
    • πŸ™‹β€β™‚οΈOffice Hours
    • Ed Discussion
  • Assignments
    • 🍼A1: Swift Basics
    • πŸ§‘A2: Profile
    • πŸ’¬A3: ChatDev
    • πŸ‘¨β€πŸ³A4: ChefOS
    • πŸ‘¨β€πŸ³A4: ChefOS - SwiftUI
    • πŸ“±Hack Challenge
      • πŸ†FA23 Winners
  • Lectures
    • 1️⃣Logistics + Swift Basics
    • 2️⃣UIKit + AutoLayout
  • 3️⃣MVC + Navigation + Delegation
  • 4️⃣UITableView
  • 5️⃣UICollectionView
  • 6️⃣Networking I
  • 7️⃣Networking II
  • 8️⃣SwiftUI I
  • 9️⃣SwiftUI II
  • πŸ”ŸPersistence + SnapKit
  • πŸ””(11) Notifications
  • 🌎(12) Deployment and MapKit
  • Chapters
    • πŸ–οΈIntroduction
    • ☁️Git + GitHub
      • 1️⃣Git Installation
      • 2️⃣Git Basics
      • βž•Git+
    • 🐣Swift Basics
      • 1️⃣Variables and Constants
      • 2️⃣Data Types
      • 3️⃣Operators
      • 4️⃣Data Structures
      • 5️⃣Conditionals
      • 6️⃣Loops
      • 7️⃣Functions
      • 8️⃣Closures
      • 9️⃣Optionals
    • 🧰UIKit + AutoLayout
      • 1️⃣Classes
      • 2️⃣UIKit
      • 3️⃣AutoLayout
    • πŸ“ΊMVC + Navigation + Delegation
      • 1️⃣MVC
      • 2️⃣Navigation
      • 3️⃣Delegation
    • πŸ“UITableView
      • 1️⃣What is a UITableView?
      • 2️⃣UITableView Setup
    • πŸ“šUICollectionView
      • 1️⃣What is a UICollectionView?
      • 2️⃣UICollectionView Setup
    • 🌐Networking I
      • 1️⃣HTTP Requests
      • 2️⃣Callbacks
      • 3️⃣Codable
    • 🌍Networking II
      • 1️⃣Alamofire
      • 2️⃣GET Requests
      • 3️⃣POST Requests
      • 4️⃣URLSession
    • πŸ’ΎPersistence + SnapKit
      • 1️⃣Persistence
      • 2️⃣SnapKit
    • πŸ•ŠοΈSwiftUI
      • 1️⃣Introduction to SwiftUI
      • 2️⃣Getting Started with SwiftUI
      • 3️⃣Views + Modifiers
      • 4️⃣Layouts
      • 5️⃣Navigation
      • 6️⃣Property Wrappers
    • πŸŽ›οΈWidgets
      • 1️⃣Introduction to Widgets
      • 2️⃣Setting Up Widgets
      • 3️⃣Building Widgets
      • 4️⃣Configuring Widgets
    • 🧱Project Foundation
    • βœ…Testing
      • 1️⃣Unit Testing
    • πŸ‘£Debugging
      • 1️⃣OSLog
      • 2️⃣Crashlytics
      • 3️⃣Analytics
    • ☁️CI/CD
      • 1️⃣Xcode Cloud
      • 2️⃣AppStore Shipping
  • Guides
    • πŸ”¨Xcode Project Setup
    • 🎨Figma
    • πŸ“¬Postman
    • πŸ₯₯CocoaPods
    • 🧰UIKit Handbook
    • πŸ“‘Tab Views
      • UITabBarController
      • TabView
  • Work in progress
    • 🧡Concurrency
    • 2️⃣UI Testing
    • πŸ•Reactive Programming
    • 🧠Memory Management
      • πŸ”ARC
    • πŸ“¦Storage
    • πŸ“£Notifications
  • Archived
    • SP24
      • Logistics
        • πŸ“œSyllabus
        • πŸ—“οΈSchedule
        • πŸ–ŠοΈGrading
        • πŸ™‹β€β™‚οΈOffice Hours
      • Assignments
        • 🍼A1: Swift Basics
        • πŸ§‘A2: Profile
        • πŸ’¬A3: ChatDev
        • πŸ‘¨β€πŸ³A4: ChefOS
        • πŸ“±Hack Challenge
          • πŸ†FA23 Winners
      • Lecture
        • 0️⃣Course Intro + Logistics + Git Setup
        • 1️⃣Swift Basics
        • 2️⃣UIKit + AutoLayout
        • 3️⃣MVC + Navigation + Delegation
        • 4️⃣UITableView
        • 5️⃣UICollectionView
        • 6️⃣Networking I
        • 7️⃣Networking II
        • 8️⃣Persistence + SnapKit
        • πŸ”ŸSwiftUI
        • πŸ”’TabViews
    • FA23
      • Logistics
        • 🐣Getting Started
        • 🐦Course Staff
        • πŸ“œSyllabus
        • πŸ—“οΈSchedule
        • πŸ–ŠοΈGrading
        • πŸ™‹β€β™‚οΈOffice Hours
      • Assignments
        • 🍼A1: Swift Basics
        • πŸ§‘A2: Profile
        • πŸ’¬A3: ChatDev
        • πŸ‘¨β€πŸ³A4: ChefOS
        • πŸ“±Hack Challenge
          • πŸ†FA23 Winners
      • Lectures
        • 0️⃣Course Intro + Logistics
        • 1️⃣Swift Basics
        • 2️⃣UIKit + AutoLayout
        • 3️⃣MVC + Navigation + Delegation
        • 4️⃣UITableView
        • 5️⃣UICollectionView
        • 6️⃣Networking I
        • 7️⃣Networking II
        • 8️⃣Persistence + SnapKit
        • πŸŽ›οΈWidgets
          • πŸ‘ΌIntroduction to Widgets
          • βš’οΈSetting Up Widgets
          • 🧱Building Widgets
          • πŸ‘¨β€πŸ’»Configuring Widgets
        • πŸ”ŸSwiftUI
    • SP23
      • Logistics
        • Lecture Schedule
        • Syllabus
        • Grading
        • SP23 Office Hours
      • Chapters
        • 1. Intro to Swift & Xcode
          • Lecture Handout
          • Lecture Demo
          • 🍼Project: Swift Basics
        • 2. UIKit and AutoLayout
          • Lecture Handout
          • Lecture Demo
          • πŸ›’Project: UIKit + AutoLayout
        • 3. Navigation, MVC, and Delegation
          • Lecture Handout
          • Lecture Demo
          • Project: Navigation + Delegation
        • 4. UITableView
          • Lecture Handout
          • Lecture Demo
          • Project: UITableView
        • 5. UICollectionView
          • Lecture Handout
          • Lecture Demo
          • Project: UICollectionView
        • 6. Networking I
          • Lecture Handout
          • Lecture Demo
          • Project: Persistence
        • 7. Networking II
          • Lecture Handout
          • Lecture Demo
            • Message Board
          • Project: Networking II
        • 8. Swift UI
        • 9. CocoaPods
          • 🍫Lecture Handout
          • πŸ§‘β€πŸ³Lecture Demo
      • Cheat Sheets
        • Setting Up a New Xcode Project
        • Submitting Your Projects
        • Setting Up CocoaPods
    • 2022
      • SwiftUI
    • 2021
      • Adding Flare
      • Project: UIView Animations (Optional - Extra Credit)
      • UIView Animations
      • Xcode Tips and Tricks
    • 2019
      • Firebase
      • Persistence: UserDefaults
  • Swift Guide (ARCHIVED)
    • About this Textbook
    • Documentation
    • Constants and Variables
      • Variable Properties
      • Lazy and Static Variables
    • Functions
    • Ranges
    • Arrays
      • Basic Array Operations
      • Iteration and Enumeration
      • Advanced Array Operations
    • Tuples
    • Conditions and While Loops
    • For Loops
    • Enums and Switches
      • Enums with Associated Values
      • Indirect Enums
    • Classes and Structs
    • Optionals
    • Dictionaries
      • Dictionary Implementation
    • Closures
    • Constraints
    • Generics
    • Protocols
      • Protocols With Associated Types
    • Casting
    • Errors
    • Networking
      • Result
    • Inout
Powered by GitBook
On this page
  • What is a UICollectionView?
  • Why are UICollectionViews Important?
  • UICollectionView Examples
  • Using a UICollectionView
  • Setting Up a UICollectionView
  • Important Protocols: UICollectionViewDataSource, UICollectionViewDelegate, and UICollectionViewDelegateFlowLayout
  • 1. UICollectionViewDataSource
  • 2. UICollectionViewDelegate
  • 3. UICollectionViewFlowLayoutDelegate
  • Reference
  • PDF Download

Was this helpful?

Export as PDF
  1. Archived
  2. SP23
  3. Chapters
  4. 5. UICollectionView

Lecture Handout

This lecture covers UICollectionViews -- a widely used UIKit component. You'll notice that UICollectionViews are very similar to UITableViews!

Previous5. UICollectionViewNextLecture Demo

Last updated 2 years ago

Was this helpful?

What is a UICollectionView?

A collection view (UICollectionView) is a subclass of UIScrollView, which means that the user can scroll through it, either horizontally or vertically. Just like a table view, a collection view consists of sections where each section consists of 3 parts: a header, cells, and a footer. However, unlike a table view (in which each cell is constrained to be the full width of the table view), the size of the cells in a collection view can be set. In other words, a collection view is a more dynamic, customizable table view.

Why are UICollectionViews Important?

Like table views, UICollectionViews are an extremely powerful type of view and are used in almost all of the successful apps today (i.e. Instagram, Photos, Stories, etc.). They provide an easy way to display a lot of information in a compact, grid-like manner.

UICollectionView Examples

Example 1: Netflix Each category (e.g. "Ensemble TV Shows", "Women Who Rule The Screen", etc.) is a section is a UICollectionView. Each show is a UICollectionViewCell.

Example 2: Instagram The entire feed is a UICollectionView, and each image is a UICollectionViewCell.

Using a UICollectionView

Setting Up a UICollectionView

Similar to a table view, in addition to the usual initialization process for initializing any UIView (calling the init function, set translatesAutoresizingMaskIntoConstraints to false, adding the view as a subview to parent view, and setting up constraints), there are 4 additional things that you should do:

  1. Set the collectionView’s delegate

  2. Set the collectionView’s dataSource

  3. Register your custom UICollectionViewCell class

  4. (Only for UICollectionViews!) Initialize the collectionView with a

    UICollectionViewLayout (we use UICollectionViewFlowLayout). Your collectionView’s delegate should also conform to UICollectionViewDelegateFlowLayout.

In terms of 4, the initializer for a UICollectionView takes in a frame: CGRect and a layout: UICollectionViewLayout. In most cases, we just use an instance of UICollectionViewFlowLayout for this layout parameter. Why? Well, a UICollectionViewFlowLayout is a β€œlayout object that organizes items into a grid with optional header and footer views for each section” -- which is what we want in most cases!

Some nice properties of UICollectionViewFlowLayout that we can set to customize our collectionView are scrollDirection (vertical or horizontal), minimumLineSpacing (the minimum spacing to use between rows in the grid), minimumInteritemSpacing (the minimum spacing to use between items in the same row), and a lot more.

The following is an example of initializing a UICollectionView:

let layout = UICollectionViewFlowLayout()

layout.scrollDirection = .vertical

layout.minimumLineSpacing = padding // optional

layout.minimumInteritemSpacing = padding // optional

collectionView = UICollectionView(frame: .zero, collectionViewLayout:
layout)

collectionView.translatesAutoresizingMaskIntoConstraints = false

collectionView.delegate = self

collectionView.dataSource = self

collectionView.register(PhotoCollectionViewCell.self,
forCellWithReuseIdentifier: photoCellReuseIdentifier)

Let's go through what this code does, line by line. 1: Initialize a UICollectionFlowLayout instance. 2: Set the layout's scrollDirection to be vertically-scrolling. 3 & 4: Set the minimumLineSpacing and minimumInteritemSpacing to be some constant we defined in a padding variable. This means that items in the same row will have spacing between them equal to the value stored in padding and items on different rows will also have spacing between them equal to padding. (Like the Instagram example!) 5: Initialize our collectionView using the layout instance we just created. 6: Set translatesAutoresizingMaskIntoConstraints to false. 7 & 8: Set the delegate and dataSource to be self, which is the view controller that holds this collectionView. 9: Register our custom PhotoCollectionViewCell to the collectionView. This tells collectionView that we will be dequeueing PhotoCollectionViewCells.

Important Protocols: UICollectionViewDataSource, UICollectionViewDelegate, and UICollectionViewDelegateFlowLayout

We look at this diagram again to understand the delegation that occurs. Even though the diagram uses UITableViewDataSource /UITableViewDelegate, this is basically the same as UICollectionViewDataSource/UICollectionViewDelegate except replace β€œrows” with β€œitems”.

1. UICollectionViewDataSource

A UICollectionViewDataSource (in most cases, the view controller) must conform to certain methods and is β€œresponsible for providing the data and views required by a collection view.” The one method that you should always implement is:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
	let cell = collectionView.dequeueReusableCell(withReuseIdentifier: photoCellReuseIdentifier, for: indexPath) as! PhotoCollectionViewCell
	let dataModel = dataModelArray[indexPath.item]
	cell.configure(for: dataModel)
	return cell
}

We'll often refer to this method as cellForItemAt. This function requires you to return a UICollectionViewCell which will be inserted at a particular location in the collectionView.

One parameter in this function that is important to take note of is indexPath, which is of type IndexPath. The indexPath has two important properties that you may sometimes need: 1. item (Note: for tableViews, we have rows instead of items), and 2. section Thus, if you wanted to see what item or section the cell you’re returning is going to be used for, you can just call indexPath.item or indexPath.section.

Once again, let's go through the code line by line: 2. Dequeue the appropriate cell using the associated reuse identifier that you used when you registered your custom cell to the collectionView. Make sure you cast the dequeued cell as your custom cell class! 3 & 4. It's best practice to have some configure(...) function as a part of your custom cell class that takes in some data or model object to configure the views inside your cell. Let's say you're using some dataModelArray as the data source for your collection view. You can access the dataModel object that this item represents using dataModelArray[indexPath.item]. 5. Return the configured cell!

Another method that you should implement is:

func collectionView(_ collectionView: UICollectionView, 
numberOfItemsInSection section: Int) -> Int {
   return dataModelArray.count
 }

We'll refer to this method as numberOfItemsInSections.This function requires you to return an integer representing the number of rows that the section section should have. Usually, the number of cells that you want to display in your collection view is dependent on the number of model objects that you have. For example, if you wanted to use a collection view to display a collection of photos, you would probably have an array of Photo objects. Thus, the number of cells you need in your table view is just the number of photos in that array, which you can get from photosArray.count. However, it is also possible that you just want to create a static number of cells, in which case you can just return that constant!

Finally, while not required, you may also want to implement the following:

 func numberOfSections(in collectionView: UICollectionView) -> Int {
   return 2
 }

As the name implies, this allows you to control the number of sections that your collection view has. If you don't implement this function, your collection view will by default have one section.

2. UICollectionViewDelegate

A UICollectionViewDelegate does not actually have to conform to any specific methods since all the methods are optional. However, one useful one that you may find yourself using a lot is:

func collectionView(_ collectionView: UICollectionView,
 didSelectItemAt indexPath: IndexPath) {
  // Perform some action upon selecting an item
}

We'll refer to this function as didSelectItemAt. This is the function that gets called whenever one of the cells in collectionView is selected by the user. Thus, if you want to trigger some sort of action or animation upon selection, this is the place you would do it. For example, if you wanted to change some data model property upon selecting a cell, you could once again access that specific data model object using indexPath.item.

3. UICollectionViewFlowLayoutDelegate

Lastly, a UICollectionViewDelegateFlowLayout also does not actually have to conform to any specific methods since all the methods are optional. However, a method that you should implement is:

 func collectionView(_ collectionView: UICollectionView, layout
 collectionViewLayout: UICollectionViewLayout, sizeForItemAt
 indexPath: IndexPath) -> CGSize {
   return CGSize(width: 50, height: 50)
 }

We'll refer to this method as sizeForItemAt. This method requires you to return a CGSize that represents the size of the cell at indexPath. Thus, if we wanted each of our cells to be 50 pixels by 50 pixels, we would return CGSize(width: 50, height: 50), as in the example code snippet.

Reference

You can find a list of all the UICollectionViewDelegate, UICollectionViewDataSource, & UICollectionViewDelegateFlowLayout methods in the Apple documentation, linked below.

PDF Download

For explanations on what the first 3 mean, refer to .

Lecture 4: UITableViews
UICollectionViewDelegate
UICollectionViewDataSource
UICollectionViewDelegateFlowLayout
8MB
L5-UICollectionViews.pdf
pdf
UICollectionViews