Custom Collection View Layout

Learn how to create a carousel layout, a stretchy headers layout, a mosaic layout, and more using UICollectionViewLayout. By Michael Briscoe.

Leave a rating/review
Save for later
Comments
Share
01
Toggle description

Learn all about how to customize the layout of collection views in iOS. You'll start with the basics, such as manipulating the default flow layout using a delegate, and by subclassing. Then move on to more advanced topics like creating a layout from scratch, changing layout attributes, and dynamic cell content.

02
Toggle description

Learn the basics of how to effectively use UICollectionViewFlowLayout to create custom layouts using a delegate.

Toggle description

You'll begin creating a vertically scrolling carousel layout, where the featured cell is larger, then fades and shrinks as you scroll. Learn about subclassing UICollectionViewFlowLayout and overriding methods to achieve our results.

Toggle description

Learn how to enhance your layouts with custom cells. You'll modify the storyboard, then subclass UICollectionViewCell, to create a custom cell that resembles a collectible playing card.

Toggle description

Learn how to snap a "featured" cell to a specific scrolling location. You'll override some methods to set a boundary that stops scrolling when a cell is in the center of the view.

Toggle description

Begin creating a vertical scrolling custom flow layout with a large section header at the top. When the user pulls down on the collection view, the header will stretch. Learn how to add and display headers in your custom layout.

Toggle description

Learn how to modify the header so that when the user pulls down on the collection view, not only will the header stretch, but the foreground will scale up, while the background will scale down; giving the impression of depth.

Toggle description

Learn the basics of UICollectionViewLayout, such as when to use it versus UICollectionViewFlowLayout, the key methods to provide your layouts behavior, and what's going on under the hood.

Toggle description

You'll begin creating a mosaic style, multicolumn layout, with cells of varying height. Learn how to define and implement a custom delegate protocol to calculate each cells height.

Toggle description

Learn about subclassing UICollectionViewLayoutAttributes to add a custom property that will store the image height for each item. You'll also see how to override apply(_:) in the cell class, to use the new attribute.

Toggle description

You'll finish up the Mosaic layout as you learn how to dynamically size each cell, independently, based on its content. See how to use the AVMakeRect() method to calculate an image height, and calculate a labels height based on it's font and size.

Toggle description

Learn how you can use multiple custom layouts within the same app. You'll see how to load and configure an additional layout, invalidate the old layout, and set the new layout to smoothly transition into view.

Conclusion 2:25
Toggle description

Review what you've learned about creating custom collection view layouts, and where to go from here.

Instructors

Michael Briscoe

Contributors

Michael Briscoe

Instructor

Over 300 content creators. Join our team.