SwiftUI の Stack, Grid, Outline

SwiftUI の Stack, Grid, Outline

改良されたStackと新しいList、Outlineビューを使って、SwiftUI Appで詳細データをより素早く効率的に表示しましょう。iOS, iPadOSには新登場となるOutlineは、StackやListとともに動く階層データを表現できる新しいマルチプラットフォームツールです。SwiftUIの新しく改良されたツールを使用し、テーブルビュー利用時により多くのコンテンツを表示する方法、スムーズなスクロールで応答性の高いStackを作成する方法、vStackが提供できる以上のものを必要とするコンテンツのListビューの構築方法をお伝えします。またDisclosureGroup同様、Gridビューでより多くのレイアウトオプションも利用可能です。この動画を最大限に活用するには、事前にSwiftUI for 2020の新情報がすべて網羅されている"SwiftUI App Essentials"をご覧ください。SwiftUIでコーディングすることが初めてであれば、2019年の”SwiftUI Essentials"もご覧いただくことをお勧めします。

リソース
- View Layout and Presentation
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- Instrumentsによるハング分析
WWDC22
- SwiftUIによるカスタムレイアウトの作成
WWDC20
WWDC19
- SwiftUIの基本
ダウンロード

こんにちは WWDCへようこそ
“SwiftUIでStack, Grid, Outlineを使う” 私はコディー SwiftUIに携わるエンジニアですセッションの後半で同僚のカートが加わります SwiftUIにはビューの集まりを水平や垂直の並びで整列するための様々なレイアウトプリミティブが内蔵されていますこれらのプリミティブを使用するだけで基本的なレイアウトのニーズに対応できますさらに複数を互いに結合させてカスタム動作を示す複雑なビューを構築することも可能です macOSの新しいNotification Centerは SwiftUIと共に実装されていますそれをこのコンポジションプロセスにおける最適な例の１つとして利用する予定です Simple StackとGridは連携して機能し階層やアラインメントとスペーシングを使用して多数の情報を組織化し結果として仕上がりを美しく使いやすいものにします独自のアプリケーションを開発する場合同じ条件で考えることを推奨します SwiftUIのレイアウトプリミティブはコンポジションを念頭において設計されました一般に１つのシンプルタイプでは必要なことをすべて処理できない場合先に進むためには相補的な動作を行う別のシンプルタイプと結合する必要がありますここではSwiftUIのレイアウトプリミティブのファミリーに追加されたいくつかの新機能について話をします最も基本的なタイプ水平と垂直のStackのレビューから始めてゆるやかに成長するグリッドレイアウトを作成するための新しいペアを紹介しますさらに階層データのプレゼンテーションを可能にする― 既存のListタイプの新しい機能についても解説します
最後にカートがOutlineとFormについて詳しく解説しユーザーインタフェイス制御のプログレッシブ表示のテクニックを紹介します Stackの話から始めましょうこれはSwiftUIで最も簡単なレイアウトプリミティブです Stackについて話すためには初めにサンドイッチの話をする必要があります “Introduction to SwiftUI”を視聴済みでしたらジェイコブがサンドイッチを作るためのアプリケーションに力を注いできたことをご存知でしょう私はサンドイッチ通で特に記憶に残った― ランチのショーケース写真をジェイコブのアプリケーションのギャラリービューと合わせたら面白くなるだろうと考えました使用するデータモデルはシンプルでＩＤ名前評価を表す星とギャラリー用のヒーローイメージだけです
ギャラリーに個別のサンドイッチを表示するビューも同じくらいシンプルですリサイズ可能なヒーローイメージの表示と
サンドイッチの情報を含むオーバーレイが追加されているだけです
それぞれのヒーローイメージをオーバーレイするBannerViewは VStackを使用してサンドイッチのタイトルと評価の星のインジケータを配置します評価の星は画像をただ水平に並べたものです
初めの実装はかなり単純ですギャラリーはサンドイッチビューの垂直スタックを使用して表示していますサンドイッチリストは写真を撮ればとるほど増えていくのですべてのサンドイッチを列挙してそれぞれのビューを作成するForEachビューを組み込む必要がありますさらに Stackは自動でスクロールはしないのですべてをScrollViewの中に入れておく必要がありますここまではうまくいきましたがサンドイッチ写真のバックカタログのローディングに取りかかろうとして問題があることに気付きましたギャラリーに表示する写真が多くなるほど表示の際にスクリーンが反応するまでの時間が長くかかるようになります私が求めているのは増えた分を逐次構築していくLazy Stackですそうすれば最初は画面に映る分だけ画像を表示すればすみます残りはユーザーがギャラリーをスクロールするのに合わせてオンデマンドでロードできますこの問題に直接対処できる２つの新しいSwiftUIスタックタイプを紹介しましょう LazyVStackと LazyHStackです Lazy Stackは対応するVStackや HStackによく似ていますが表示する必要ができた分だけコンテンツを逐次表示する点が異なりますこれこそが私の求めるものですビューはメインスレッドによる全単一画像のローディングと測定をブロックしませんしアプリケーションのメモリーフットプリントが不必要に大きくはなることもありません VStackをLazyVStackに置き替えるだけで
ギャラリーは増えた分を逐次ロードするようになります
もう１つ指摘しておきたいことがあります “rating view”の定義を思い出してください HeroViewのギャラリーを定義する垂直スタックはこのスクリーン上の唯一のスタックではありません
各HeroViewには評価の星のインジケータをレイアウトするための個別の水平スタックとヒーローイメージ上に評価をオーバーレイするためのZStackがありますでは外側のスタックを LazyにしたのでこちらもLazyにすべきでしょうか？
この場合答えはノーです垂直スタックは Lazyにしたいと思っていましたなぜならスクロールしなければコンテンツの大部分は見えませんがスクロールした時にすべてが表示されるのに時間がかかるのは好ましくないからです一方で HeroViewの中にあるスタックを Lazyにしても実際にメリットはありませんビューがスクリーン上に到達するとコンテンツのすべてが即座に見えるようになりますそのためコンテナのデフォルト動作に関係なくすべてを一度にロードしなければなりません原則としてどのタイプのスタックを使用するかが決まっていないなら VStackか HStackを使用します Lazy Stackは計測機器を用いたプロファイリングの後で判明した性能のボトルネックを解決する手段として採用するようにします今度は新しい一連のタイプ Lazy Gridについて話したいと思いますサンドイッチギャラリーに戻りましょう
iPhoneでの見え方は気に入っていますがより大きな画面ではどうなるでしょうか iPadに移動させて確認しましょう
同じものですが少し大きいようです私が期待したとおりの見え方ではありません画面の活用可能な範囲が広がった時私が本当に望んでいるのはより多くのサンドイッチを画面に表示することです単一カラムの画像をマルチカラムのグリッドに変更できればサンドイッチ全体の密度をかなり上げることができます SwiftUIのレイアウトプリミティブファミリーに追加された２つのタイプを紹介します LazyVGridと LazyHGridですこれらのタイプは Stackを使用した時と同じようにコンテンツのグリッドを逐次増やしていきます LazyVGridを使用すれば容易にマルチカラムレイアウトを実装しビューのサンドイッチ密度を上げることができますどのように機能するか見てみましょう
これは以前に見たものと同じLazy Stackを iPad用にスケールアップしたものですこれを更新してサンドイッチのカラムが１つではなく３つになるようにします前例との大きな違いはレイアウトコンテナです LazyVStackの代わりに LazyVGridを使用し数値の集まりを渡して SwiftUIにグリッドのカラムの幅の計算方法を伝えます少し補足しますカラムの説明からは離れますが私はビュービルダーを経由してグリッドを形作る個々のビューを生成するというやり方でスタックを定義するのと同じようにしてグリッドを定義しますグリッドのカラムについて解説するため GridItem値のアレイを作成します各項目は個々のカラムの幅の計算方法を示していますここでは３つのカラムを定義していますグリッドアイテムはデフォルトでフレキシブルになっているのでこの配置ではグリッドは均等な幅のカラムで満たされます
これは横向きにしても同じですカラムの数は同じですが少し幅が広くなっていますさらにグリッドレイアウトは利用可能なスペースに対応して可変数のカラムを作成できますここでは例として指定された最小のカラム幅を維持しながら均等な幅のカラムを可能な数だけ生成する― 適応型のGridItemを宣言していますこのやり方はカラムを追加する余地がある横向きモードに適しています適応型のグリッドアイテムはウインドウを任意にリサイズできる macOSにも適していますこれらの新しいプリミティブの表現力には本当にワクワクしますカートに引き継ぐ前に話しておきたい最後のトピックはListです Listはまさに基本のレイアウトプリミティブ以上のものですそれはインタラクティブで選択管理とスクロールをサポートしますリストのコンテンツは常に Lazyにロードされます皆さんがどうかはわかりませんがこの時点で私はサンドイッチはもう十分にいただきましたカートが取り組んでいる“ShapeEdit”という新しいアプリケーションを見てみましょう ShapeEditはmacOSやiPadOSとiOS上で動作するドキュメントベースのアプリケーションですズームしていくとShapeEditにウインドウのサイドバービューが現れますここにListを使用してキャンバスのシェイプを列挙しています
今キャンバスにはグラフィックスのアレイがあり― そのグラフィックスアレイを使用してサイドバーに数行のコンテンツを配置しシェイプのフラットリストを生成していますとてもクールですねこのアプリケーションを操作するのは楽しかったのでシェイプを収集するフィーチャーをグループに追加することにとても興味をそそられましたグループが別のグループを含むことも可能なのでフラットリストはエレメントのディープツリーを恣意的に示す必要があります Listを完全なものにするために新しいフィーチャーを追加しましたその話をするのがとても楽しみですリストをアウトラインに変えるにはデータツリーを横断する方法をリストに伝える必要があります新しいinitializerを使用して children key pathをグラフィックモデルで提供し残りはSwiftUIが行いますこの１つの変更でサイドバーはシェイプの完全な階層を示すようになりました非常にすばらしい想像されているように内部ではこのアウトラインの作成を自動化するための興味深い作業が数多く行われていますではカートに話を引き継ぎます彼はListが使用しているものと同じツールを使用してプログレッシブ開示を自分のUIに実装する方法について解説しますカート
ありがとうコディーリストをアウトラインに変換するのはとてもクールなやり方ですどのように機能するか詳しく解説しますこの詳細はとてもすばらしいもので皆さんのアプリケーションでも部分的に利用できると思いますコディーはchildren key pathを Listに渡して ShapeEditでサイドバーにグラフィックスのアウトラインを表示する方法を解説しました私はアプリケーションで複数のキャンバスをサポートするのがクールだと考えておりモックアップをスケッチしましたこのモックアップは各キャンバスで別のセクションを使用しておりそれぞれのセクションには別々のアウトラインがありますこのようなカスタムアウトラインを実装する方法について見ていきましょうコディーが述べたように Listは選択管理を支援するハイレベルの構造なのでその話を続けます Listではキャンバスにて反復を行う場合は ForEachを使用しますそれぞれのキャンバスごとに Sectionを使用してキャンバスの名前を示すヘッダを追加しますそして最後の SectionのコンテンツがSwiftUIの新しいビュー OutlineGroupです ForEachに類似していますがフラットな集合を繰り返すのではなくツリー構造データを横断しますここにグラフィックスのアレイと children key pathを指定します OutlineGroupは各項目が GraphicRowであるアウトラインを生成します
Xcodeに切り替えて実際にどのように動作するかを確認しますプレビューにはグラフィックスのアウトラインが表示されています SwiftUIのアウトラインはmacOSだけでなく iOSでも機能します iPadやiPhoneで強力な内蔵のアウトライン機能を使えるのはとてもすばらしいことです Live Previewでこれらのグループがどのように機能するかを見てみましょう
ディスクロージャーインジケータをタップしてグループを拡張したり折りたたむことができますビューを更新してすべてのキャンバスを表示するようにしますまずはListに OutlineGroupを追加してその中にGraphicsRowが入るようにします
さらにこの最初の２つの引数を ListからOutlineGroupへ移動します
プレビューがまだ変化していないことに注意してください Listのすぐ内側のOutlineGroupは childrenパラメータを使用するListと同じものです次にビューを変更してグラフィックスの代わりにキャンバスを使用するようにします Commandをクリックし Repeatを選択してこのOutlineGroupをForEachの中に入れます
さらに引数を自分のモデルのキャンバスに置き替え
パラメータの名前を変更します
最後に単一のキャンバスではなくグラフィックス全体を反復するように OutlineGroupを変更しますこれですべてのキャンバスのグラフィックスが表示され連動しますセクションヘッダーをいくつか追加します Shift+Command+Lを押してライブラリーをオープンし Sectionをフィルタリングします Sectionをドラッグして入れヘッダーにキャンバス名を表示させます
SidebarListStyleを使用しているので iOS 14で導入されたこれらの美しい太字のヘッダを利用できますこれらも拡張したり折りたたむことができます
とてもクールなやり方ですね階層構造のListと OutlineGroupに加えて SwiftUIは情報のプログレッシブ表示を行う新しい便利なツールを MacとiOSに提供します時々コントロールや他の情報の表示や非表示を要求する― アプリケーションが通常の階層に従わないことがありますこのInspectorのポップオーバーのようにこのようなケースに対応した― 第三の新しいツール DisclosureGroupを紹介します DisclosureGroupはディスクロージャーインジケータとラベルおよびコンテンツを提供しますユーザーがディスクロージャーインジケータをタップまたはクリックするとコンテンツが表示されますもう一度タップまたはクリックするとコンテンツは非表示になります使い方を見てみましょうここに Inspectorがあります fill 影テキストプロパティを調整するコントロールが含まれていますそのすべてがFormの中に組み込まれています Formはこのようなコントロールの集合に対応した最適な選択です macOSでも新しいSettings Scenesで Formを使用できます Inspectorがアプリケーションでどのように機能するか見てみましょう
ShapeEditは iPadではとてもうまく機能しますシェイプを選択して Inspectorをオープンします
色を変更して影を追加します
さらにシェイプも変更できます
コードに戻りましょう
このInspectorはうまく機能していますが少し煩雑になっていますもう少し整理できないか確認しましょう最初にこれらすべてのfillコントロールを DisclosureGroupの中に入れます
ライブラリーから DisclosureGroupを持ってきます
タイトルをFillに設定します
fillコントロールがInspectorでまとめて折りたたまれていることに注意してくださいアウトラインと同じようにディスクロージャーグループも拡張や折りたたみが可能です
このグループはアイコンを使用できますそれにラベルを使用しますこのコンビニエンスプロパティを削除してラベルにtrailing closureを追加します
任意のビューをここに配置できますが新しいLabelタイプはタイトルとアイコンを意味的に結合する便利な方法です
ここでSF Symbolイメージを使用します気に入っているのは rectangle.3.offgrid.fillです
うまく表示されました影とテキストコントロールも同じように処理します
これらの処理により Inspectorの見た目が良くなりましたもう１つ変更したいものがありますユーザーはfill設定を調整することが多いと思うので Inspectorをオープンした時にそれらが表示されるようにします早速やってみましょう SwiftUIのディスクロージャーグループを拡張を制御するブールプロパティに結合することができます信頼できる情報源として機能するブールステートを追加します
そしてデフォルトをtrueにします
DisclosureGroupを構成して新しいステートに結合させます
これで fillコントロールはデフォルトで拡張された状態になりますここまでアウトラインとディスクロージャーグループを使用してアプリケーションの情報のプログレッシブディスクロージャーを管理する方法について解説してきました講演を締めくくる前に OutlineGroupが実際にどのように機能しているかを見てみましょうこれはコンポジションの原則を示すすばらしい例ですアウトラインとディスクロージャーグループを使用するのにこのビットを理解する必要はありませんが皆さんもクールな方法だと感じると考えていますここではグラフィックスの集合に OutlineGroupを設定します SwiftUIは OutlineGroupを同じグラフィックスの集合の ForEachに拡張します ForEachのbodyは DisclosureGroupですそれぞれのDisclosureGroupのラベルはオリジナルの集合の単一エレメントを用いて生成されますが各DisclosureGroupのコンテンツは別のOutlineGroupでありここではその単一エレメントのchildrenが対象であることに注意してくださいこのunwindingプロセスは childrenのないグラフィックが見つかるまで継続されますただし SwiftUIは誰かがオープンしたディスクロージャーグループのコンテンツを評価するだけなので実際に実行されるのは最小量のプロセスだけです前に述べたようにアウトラインとディスクロージャーグループを使用するのにこのunwindingを理解する必要はありませんが OutlineGroupを使用可能にするための再帰とコンポジションの組合せはすばらしいと思いますこのSwiftUIのツールのツアーが皆さんに役立つことを期待しています HStackとVStackは固定された一連のアイテムの配置を制御するのに適したツールであると考えています一方新しいLazy Stackは可変数で数量が大きくなる可能性がある― 一連のアイテムを表示するスクロールビューで非常にうまく機能します Lazy Gridはグリッドに集合を表示する使いやすく斬新な方法を提供します Listは非常に強力で選択スクロールとコンテンツの Lazyローディングのサポートを提供しますがさらに今年は階層データの表示も追加されました Inspectorの例でお見せしたように Formは設定や他のリストのコントロールに使用します最後に新しいアウトラインとディスクロージャーグループは情報のプログレッシブ表示をアプリケーションに合うよう― 適切に調整する能力を提供しますアプリケーションにデータを適切に表示する方法についての詳細は developer.apple.comから ShapeEditのコードをダウンロードできますまたアプリケーションでSettings Sceneを作成する場合の詳細については “App Essentials in SwiftUI”をモデルとビューの結合に関する詳細については “Data Essentials in SwiftUI”をご覧くださいもっとサンドイッチについて知りたい方は WWDC 2020の“Introduction to SwiftUI”をご覧くださいご視聴ありがとうございますごきげんよう

