MagazineLayout

An iOS collection view layout capable of laying out views in vertically scrolling grids and lists.
2,860
By Bryan Keller

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
Homes Search Experiences Search Wish list Home
Links