Xcoding with Alfian

Mobile development articles and tutorials

Video Tutorial - UICollectionView from Scratch

Alt text

In this 3 part series we will learn how to implement UICollectionView from scratch using UICollectionViewFlowLayout and UICollectionViewDataSource:

  1. Setting and configuring UICollectionViewFlowLayout to show grid based vertical layout with multiple sections.
  2. Using UICollectionViewDataSource as the source of data to render in Collection View.
  3. Building Self-Sizing CollectionView Cell and supplementary view with auto layout programatically. With Self-Sizing Cell, the app will supports Dynamic Font Type for accessibility.
  4. Using Collection View performBatchUpdates to insert, remove, sections and indexPaths in single transaction using Swift 5.1 Collection Diffing API.
  5. Using SwiftUI Live Preview on UIKit based UIView and UIViewController for rapid UI prototyping in Xcode.

Part 1 - Collection View Cell & Supplementary View


In this tutorial video, we'll build the Character Collection View Cell and Supplementary Collection Reusable Header View using programatic auto layout constraints + SwiftUI Live Preview!

Part 2 - Flow Layout | Self-Sizing Cells | Data Source


In this part 2 of UICollectionView From Scratch, we will continue to: 1. Create Single Section Collection View 2. Implement UICollectionViewDataSource 3. Setup Collection View Flow Layout 4. Adapt Self-Sizing Cells for accessibility 5. Adapt to Trait Collection Changes

Part 3 - Data Diffing | Batch Updates | Multiple Sections


In this part 3 of UICollectionView From Scratch, we will continue to: 1. Implement Single Section Collection View Batch Updates with 1D array Data Diffing. 2. Implement Multiple Sections Collection View Batch Updates with 2D array Data Diffing.