Build for iPadをみた #WWDC20

こちらの記事には非公開の情報が含まれているのでApple Developer Programに登録しNDAに合意している方のみ閲覧してください

昨日はDesignの方をみたので今日は実装について見ていきました。

Multi-column Split View

初期化時にスタイルを指定する。これは２列の場合。

.primaryが左側.secondaryが右側になる。

３カラムも同様。

真ん中は.supplementaryと呼ぶ。

Size Classesが.regularの場合はUISplitViewControllerで複数表示しても問題ないが、スライドオーバーやiPhoneの縦向きなど.compactな場合は横のスペースが足りない。こういった場合は特定のSize Classesの場合にViewControllerを設定することができる。

iPadやiPhone専用のUIとするのではなくSize Classesでレイアウトを変更するべき。

表示方法

２カラムの表示方法

３カラムの表示方法

左側のカラムはボタンや左端をスワイプすることで表示させることができる。この動作もコントロールすることができる。

presentWithGestureは初期値はtrueになっており、falseにするとボタンが非表示になりジェスチャーが無効になる。showsSecondaryOnlyButtonはセカンダリカラム以外の全てを非表示にするボタンを有効にする。

表示モード

.tile

.displace

.overlay

カラムの表示、非表示をコードで操作することもできる。

splitViewController.hideColumn(.primary)
splitViewController.showColumn(.suppplementary)

常に同じレイアウトである場合はpreferredDisplayModeで指定する

List

詳細は昨日のセッションにて。ここでは.primary, .supplementaryで正しい見た目にする方法を紹介する。

データの例

struct MyItem: Hashable {
    let title: String
    let image: UIImage
}

セルを登録して実行するclosureを設定する。

contentConfiguration 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
}

最後にUICollectionViewDiffableDataSourceを作成する

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

結果はこのようになる

先ほどのconfigurationのappearanceを.sidebarPlainに設定すると

背景が白くなる

Listにはアクセサリーや並び替え、概要、スワイプアクションを設定することができる

Reducing modality

カラーピッカーやメニューは前面を覆うようなコンテキストを遮るようなことが無いようにした。これによりタスクを完了させるために必要なタップ数を減らすことができる。

Shortcutsアプリの例

Two column layout with Split View Controller

let splitViewController = UISplitViewController(style: .doubleColumn)
// Primary column
let sidebar = SidebarViewController()
splitViewController.setViewController(sidebar, for: .primary)

// Secondary column
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
   splitViewController.showDetailViewController(DetailViewController(), sender: self)
}

iPadのレイアウトの設計の例

let tabBarController = createTabBarController()
splitViewController.setViewController(tabBarController, for: .compact)

iPhoneの場合は１画面のタブを表示

２カラムでアプリを使用中に別のアプリを開くと１カラムになってしまうことがある。

それでもスムーズな表示を実現したい。

そこでRestorableというプロトコルに適合してリストアが呼ばれて状態が復元されることを確認する。

Sidebar

Shortcuts.appのサイドバーはコレクションビューが配置されており各項目はListCellになっている。collectionViewのLayoutのコードを見てみよう。

let layout = UICollectionViewCompositionalLayout(sectionProvider: sectionProvider,
        configuration: UICollectionViewCompositionalLayoutConfiguration())
func sectionProvider(_ section: Int, environment: NSCollectionLayoutEnvironment)
-> NSCollectionLayoutSection {
   var configuration = UICollectionLayoutListConfiguration(appearance: .sidebar)
   if (environment.traitCollection.horizontalSizeClass == .compact) {
       configuration.headerMode = .firstItemInSection
   } else {
       configuration.headerMode = .none
   }
   return NSCollectionLayoutSection.list(using: configuration, layoutEnvironment: environment)
}

続いてセルの登録について

struct Section: Hashable { … }
struct Item: Hashable { … }

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Item> { cell, indexPath, item in
   // Configure the cell
}

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

型安全な方法で一箇所でセルの登録と設定が可能になっている。続いてどのようにセルに設定するか見てみましょう。

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, Item> { cell, indexPath, item in
   var content = cell.defaultContentConfiguration()
   content.text = item.title
   content.image = item.image
   cell.contentConfiguration = content
}

まとめ

新しいSplit View Controllerのおかげで簡単にサイドバーの実装ができそうなイメージが沸きました。（iOS 13以下との共存はとても難しそうに感じた...）どこかで個人アプリなどでサイドバーの対応をして見たいと思います。