iPadのSwiftUI：インターフェイスをオーガナイズする

iPadのSwiftUI：インターフェイスをオーガナイズする

SwiftUIのリストと表を使用して、iPad Appのインターフェイスを強化しましょう。ここでは、選択インタラクションとコンテキストメニューを追加して、Appの生産性を高める方法を紹介します。また、ナビゲーション構築のベストプラクティスを紹介し、Split Viewでモダリティを回避して、デスクトップクラス最高レベルのiPadエクスペリエンスを実現する方法について解説します。これは、2部構成シリーズの前半セッションになります。この動画を最大限に活用するには、SwiftUIに関する基本的な知識を習得しておくとよいでしょう。本セッションの視聴後、「iPadのSwiftUI：ツールバーやタイトルなどを追加する」では、SwiftUIでiPad Appのツールバーをさらに改善する方法を紹介していますので、こちらもご覧ください。

リソース
関連ビデオ

WWDC22
WWDC21
- MacにおけるSwiftUI: 基盤の構築
- SwiftUIの徹底解説
ダウンロード

♪ ♪
こんにちは　ようこそ「iPadのSwiftUI：インターフェイスを構造化する」へ私はRajです　SwiftUIに携わっています iPadOS 16はより生産的でプロフェッショナルなAppを構築できるよう多数のアップデートを提供しますこのセッションではiPad上でSwiftUI Appのインターフェイスを整理することを紹介しますまず始めにリストとテーブルについてですそれからSwiftUIの選択モデルとメニューと選択をまとめる方法についてお話します最後に Split Viewを使用して iPad用のAppのナビゲーションを構成する方法について説明しますちょっと待ってくださいまだあります実はこれは２部構成のシリーズの１回目です第２部で同僚のHarryがツールバータイトルなどを紹介します Harryは SwiftUIのiPad Appを次のレベルに引き上げるための重要な追加機能をカバーしているのでぜひ両方のセッションをご覧くださいまずはリストとテーブルから始めましょう最近いくつかの読書会に参加しましたが遅れ気味です静かな場所で読書するのは難しいですからそこで読書に集中するため静かな場所を見つける Appを作り始めましたオアシスのような静かな場所では次々とページが進みますこのAppは見つけた場所を記録するのに役立ちます iPhone用のAppですがiPad用にアップデートしてより大きなディスプレイを活用したら楽しいと思います iPad用のAppをより良いものにすることでいずれMacにも対応させたいと考えていますこのセッションではMacを明確にカバーしませんが紹介するAPIの多くはmacOSにも適用されますこれはこれまでに見つけた静かな場所のリストですこれはAppのアップデートを始める最適な場所です iPad版の作成に取り掛かりましたひどいものではありませんが大きな画面の活用がないです無駄なスペースがかなりあり情報密度も低いですありがたいことにiPadOS 16では情報密度の高いシナリオでは複数列のテーブルという素晴らしいソリューションがありますどのようなものかご紹介しましょう複数列のテーブルのために SwiftUI APIを採用した後の「All Places」のViewですこのスクリーンショットを次の数分間で作業します SwiftUIにおける複数列のテーブルは macOS Montereyで導入し iPadOS 16からiPadでもAPIが利用できます iPadのテーブルも複数列と並べ替えをサポートします iPadでテーブルが導入され SwiftUIは iPadとMacでテーブのセクションをサポートしています
「MacにおけるSwiftUI :基礎の構築」は一般的なガイダンスでiPadでも適用されますまだ見ていないのでしたら見ることをお勧めします
iPhoneのリストから先ほどの表を作りましょうこれが先程の場所のリストのコードです
まずリストからテーブルに切り替えてみますテーブルはリストの構造と異なります View Builderに代えて Column Builderがあります
最初に追加する列は地名です列にはヘッダーの名前とコレクション内の各要素のViewを生成する View Builderが必要です値のキーパスも指定しましたこれは後でテーブルに並べ替えをするとき重要になります View builderはリストベースの構築に似ています実は以前のPlaceCell型を再利用することもできます
Compact Size Classではテーブルは最初の列しか表示されませんが iPhoneでもiPadのスライドオーバーでも美しく表示されます
見た目がリストに似ていることにお気づきでしょう単にテーブルをリストに置き換えたのではありませんテーブルを再利用すれば Size Class間の移行時にスクロール位置と選択範囲が維持されるからです一般的にコンパクトな外観を実現するために最初の列が使用されることをご確認くださいまた iPad Appはスライドオーバーなどの環境でもテストしてください
さて次です快適さと騒音レベルについて列を追加していきますテキストコンテンツだけの列では TableColumnは View Builderを省略する便利なAPIを提供しますこの場合「快適さ」のセルはあまり長さを必要としないでしょうから固定幅を適用しています
コンパレータでテーブルを並べ替えることもできますコンパレータを格納するステートを作りますここでのステートはテーブルのすべてのコンパレータを表すので配列ですまた名前のコンパレーターに初期値を設定することで初回表示時にテーブルを並べ替えて表示されます
次にバインディングを渡し関連づけます
列は比較可能なフィールドへキーパスとして値を指定するのでデフォルトで並べ替え可能です表は名前快適度騒音で完全に並べ替えできますテーブルがそれ自体並べ替えしないことに注意ですそれは私次第です onChange modifierを使用しデータを入れ替えます
さあ　ちょっとやってみましょう
テーブルは見やすくすべての場所のデータが表示され大きな画面を活かしています Macと違って iPadのテーブルは水平方向にスクロールしないので列を制限することが重要ですこれですべての列を一度に表示することができます各列のラベルはヘッダーに表示されますレベルをタップするとその列が並べ替えされます騒音レベルで並び替えることもできます
スライドオーバーするとテーブルは列に折りたたまれすべての情報がより凝縮された形で表現されますリストをテーブルに更新し選択について説明しますこのセクションで SwiftUIの選択モデルをレビューしメニューを統合することを説明しますその過程で豊富な機能で場所のテーブルを強化します最初にSwiftUIでどのように動作するかお話します SwiftUIには選択を管理する安定したAPIがありますここにいくつかの行を含むリストの図がありますそれぞれの行はタグを持っていますタグは各行に固有の値でリストの選択管理に有効ですこの図ではタグは緑色の円で表示されています
タグと一緒に選択項目を保持している状態もありますタグの値を保持する型です例えば複数選択の場合選択された各行のタグを保持するセットですリストの仕事は各行のタグと選択状態の間を調整することですそれは選択のバインディングによって行われます行が選択されると例えば２番目の行が選択のバインディングによってセットに追加されます同様にAppの他の部分がプログラムによってセットを変更しここに示す３つを追加すると選択のバインディングが変更されリストがそれを選択しますこの一般的なモデルはiOSとmacOSで共通ですつまり選択には２つの部分がありますタグと状態です次にタグの由来についてお話しますタグは選択可能なコンテナのViewの値でありそのViewが選択されているか追跡するために使用されます SwiftUIは自動的にタグを合成することができますタグは識別子に似ていますが全く同じではありません ForEachを使用するときSwiftUIはViewのタグを明示的なIDから自動的に導き出しますテーブルで行の値の識別子を選択タグとして使用しますこのAppでは place構造体の識別子型が使われます明示的なIDの詳細については「SwiftUIの徹底解説」をご覧ください
Viewに手動でタグを付ける場合タグ修飾子を使いますこれはForEachが内部で行っていることですタグ修飾子はHashableの値をとりますタグ修飾子を使用する場合は注意が必要です選択可能なコンテナ内のすべてのViewが同じタグタイプを共有することが重要です SwiftUIは Viewの選択方法を知らないかもしれないです注意点は IDモディファイア使用時はタグは設定しません以上がタグの概要です先ほどの図に戻しましょう
さてこの図のタグの部分を説明したのでここでは選択式のもう半分である「選択状態」に着目してみたいと思います前例でセットを使いましたが他のオプションもあります
これらのデータ構造を使用し選択を表現できます SwiftUIはmacOS Venturaの新機能の単一選択 macOSサイドバーや複数選択をサポートします
iPadOS 16では軽量な複数選択も導入されていますキーボードを取り付けると編集モードに入る必要なく複数行を選択しモダリティを回避できるようになりましたキーボードを使用する場合 shiftやcommandなどのショートカットを使い選択範囲の拡張や変更ができますこれはポインターとの相性も抜群です選択を採用した場所のテーブルはこんな感じですキーボードとトラックパッドが付属し行のインデントがされていないが選択されていることに変わりはないですタッチを使う場合は編集モードに入る必要があり２本の指のパン使うことで加速されます SwiftUIは自動的にこのジェスチャーをサポートします編集モードといえば単一選択と編集モードに関するいくつかのアップデートがあります iOS 16では iPhoneとiPadでリストを選択する時に編集モードが不要になりました更新されたNavigation APIとの連携に大変便利です
これらの更新によりこの表は編集モードの新しい列を追加することで前の表の上に構築されることになります編集モードはキーボードなしで行う場合のみ必要です場所のテーブルを更新して選択をサポートします選択範囲を保存する状態を追加することで簡単に場所のテーブルに選択範囲を追加することができますステートを作成した後テーブルの初期化子にバインディングを渡しますテーブルは選択の型がその行の識別子との一致を強制しますそれで場所ID型を選択型として使用します複数選択したいので選択状態にはセットを使っていますテーブルの行は自動的にタグ付けされます
そしてテーブルの行を選択できるようになりましたしかし私は選択で本当に何もしていません選択した場所をガイドに追加して読書会で他の人と共有できるボタンがあればいいと思いますこれはツールバーボタンを追加するためのコードです空でない選択範囲があればボタンは今すぐ表示されますまた編集ボタンも追加しました既存の軽量な選択機能を補完するものですがキーボードがないときに編集モードに入り終了するためのアフォーダンスです優れたAppはキーボードの使用は関係なく勝っており編集モードへの移行や終了のコントロールが重要です
もう一息ですこれで行を選択したときに表示されるボタンと編集モードに入り終了するボタンができましたツールバーの詳細についてはこのシリーズの第２回目を必ずご覧くださいツールバーボタンにかなり満足していますがもっとできることがあります選択に関するアクションはできるだけ簡単にアクセスできるようにしておくとよいでしょう iOS 16 iPadOS 16 macOS Venturaで SwiftUIが複数選択のコンテキストメニューに対応しました複数選択可能なコンテキストメニューにより選択された識別子を扱うコンテキストメニューが表示されます理解を深めるためテーブルの構造を調べてみましょう
コンテキストメニュ―のバリエーションは３つですまず上部の選択項目のように複数の項目でメニュ―を表示することができます
個別の項目にコンテキストメニューの表示もできます
最後にコンテンツのない空の領域にコンテキストメニューを表示することができます
場所のテーブルにサポートを追加してみましょう
コンテキストメニューに焦点を当てるためこれまでのコード例でいくつか詳細を省略しました選択型の新しいcontextMenu モデファイアを追加しましたこれはリストやテーブルの選択型に合わせる必要がありテーブルを使用しているので場所ID型を使用します
クロージャは作用する項目のセットを渡されるので空の場合はメニューは空の領域に対するものです空の場所に新しい場所を追加できれば効果的です外出先で新たに静かな読書ができる場所を見つけたらすぐに追加できますアイテムの空のセットのためのView builderが Viewに解決されない場合 SwiftUIは空の領域のメニューを表示しません次に単一の選択範囲を処理してみましょうセットが一つしかない場合メニューは一箇所だけ表示されています単一選択と複数選択でこれら場所のテーブルをガイドに追加できるようにしたいので別のViewをメニューに追加します進捗状況を確認してみましょう新しいコンテキストメニューのサポートです空の部分に追加するメニュー項目が表示されます１つの行の選択でその行のコンテキストが表示されますキーボードで選択範囲を拡張してこの青いハイライトを作ることができます複数の行に対してコンテキストメニューを表示させ簡単に場所を追加できます
テーブルがおしゃれになりましたのでテーブルの周りに何か構造を追加する時期だと思いますそのためにはSplit Viewが必要ですねナビゲーションはiPadの基本的な体験ですドリルインの必要がなく一度に情報を表示できるSplit Viewはモダリティを回避する素晴らしい方法ですナビゲーションとSplit Viewに関する SwiftUIのいくつかのアップデートをカバーするつもりです前のセクションでは場所のテーブルを作成し選択や編集モードなどの豊富な機能を追加しましたただ構成が少し足りないと思いますそこで NavigationSplitViewを活用して Appの構造の基礎を構築していきます iPadOS 16とmacOS Venturaの新機能として SwiftUIはNavigationSplitViewタイプによる Split Viewのサポートが改善されました SwiftUIは2列または3列の分割表示をサポートし列の表示方法を詳細に制御するための複数のスタイルを持っていますナビゲーションコンテンツの表示方法についてはこのセッションで完全には説明しませんので SwiftUI cookbookをチェックしてみてください Curtは本当に美味しいナビゲーションを体験するレシピをたくさん持っていますその代わり私は Split Viewにもっと集中します iPadでの２列Split Viewを行う場合の図です SwiftUIでは先頭の列はサイドバーとよばれ末尾の列は詳細の列と呼ばれます列がバランスよく配置されていることに注目です横向きでだとSwiftUIはこの表示をデフォルトで提供します縦向きではサイドバーは隠れ詳細の列だけが表示されますサイドバーボタンをタップすると薄暗くなった詳細列の上にサイドバーが表示され
一般的に２列のSplit Viewはスペースに制約がある場合詳細列のみを表示することが望ましいとされています詳細列にはサイドバー列よりも重要な情報が表示されることが多いからですこの動作をカスタマイズしたい場合は ProminentDetailNavigationSplitViewStyleで常に詳細列を優先するか balancedNavigationSplitViewStyleで重み付けのバランスをとることができます NavigationSplitViewは３列レイアウトにも対応します３列の場合サイドバーと詳細の間に内容欄と呼ばれる列が追加されます UIKitの場合これが補足欄です横向きではコンテンツと詳細列が表示されサイドバーの切り替えが可能ですツールバーボタンをタップすると詳細列がスライドしサイドバーとコンテンツが示されます縦向きでは詳細列のみ表示されツールバーボタンをタップするとコンテンツが表示されますもう一度タップするとサイドバーが表示されますサイドバーとコンテンツ両方が詳細列に重なります
一般に３列のSplit Viewは自動スタイルの使用をお勧めします利用可能なスペースを最大限に活用しより大きなディスプレイに特化しているからです２列Split Viewと同様に３列Split Viewもコンパクトサイズのクラスでスタックに折りたたむことができます Split Viewの基本を説明したところで Split Viewsを追加してみましょうこちらはコンテンツViewです２列のNavigationSplitViewを作成しました１列目がサイドバー列で２列目が詳細列です詳細列にはサイドバー列のリンクが表示されますが何も表示されない場合は「select a place」のプレースホルダーが表示されます
プレースホルダーのスクリーンショットです自動スタイルを使用しており横向きでサイドバーを表示し縦向きでは邪魔にならないように隠しますサイドバーの行のタップでその行が詳細列に示されますスライドオーバー使用で列は自動的に折りこまれますこれは氷山の一角ですナビゲーションの追加機能として復元やディープリンクのサポートが強化されプログラムによる制御もより豊富になりました The SwiftUI cookbook for navigationでご確認ください
このAppには素晴らしいiPadの機能が組み込まれているので心安らぐ読書場所を探しに行くのが楽しみです早く読書会に追いつくといいのですがこのセッションでテーブルを活用してデータを豊富に表示する方法高度な選択インタラクションを管理する方法そしてSplit Viewsでモダリティを回避する方法について説明しました
関連するセクションをチェックして iPadのパワーを活用した SwiftUI Appに磨きをかけてください
ありがとうございました

