MagazineLayout

MagazineLayout is a UICollectionViewLayout subclass for laying out vertically scrolling grids and lists of items. Compared to UICollectionViewFlowLayout, MagazineLayout supports many additional features:

• Item widths based on a fraction of the total available width

  • Full width for a list layout (similar to UITableView)
  • Half-width, third-width, etc. for a grid layout
• Self-sizing in just the vertical dimension
• Per-item self-sizing preferences (self-size and statically-size items anywhere in your collection view)
• Self-sizing headers and footers
• Hiding or showing headers and footers on a per-section basis
• Pinned (sticky) headers and footers
• Section backgrounds that can be hidden / visible on a per-section basis
• Customizable insert and delete animations for items and supplementary views

Other features:

• Specifying horizontal item spacing on a per-section basis
• Specifying vertical row spacing on a per-section basis
• Specifying section insets on a per-section basis
• Specifying item insets on a per-section basis

These capabilities have allowed us to build a wide variety of screens in the Airbnb app, many of which are among our highest-traffic screens. Here are just a few examples of screens laid out using MagazineLayout:

Homes Search	Experiences Search	Wish List	Home