Build for iPad

Description: Learn how to improve iPad apps to leverage the increased screen size and additional features of iPadOS, and help people accomplish more with their devices. Discover how you can build detailed multi-column layouts and integrate lists into your app with little adjustment to your existing code. We’ll also explore reducing modality within your views to make it easier to navigate your interface with fewer taps and touches. To get the most out of this session, you should have a general understanding of iPad app layouts and UIKit. For more information, watch “Making Apps Adaptive, Part 1.” And while not necessary, familiarity with UICollectionView may also be helpful. Watch “Advances in Collection View Layout” for an overview. Want to learn more about list creation for your apps? Watch “Lists in UICollectionView”.

Multi-column Split View

The core of a multi-column app is UISplitViewController.

Two-Column layout

Define your split view controller:

let splitViewController = UISplitViewController(style: .doubleColumn)

Set the view for each column:

splitViewController.setViewController(sidebarViewController, for: .primary)
splitViewController.setViewController(myHomeViewController, for: .secondary)

Three-column layout

Define your split view controller:

let splitViewController = UISplitViewController(style: .tripleColumn)

Behind the scenes

Apple wants you to use this so your app adapts to both iPad and iPhone:

  • UISplitViewController handles the columns for you by showing the right view controllers based on size classes.
  • we can specify a different view to be used when in compact mode via the UISplitViewController's setViewController(_:for:) method and passing .compact as the column layout. This view can have a completely different navigation (for example a tab bar).

Display Modes

  • The different ways UISplitViewController can lay out your columns are called DisplayModes: they differ depending on how much space we have and how big they are.
  • To move between these display modes, UISplitViewController automatically creates appropriate buttons and makes them appear in the right places.
  • Some display modes can be shown via gestures, if needed, disable them via the presentsWithGesture property.

Double Column Display Modes

Triple Column Display Modes

Setting the preferred split behavior

Set your app preferred split behavior via preferredSplitBehavior:

.tile:

.displace:

.overlay:

Hide Columns

At any time we can hide any of the columns:

splitViewController.hideColumn(.primary)

splitViewController.showColumn(.supplementary)

Navigation Controllers

Each UISplitViewController column has a navigation controller that's automatically created, and each navigation controller has a navigation bar at the top and an optional toolbar at the bottom.

Lists

Setup your primary/secondary views by building a list via UICollectionView:

let configuration = UICollectionLayoutListConfiguration(appearance: .sidebar)
let layout = UICollectionViewCompositionalLayout.list(using: configuration)
let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)

Then register your cells with the new CellRegistration API:

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, MyItem> { cell, indexPath, item in

    var content = cell.defaultContentConfiguration()

    content.text = item.title
    content.image = item.image

    cell.contentConfiguration = content
}

And create a diffable data source:

let dataSource = UICollectionViewDiffableDataSource<Section, MyItem>(
        collectionView: collectionView
    ) { collectionView, indexPath, item in
   collectionView.dequeueConfiguredReusableCell(using: cellRegistration, 
                                                for: indexPath,
                                                item: item)
}

In the supplementary column do the same but with the plain style:

let configuration = UICollectionLayoutListConfiguration(appearance: .sidebarPlain)
let layout = UICollectionViewCompositionalLayout.list(using: configuration)
let collectionView = UICollectionView(frame: frame, collectionViewLayout: layout)

Missing anything? Corrections? Contributions are welcome 😃

Related

Written by

Federico Zanetello

Federico Zanetello

Software engineer with a strong passion for well-written code, thought-out composable architectures, automation, tests, and more.