SwiftUIの空間レイアウトの紹介

SwiftUIの空間レイアウトの紹介

SwiftUIを使用して空間体験を構築するための新しいツールを紹介します。visionOSにおける3D SwiftUIビューの基本、奥行き／深度のアライメントを使って既存のレイアウトをカスタマイズする方法、モディファイアを使用して空間内にビューを配置したり、回転したりする方法を学びましょう。空間コンテナを使って、同じ3D空間内に複数のビューを整列させ、イマーシブで魅力的なアプリを作成する方法についても解説します。

関連する章
- 0:00 - イントロダクション
- 2:47 - 3Dビュー
- 7:18 - 奥行き／深度のアライメント
- 11:41 - 回転レイアウト
- 16:28 - 空間コンテナ
- 19:22 - 次のステップ
リソース
関連ビデオ

WWDC25
- SwiftUIとRealityKitの連係
WWDC22
- SwiftUIによるカスタムレイアウトの作成
WWDC19
- SwiftUIでカスタムビューを構築する
「SwiftUIの空間レイアウトについて」へようこそ私はSwiftUIチームのエンジニア Trevorですこのセッションでは SwiftUIを使って楽しい空間体験を構築するための手法をご紹介します
私はBOT-anistというお気に入りのアプリを拡張して SwiftUIの新しい空間レイアウト機能を実現しました
このアプリでは様々な構成要素色素材を使って楽しいロボットをカスタマイズできます新しく作成したロボットを使って自分の仮想庭園を手入れできますこの小さなロボットを作るのが大好きです最近私の作品をカタログ化するための新しいビューの開発に取り組んでいます
ロボットをカスタマイズできるだけでなく保存して様々なロボットを収集できるのです
ロボットをブラウズするための新しい3Dシーンをお見せしますこれらの体験はすべて SwiftUIを使って作りました
visionOSで3D体験を構築していれば RealityKitを使ったかもしれません
RealityKitは 3Dアプリを構築するための素晴らしいフレームワークで特に物理シミュレーションのような複雑な動作を得意とします
SwiftUIを使用してきた人なら使い慣れた宣言型構文を使ってもビルドできますまた RealityKitの機能をアプリの一部でのみ使う場合もあるでしょう visionOS 26では SwiftUIの既存の2Dレイアウトツールやアイデアを使って 3Dアプリを構築できます
SwiftUIレイアウトを使えばアニメーションサイズ変更状態管理のサポートが組み込まれているためカルーセルからロボットを削除すると SwiftUIによって他のすべてのロボットの位置やサイズが空間のサイズに対応してアニメーション化されます
ボリュームのサイズを変更するとカルーセルと中のロボットのサイズが自動的に変更されますロボットレイアウトの構築に使用した新しいツールについて説明する前に
まず SwiftUIレイアウトシステムのこの3D拡張機能は既存の2Dレイアウト概念に基づいています
初めてSwiftUIレイアウトを扱う方は「Building custom views with SwiftUI」と「Compose custom layouts with SwiftUI」を先にご確認くださいこのビデオでは visionOSにおける 3D SwiftUIビューの基本奥行きアライメントを使って既存のレイアウトをカスタマイズする方法レイアウトシステム内でビューを回転させる新しいモディファイアであるrotation3DLayout 同じ3D空間内に複数のビューを整列させる機能である SpatialContainerとspatialOverlayについて説明します
ビューとレイアウトシステムについて説明しましょう
SwiftUIはアプリのビューごとに幅高さ X位置とY位置を計算します
サイズを変更できない画像などの一部のビューにはアセットのサイズと一致する固定フレームが使用されます
このColorのような一部のビューには親から提供されたすべての空間を占有する柔軟なフレームが使用されます
レイアウトによって子が最終フレームに編成されます黄色で示されているVStackのフレームは利用可能な空間と含まれる子により決まりますこの例では高さは中にある2つの画像ビューの合計になっています visionOSも動作は同じですがビューが3Dである点が異なりますレイアウトシステムの動作は同じでありながら 2次元ではなく 3次元に応用されているわけです
つまり各ビューの幅と高さに加えて SwiftUIでは奥行きとZ位置も計算されます iOSで2Dフレームを視覚化するのに borderモディファイアをよく使いますが
visionOSでは 3Dフレームを視覚化するために独自の debugBorder3Dモディファイアを作成しましたこのモディファイアの作成方法についてはこのセッションで習う APIを使ってこのビデオの最後に説明します
debugBorder3Dでも Model3Dの動作が画像と同じであることがわかりますが 2次元ではなく3次元であり幅高さ奥行きが固定されていますビューはすべて3Dですが奥行きがゼロになる場合もあります
画像色テキストなど平面体験の構築に使用するビューの多くは奥行きがゼロとなるため動作がiOSと同じになります
Colorがデフォルトで提案された利用可能なすべての幅や高さを占有するように一部のビューには柔軟な奥行きが使われます visionOSでは RealityViewのような特定のビューがデフォルトで利用可能なすべての奥行きを占有します
GeometryReader3Dには同様の柔軟なサイズ調整動作があり
サイズ変更可能なモディファイアが適用されたModel3Dと同様に動作しますこれによりロボットがウィンドウの幅に合わせて引き伸ばされていますこのアスペクト比では顔が少し長く見えるので利用可能な空間に合わせて拡大縮小しつつ元の比率に戻したいと思います
resizable()に加えて新しいscaledToFit3D モディファイアを使うことでモデルのアスペクト比を維持しながら利用可能な幅高さ奥行きに合わせてロボットのサイズを拡大または縮小できます
では利用可能な奥行きはどう決まるのでしょうかウィンドウのコンテンツは幅や高さと同じようにルート奥行きの提案を受け取ります幅や高さとは異なりサイズ変更可能ですが奥行きの提案はウィンドウで固定されていますこの範囲を超えるとコンテンツが一部表示されない場合があります
同様にボリュームでもコンテンツの幅高さ奥行きが提案されますが深さもサイズ変更可能ですヒューマンインターフェイスガイドラインの「Designing for visionOS」でボリュームまたはウィンドウの使い分けについてご確認ください
一部のビューでは含まれているビューの奥行きの提案内容を変更できます VStackでサブビューの高さが構成されるように ZStackでは奥行きが構成されますこのZStackの奥行きは前後に並ぶ両方のロボットが納まるために必要な奥行きです
VStackが利用可能な空間子の数子のタイプといった要素に基づいてサブビューに様々な高さを提案するのと同様に ZStackも同じ要素に基づいて子に様々な奥行きを提案する場合がありますここでは RealityViewがZStackでロボットを前方に押し出しシーンで利用可能な奥行きをすべて使います
既存のレイアウトタイプとスタックは visionOSの3Dであるため理にかなったデフォルト動作が奥行きにいくつか適用されますこの例では HStackが親からの奥行きの提案を受け 2つのモデルをぴったりと中に納めるために独自の奥行きを確立します
HStackではこれら2つのロボットの背面がデフォルトで並べられます
この概念を奥行きアライメントと呼びます奥行きアライメントは 3Dビューと奥行きに効果的に対応するため既存のSwiftUIレイアウトタイプをカスタマイズできる新しいツールです垂直方向や水平方向のアラインメントに取り組んだことがあればなじみがある概念でしょうそれぞれの名前と説明とともにお気に入りのロボットを表示できる新しいボリュメトリックウインドウを作成します再利用しやすくするためまずロボットのModel3Dコードを更新しましょう
納まるように拡大縮小できる Model3Dから始めます
ロボットのモデルをプリロードできる新しいModel3DAssetタイプを使用するようリファクタリングしますアプリ全体で使用できる新しいResizableRobotViewにこれらすべてを含めますここではdebugBorder3Dも削除しておきます
VStackを使用してResizableRobotViewとロボットの詳細が記載された RobotNameCardが含まれる RobotProfileを作成します
ここで問題があります
このカードはVStackの後ろに配置されているため読みにくくロボットモデルの影に少し隠れてしまっています
HStackでコンテンツを中央上下端に配置する設定ができるように visionOSでビューの奥行きでの配置方法を設定するとよいでしょう
デフォルトではスタックとレイアウトタイプは背面の奥行きアライメントを使用しています visionOS 26では任意のレイアウトタイプの DepthAlignmentをカスタマイズできます
VStackLayoutを使用するように RobotProfileを更新して
depthAlignmentモディファイアを適用できる状態にし .frontアライメントを指定します
.centerや.backのガイドを使うこともできますが
ロボットカードを読みやすくするには .frontが適切だと思います
これでZapper Ironheartという名前とこのロボットに関する詳しい知識がしっかりと頭に入りました
前面背面中央といった標準の構成が必要な場合前面背面中央の奥行きアライメントを使うと便利ですがより複雑な動作が必要な場合はどうすればよいでしょうか
HStackで3つのロボットプロファイルビューを設定しお気に入りの3体のロボットを表示するボリュームを作成しています Greg-gear Mendelが一番のお気に入りなのでこのビューでほかの2体よりも少し目立つように設定したいと思います
depthPodiumを使ってお気に入りのロボットほど近くに配置する方法を使おうと思っていますロボット1 2 3の順に近くに配置していきます
上から奥行きを見た場合最初のロボットの背面が 2番目のロボットの中央そして3番目のロボットの前面と揃っている状態ですこれにはカスタム奥行きアライメントが必要になります
まず DepthAlignmentIDプロトコルに準拠する新しい構造体を定義します
このアライメントのデフォルト値として 1つの要件を実装します
DepthPodiumAlignmentのデフォルトとして前面のアライメントガイドを使用します
次に新しいDepthAlignmentIDを使う静的な定数を奥行きアライメントに定義します
これで各ロボットを含むHStackの奥行きアライメントとしてこのdepthPodiumアライメントガイドを使用できるようになりました
これによりこのガイドで指定したデフォルト値によってすべてのロボットの前面が揃えられます
次に最後のロボットのdepthPodium アライメントガイドの奥行きがガイドの中央になるようカスタマイズします
中央のロボットを変更させ背面が depthPodiumガイドに揃うようにします
先頭のロボットは引き続きこのアライメントのデフォルトである前面のガイドを使用します
シミュレータで見てみましょう
奥行きを使ってずらして配置したことで Greg-gear Mendelが一番のお気に入りだと一目でわかるようになりました
奥行きアライメントは既存のレイアウト内で奥行きの位置を微調整する場合に最適ですではさらに奥行きを重視した構築はどうすればよいでしょうかより高度な3Dユースケースに最適なツールが回転レイアウトですビューに視覚効果を適用し特定の軸を中心にビューを回転させる既存のrotation3DEffectモディファイアはおなじみかもしれません
基本的な回転操作に最適なモディファイアです
しかし HStackでモデルに説明カードを付けて配置し Z軸に沿ってロケットを 90度回転させるとロケットがカードにぶつかってボリュームから突き出てしまいます
デバッグワイヤーフレームを回転効果の前後に適用すると何が起こっているのかを理解しやすくなります実線の赤色のワイヤーフレームは効果によって回転していますがレイアウトシステムがロケットのジオメトリの位置として認識しているのは破線の青色のワイヤーフレーム部分です HStackでは青色のフレームを基準にサイズが設定されコンテンツが配置されるため回転と連動しませんこれは視覚効果がレイアウトに影響を与えないためですつまり HStackでは rotation3DEffectを使用した際のロケットの回転ジオメトリが認識されていません
これは scaleEffectやオフセットを含むすべての視覚効果に
当てはまります
いずれの場合もレイアウトシステムではモディファイアを基にビューのサイズや配置が調整されることはありませんこれは周囲のフレームに影響を与えることなく 1つのビューをアニメーション化する場合は最適ですが
影響を与えたい場合回転ロケットをどう修正できるでしょうか
朗報です visionOS 26ではレイアウトシステム内の回転ビューのフレームを変更する新しいrotation3DLayoutモディファイアが導入されますロケットモデルに適用するとHStackでサイズと配置が調整されロケットと情報カードに十分なスペースが割り当てられます
rotation3DLayoutでは任意の角度と軸での回転がサポートされるため宇宙に向けて飛び立っているかのようにロケットを 45度回転させることができます
rotation3DLayoutモディファイアの使用前後にデバッグワイヤーフレームを適用してみます回転したロケットのフレームが赤色で示されており修正後のビューのフレームが青色のワイヤーフレームで示されています青色のバウンディングボックスは親と整合した軸であり回転した赤色のフレーム内にぴったりと納まっています
では rotation3DLayoutを使ってビデオの冒頭でお見せしたロボットのカルーセルを構築する方法を見ていきましょう
「Compose custom layouts with SwiftUI」の RadialLayoutを使用します
このカスタムレイアウトタイプではビューが円の中に配置されます円周は利用可能な幅と高さによって定義されます
MyRadialLayoutはiOSに2Dビューを配置するために記述されたものですが
visionOSでもうまく機能します
ペットの2D画像ではなくロボットの 3Dモデルを配置する場合でも
ForEachを使って各ロボットのサイズ変更可能なModel3Dをカスタムレイアウト内に配置できます
これでも問題ありませんが垂直方向に並んでいます私が目指すのはロボットをボリューム内で水平方向に並べることです
rotation3DLayoutを放射状レイアウトに適用し X軸に沿ってビューを 90度回転させます先ほどはカルーセルの高さだった要素でレイアウトシステム内の回転ビューの奥行きを定義できますカルーセルは正しい向きになりましたがロボットは横たわっています
X軸に沿って-90度回転させる2番目の rotation3DEffectを使えば ForEach内で各ロボットを逆回転させて立たせることができます横たわっていたドロイドたちが立ち上がりました最後に1点だけ修正しますカルーセルはボリュームの高さに対し中央揃えになっていますがカルーセルをボリュームのベースプレートと同じ高さにしたいと思います
debugBorder3Dをカルーセル全体に適用するとわかりやすくなります
2Dレイアウトの場合と同じ戦略を使用できます上にスペーサを置いてVStack内でカルーセルを押し下げますロボットをボリュームの下側に配置できいい感じです 3Dレイアウトユーティリティベルトのもう1つのツールのペアを紹介しましょうそれがSpatialContainerと spatialOverlayですロボットのカルーセルにもう一つ追加したい機能がありますタップするとロボットを選択できコントロールメニューとモデル下部にあるリングが表示されて選択されていることがわかりますこのリングもModel3Dとして表されるためリングをロボットと同じ 3D空間に入れ込み軸に沿って積み重ならないように設定しますモデルを同じ3D空間に配置する新しいツールが必要です
新しいSpatialContainer APIでは入れ子人形のように複数のビューを同じ3D空間内に配置できます
すべてのビューに3Dアライメントを適用できますこれがすべての子を.bottomFront アライメントガイドに従って並べた場合
これが.topTrailingBackガイドに従って並べた場合です
spatialOverlayも同様のツールで別のビューと同じ3D空間にある 1つのビューをオーバーレイできます
SpatialContainerと同様に 3Dアライメントがサポートされています
並べるビューはロボットと選択リングの2つだけです私にとってロボットのジオメトリが最も重要ですロボットのサイズに合わせてリングのサイズを変更でき満足ですここでspatialOverlayを使用して選択したロボットのビジュアルを実装します
spatialOverlayモディファイアをロボットモデルに追加します選択済みとしてマークされたらサイズ変更可能なリングビューをコンテンツとして配置します .bottomアライメントを使ってリングの底とロボットの底を揃えます
ロボットのカルーセルがいい感じになりました既存の構成可能なSwiftUI APIをフル活用すればさらに簡単に改善できます
debugBorder3Dモディファイアを実装して全体の学習内容を振り返ってみましょう
これは先ほどModel3Dに適用して見せたモディファイアです
Viewのextensionとして debugBorder3Dメソッドを定義します変更したコンテンツに spatialOverlayを適用することで適用先のビューと同じ 3D空間に境界線をレンダリングします
2D境界線スペーサ別の2D境界線が含まれる ZStackを組み込みます
次に ZStack全体にrotation3DLayoutを適用することで先頭と末尾のビューに境界線を配置します
最後にこの内部ZStackを背面と前面に2D境界線がある別のZStack内に配置しますこれですべての端に境界線が付きました
新しい3D APIを使って既存の 2D SwiftUIモディファイアを構成しまったく新しいものを作成できる点が気に入っています
2Dコンテキストで慣れ親しんでいる多数のレイアウトツールやモディファイアに対応した 3Dアナログをご用意していますこれらのAPIについてはドキュメントをご覧ください
SwiftUIは 3Dアプリを構築するための素晴らしいツールですが依然として同じアプリ内で RealityKitとSwiftUIを組み合わせて使う必要があるユースケースも多く存在します
SwiftUIのコンテンツが3Dになったことで RealityKitコードを扱う必要がある場合もあります友人のMaksとAmandaが両方のフレームワークを一緒に使用する BOTanistの優れた追加機能を構築しました詳しくは「Better Together: SwiftUI and RealityKit」をご覧ください皆さんの3Dアプリを見るのが楽しみで仕方ありません

