Custom Collection View Layout

Mar 7 2017 · Video Course (1 hr, 3 mins) · Intermediate

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

2/5 6 Ratings

Version

  • Swift 3, iOS 10, Xcode 8

Introduction

3:20 Free

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.

1

Flow Layout Basics

6:29 Free

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

2

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.

3

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.

4

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.

5

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.

6

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.

7

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.

8

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.

9

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.

10

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.

11

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.

12

Conclusion

2:25

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

13

Contributors

Comments