0Pricing
Swift Academy · レッスン

適応型レイアウトのためのGeometryReader

親のジオメトリを読み取り、比例的でデバイスに適応するUIを構築します。

「適応型レイアウトのためのGeometryReader」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。

ようこそ

`GeometryReader` は親から利用可能なサイズを読み取り、画面やコンテナの大きさに比例したレイアウトを構築できるようにします。

基本的な使い方

```swift GeometryReader { geo in Text("Width: \(Int(geo.size.width))") .frame(width: geo.size.width * 0.8) } ```

GeometryProxy のプロパティ

`GeometryProxy` は次の情報を提供します： • `size: CGSize` — 利用可能な幅と高さ • `safeAreaInsets: EdgeInsets` — システムのセーフエリア • `frame(in:)` — 指定した座標空間内のフレーム

比例したサイズ設定

```swift GeometryReader { geo in HStack(spacing: 0) { Color.blue.frame(width: geo.size.width * 0.6) Color.green } } ```

座標空間

```swift GeometryReader { outer in VStack { GeometryReader { inner in let f = inner.frame(in: .named("outer")) Text("y: \(Int(f.minY))") } } } .coordinateSpace(name: "outer") ```

セーフエリア

```swift GeometryReader { geo in VStack { Spacer() Text("Bottom safe: \(Int(geo.safeAreaInsets.bottom))") .padding(.bottom, geo.safeAreaInsets.bottom) } } ```

視差スクロール効果

```swift ScrollView { ForEach(items) { item in GeometryReader { geo in let offset = geo.frame(in: .global).minY Image(item.image).offset(y: offset * 0.3) } } } ```

レイアウト通信のための Preference Key

```swift struct HeightKey: PreferenceKey { static var defaultValue: CGFloat = 0 static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) { value = max(value, nextValue()) } } ``` 子ビューのサイズをビュー階層の上位に伝えるために使用します。

GeometryReader を避ける場合

`GeometryReader` はデフォルトで利用可能なスペースをすべて埋めます。そのため、慎重に使用しないとレイアウトが崩れることがあります。可能な場合は、`.frame(maxWidth:.infinity)` と柔軟なスタックを使用してください。

代替手段：Layout プロトコル

Swift 5.7 以降では、`Layout` プロトコルが導入され、`GeometryReader` のオーバーヘッドなしで完全にカスタムなレイアウトアルゴリズムを実装できるようになりました。

確認問題

`GeometryProxy.size` には何が含まれますか？

まとめ

重要なポイント： • `GeometryReader { geo in }` は親から提供されたサイズを読み取ります • `geo.size` — 幅と高さ、`geo.safeAreaInsets` — システムのインセット • `frame(in:)` — 名前付きまたはグローバルな座標空間内の位置 • サイズを上位へ伝えるには PreferenceKey を使用します • 可能な場合は `GeometryReader` よりも柔軟なレイアウトを優先します コースは完了です！次は SwiftUI のデータフローです。

よくある質問

「適応型レイアウトのためのGeometryReader」レッスンは無料ですか？

はい。「適応型レイアウトのためのGeometryReader」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。

「適応型レイアウトのためのGeometryReader」で何を学びますか？

親のジオメトリを読み取り、比例的でデバイスに適応するUIを構築します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Swift Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「適応型レイアウトのためのGeometryReader」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwift Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. VStack、HStack、ZStackの基礎
  2. LazyVGridとLazyHGrid
  3. Spacer、Padding、Frameモディファイア
  4. 適応型レイアウトのためのGeometryReader
← Swift Academyに戻る