// Some views have fixed frames

Image("RobotHead")
  .border(.red)

3:05 - Color Frame

// Some views have flexible frames

Color.blue
  .border(.red)

3:15 - Layout Composed Frame

// Layouts compose the frames of their children

VStack {
  Image("RobotHead")
    .border(.red)
  Image("RobotHead")
    .border(.red)
}
.border(.yellow)

4:00 - Model3D Frame

// Some views have fixed depth

Model3D(named: "Robot")
  .debugBorder3D(.red)

4:25 - Zero Depth Views

// Many views have 0 depth

HStack {
  Image("RobotHead")
    .debugBorder3D(.red)
  Text("Hello! I'm a piece of text. I have 0 depth.")
    .debugBorder3D(.red)
  Color.blue
    .debugBorder3D(.red)
    .frame(width: 200, height: 200)
}

4:41 - RealityView Depth

// RealityView takes up all available space including depth

RealityView { content in
  // Setup RealityView content
}
.debugBorder3D(.red)

4:56 - GeometryReader3D Depth

// GeometryReader3D uses all available depth

GeometryReader3D { proxy in
  // GeometryReader3D content
}
.debugBorder3D(.red)

5:01 - Model3D scaledToFit3D

// Scaling a Model3D to fit available space

Model3D(url: robotURL) {aresolved in
  resolved.resizable()
}aplaceholder: {
  ProgressView()
}
.scaledToFit3D()
.debugBorder3D(.red)