// Sandwich model and gallery item view

struct Sandwich: Identifiable {
    var id = UUID()
    var name: String
    var rating: Int
    var heroImage: Image { … }
}

struct HeroView: View {
    var sandwich: Sandwich
    var body: some View {
        sandwich.heroImage
            .resizable()
            .aspectRatio(contentMode: .fit)
            .overlay(BannerView(sandwich: sandwich))
    }
}

2:26 - Sandwich Info Banner

// Banner overlay view for sandwich info

struct BannerView: View {
    var sandwich: Sandwich
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Spacer()
            TitleView(title: sandwich.name)
            RatingView(rating: sandwich.rating)
        }
        .padding(…)
        .background(…)
    }
}

2:34 - Sandwich Rating View

// Sandwich rating view

struct RatingView: View {
    var rating: Int
    var body: some View {
        HStack {
            ForEach(0..<5) { starIndex in
                StarImage(isFilled: rating > starIndex)
            }
            Spacer()
        }
    }
}

2:39 - Scrollable Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    VStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

3:53 - Scrollable Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    VStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

3:57 - Scrollable Lazy Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    LazyVStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

6:09 - Scrollable Lazy Stack of HeroViews

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

ScrollView {
    LazyVStack(spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

6:18 - Three-Column Grid of Sandwiches

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

// Define grid columns
var columns = [
    GridItem(spacing: 0),
    GridItem(spacing: 0),
    GridItem(spacing: 0)
]

ScrollView {
    LazyVGrid(columns: columns, spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

7:13 - Adaptive Grid of Sandwiches

// Fetch sandwiches from the sandwich store
let sandwiches: [Sandwich] = …

// Define grid columns
var columns = [
    GridItem(.adaptive(minimum: 300), spacing: 0)
]

ScrollView {
    LazyVGrid(columns: columns, spacing: 0) {
        ForEach(sandwiches) { sandwich in
            HeroView(sandwich: sandwich)
        }
    }
}

8:47 - Outline of GraphicRows

struct GraphicsList: View {
    var graphics: [Graphic]
    var body: some View {
        List(
            graphics,
            children: \.children
        ) { graphic in
            GraphicRow(graphic)
        }
        .listStyle(SidebarListStyle())
    }
}

9:52 - Customizing your outlines

// Customizing your outlines

List {
    ForEach(canvases) { canvas in
        Section(header: Text(canvas.name)) {
            OutlineGroup(canvas.graphics, children: \.children)
            { graphic in
                GraphicRow(graphic)
            }
        }
    }
}

13:10 - DisclosureGroup

// Progressive display of information
Form {
    DisclosureGroup(isExpanded: $areFillControlsShowing) {
       Toggle("Fill shape?", isOn: isFilled)
       ColorRow("Fill color", color: fillColor)
    } label: {
       Label("Fill", …)
    }
    …
}

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

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

リソース

関連ビデオ

WWDC23

WWDC22

WWDC20

WWDC19