iPad用ビルド – WWDC2020

Session概要

マルチカラムのスプリットビュー

• UISplitViewControllerはコンテナViewControllerで、ViewController内のコンテンツの構造を提供し、マルチカラムをサポートしている
  • iOS 14から簡単にセットアップして使用可能なAPIがある
  • UISplitViewControllerをウィンドウのRootViewControllerとして使用する
• iPad用とiPhone用それぞれをデザインすると考えないようにする
  • 代わりに2種類の体験をデザインする
• UISplitViewControllerはカラム毎にUINavigationControllerを保持しているため、ボタンが自動で作成される
  • 各NavigationControllerの上にバーがあり、オプションのツールバーが下にある
• Human Interface GuidelinesのSplitViewを使う目的について

// initializerでカラム数を指定
let splitViewController = UISplitViewController(style: .
doubleColumn)

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

splitViewController.setViewController(inboxViewController, for: .supplementary)

// compactサイズのViewControllerを指定する
splitViewController.setViewController(tabBarController, for: .compact)

// カラムの表示、非表示変更
// トランジションアニメーションが自動的に設定されている
splitViewController.hideColumn(.primary)
splitViewController.showColumn(.supplementary)

2カラム ディスプレイモード

• 表示パターン
  • セカンダリカラムのみ表示
  • セカンダリの横にカラムを1つ表示
  • セカンダリの上に表示
    
    

3カラム ディスプレイモード

• 表示パターン
  • セカンダリの横のカラムを2つにする
  • セカンダリの上に表示
  • セカンダリに押し出して表示
    
    

ディスプレイモードの切り替え

• SplitViewControllerが自動的に適切なボタンを作成し、ちょうど良い場所に表示してくれる

ボタンとジェスチャーの有効化

• presentsWithGestureプロパティで設定する
  • defaultはtrueでfalseにするとボタンとジェスチャーは表示されなくなる
• showsSecondaryOnlyButtonプロパティは追加のボタンでセカンダリカラム以外を非表示にする
• preferredSplitBehaviorプロパティの設定でボタンとジェスチャーが使うディスプレイモードを決定する
  • カラムを並べて表示したい場合は、.tileを使用しボタン押下でディスプレイモードを切り替えることが可能
  • .displaceは似ているが、3カラム表示の場合セカンダリカラムの一部を画面外に押し出します
  • .overlayはオーバーレイディスプレイモードを使用する
    
    

アプリのレイアウトを常に同じにする場合

• preferredDisplayModeを指定する
  • .oneBesideSecondary：常に2カラム表示
    
    

リストについて

• 多くの場合、プライマリ、セカンダリViewはリストで表示される
• リストを表示する新しいやり方はUICollectionViewを使用すること
  • UICollectionViewListConfigurationでレイアウトを組む
• Human Interface Guidelinesによれば、コレクションやフォルダの中に項目がある場合、外観にはsideBarPlainを使用する
• リスト内でのアクション
  • アクセサリ
    • チェックマークの設定
  • 整列、ソート
  • 展開・折りたたみ
  • スワイプアクションによる削除
    
    

UIでモーダルを減らす

• iOS 14ではいくつかの共通シナリオで邪魔なインターフェイスを取り去る工夫が追加され、タスクを完了するまでに必要なタップ操作の量が減った

ショートカットアプリのケーススタディ

• ショートカットアプリの新しいデザインはiPadの大きなディスプレイを最大限に活かすように実装された
  
  

ショートカットでのSplitViewController

• SplitViewControllerを使って、iPad、iPhoneの両画面をサポートしており、Regular、Compactの幅で切り替えるように実装されている

// SplitViewControllerの初期化
let splitViewController = UISplitViewController(style: .doubleColumn)

// Primary column

let sidebar = SidebarViewController()
splitViewController.setViewController(sidebar, for: .primary)


// Secondary column
// 動的にViewControllerを変えるためにUICollectionViewのdelegateで変更する
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    splitViewController.showDetailViewController(DetailViewController(), sender: self)
}