6:15 - ZStack depth

// ZStack composes subview depths

ZStack {
  Model3D(named: "LargeRobot")
    .debugBorder3D(.red)
  Model3D(named: "BabyBot")
    .debugBorder3D(.red)
}
.debugBorder3D(.yellow)

6:33 - ZStack with RealityView

// ZStack composes subview depths

ZStack {
  RealityView { ... }
    .debugBorder3D(.red)
  Model3D(named: "BabyBot")
    .debugBorder3D(.red)
}
.debugBorder3D(.yellow)

6:57 - Layouts are 3D

// HStack also composes subview depths

HStack {
  Model3D(named: "LargeRobot")
    .debugBorder3D(.red)
  Model3D(named: "BabyBot")
    .debugBorder3D(.red)
}
.debugBorder3D(.yellow)

7:50 - ResizableRobotView

struct ResizableRobotView: View {
  let asset: Model3DAsset

  var body: some View {
    Model3D(asset: asset) { resolved in
      resolved
        .resizable()
    }
    .scaledToFit3D()
  }
}

8:11 - Robot Profile 1

//`Layout` types back align views by default

struct RobotProfile: View {
  let robot: Robot

  var body: some View {
    VStack {
      ResizableRobotView(asset: robot.model3DAsset)
      RobotNameCard(robot: robot)
    }
    .frame(width: 300)
  }
}