struct PlacesList: View {
    @Binding var modelData: ModelData


    var body: some View {
        List(modelData.places) { place in
            PlaceCell(place)
        }
    }
}

3:18 - Places Table

struct PlacesTable: View {
    @Binding var modelData: ModelData     @State private var sortOrder = [KeyPathComparator(\Place.name)]

    var body: some View {
        Table(modelData.places, sortOrder: $sortOrder) {
            TableColumn("Name", value: \.name) { place in
                PlaceCell(place)
            }
            TableColumn("Comfort Level", value: \.comfortDescription).width(200)
            TableColumn("Noise", value: \.noiseLevel) { place in
                NoiseLevelView(level: place.noiseLevel)
            }
        }
        .onChange(of: sortOrder) {
            modelData.sort(using: $0)
        }
    }
}

10:25 - Places Table with selection

struct PlacesTable: View {
    @EnvironmentObject var modelData: ModelData
    @State private var sortOrder = [KeyPathComparator(\Place.name)]
    @State private var selection: Set<Place.ID> = []

    var body: some View {
        Table(modelData.places, selection: $selection, sortOrder: $sortOrder) {
            // columns
        }
    }
}

10:26 - Places Table toolbar additions

Table(modelData.places, selection: $selection, sortOrder: $sortOrder) {
    ...
}
.toolbar {
    ToolbarItemGroup(placement: .navigationBarTrailing) {
        if !selection.isEmpty {
           AddToGuideButton(selection)
        }
    }

    ToolbarItemGroup(placement: .navigationBarLeading) {
        EditButton()
    }
}

12:34 - Item context menus

// Item context menus

Table(modelData.places, selection: $selection, sortOrder: $sortOrder) {
    ...
}
.contextMenu(forSelectionType: Place.ID.self) { items in
    if items.isEmpty {
        // Empty area
        AddPlaceButton()
    } else {
        if items.count == 1 {
            // Single item
            FavoriteButton(isSet: $modelData.places[items.first!].isFavorite)
        }

        // Single and multiple items
        AddToGuideButton(items)
    }
}

16:55 - Navigation Split View example

// Navigation Split View example

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            SidebarView()
       } detail: {
            Text("Select a place")
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC22

WWDC21