8:38 - Customizing Vertical Alignment

// Customizing vertical alignment

HStack(alignment: .bottom) {
  Image("RobotHead")
    .border(.red)
  Color.blue
    .frame(width: 100, height: 100)
    .border(.red)
}
.border(.yellow)

8:52 - Customizing Depth Alignment

// Customizing depth alignments

struct RobotProfile: View {
  let robot: Robot

  var body: some View {
    VStackLayout().depthAlignment(.front) {
      ResizableRobotView(asset: robot.model3DAsset)
      RobotNameCard(robot: robot)
    }
    .frame(width: 300)
  }
}

9:45 - Robot Favorite Row

struct FavoriteRobotsRow: View {
  let robots: [Robot]

  var body: some View {
    HStack {
      RobotProfile(robot: robots[2])
      RobotProfile(robot: robots[0])
      RobotProfile(robot: robots[1])
    }
  }
}

10:27 - Custom Depth Alignment ID

// Defining a custom depth alignment guide

struct DepthPodiumAlignment: DepthAlignmentID {
  static func defaultValue(in context: ViewDimensions3D) -> CGFloat {
    context[.front]
  }
}

extension DepthAlignment {
  static let depthPodium = DepthAlignment(DepthPodiumAlignment.self)
}

10:51 - Customizing Depth Alignment Guides

// Views can customize their alignment guides

struct FavoritesRow: View {
  let robots: [Robot]

  var body: some View {
    HStackLayout().depthAlignment(.depthPodium) {
        RobotProfile(robot: robots[2])
        RobotProfile(robot: robots[0])
          .alignmentGuide(.depthPodium) {
            $0[DepthAlignment.back]
          }
        RobotProfile(robot: robots[1])
      		.alignmentGuide(.depthPodium) {
            $0[DepthAlignment.center]
          }
    }
  }
}

12:00 - Rotation3DEffect

// Rotate views using visual effects

Model3D(named: "ToyRocket")
  .rotation3DEffect(.degrees(45), axis: .z)

12:10 - Rotation3DLayout

// Rotate using any axis or angle

HStackLayout().depthAlignment(.front) {
  RocketDetailsCard()
  Model3D(named: "ToyRocket")
  	.rotation3DLayout(.degrees(isRotated ? 45 : 0), axis: .z)
}

14:42 - Pet Radial Layout

// Custom radial Layout

struct PetRadialLayout: View {
  let pets: [Pet]

  var body: some View {
    MyRadialLayout {
      ForEach(pets) { pet in
        PetImage(pet: pet)
      }
    }
  }
}

14:56 - Rotated Robot Carousel

struct RobotCarousel: View {
  let robots: [Robot]

  var body: some View {
		VStack {
      Spacer()
      MyRadialLayout {
        ForEach(robots) { robot in
          ResizableRobotView(asset: robot.model3DAsset)
          	.rotation3DLayout(.degrees(-90), axis: .x)
        }
      }
      .rotation3DLayout(.degrees(90), axis: .x)
  }
}

17:00 - Spatial Container

// Aligning views in 3D space

SpatialContainer(alignment: .topTrailingBack) {
  LargeBox()
  MediumBox()
  SmallBox()
}

17:35 - Spatial Overlay

// Aligning overlayed content

LargeBox()
  .spatialOverlay(alignment: .bottomLeadingFront) {
    SmallBox()
  }

17:47 - Selection Ring Spatial Overlay

struct RobotCarouselItem: View {
  let robot: Robot
  let isSelected: Bool

  var body: some View {
    ResizableRobotView(asset: robot.model3DAsset)
			.spatialOverlay(alignment; .bottom) {
        if isSelected {
          ResizableSelectionRingModel()
        }
  }
}

18:32 - DebugBorder3D

extension View {
  func debugBorder3D(_ color: Color) -> some View {
    spatialOverlay {
			ZStack {
				Color.clear.border(color, width: 4)
        ZStack {
          Color.clear.border(color, width: 4)
          Spacer()
          Color.clear.border(color, width: 4)
        }
        .rotation3DLayout(.degrees(90), axis: .y)
				Color.clear.border(color, width: 4)
      }
    }
  }

関連する章

リソース

関連ビデオ

WWDC25

WWDC22

WWDC19