Day06
レイアウト思考 – Spacer / alignment / GeometryReader
余白と揃えの「作法」を身につけ、画面サイズが変わっても崩れないUIへ。SwiftUIならではのレイアウト発想を体験します。
Spacerの使いどころ
alignmentのセオリー
GeometryReader入門
alignmentのセオリー
GeometryReader入門
目次
今日のゴール
Spacerを使って端寄せ・中央寄せを自在に設計できる- スタックの
alignment/spacingを目的から決められる GeometryReaderで親サイズ参照の比率レイアウトを理解する
Spacer：空白で配置をデザインする
押し出し（端寄せ）図解
Spacer() は「伸びる弾性の空白」。HStackでは左右、VStackでは上下に伸び、隣の要素を端へ押し出します。
中央寄せ 図解
両側に Spacer を置けば中央寄せ。ラベル＋ボタン構成でも応用できます。
alignment と spacing の設計
VStackのalignment 図解
alignment は「子の基準線」をそろえる設定。テキストの揃えを保つ場合は .leading が定番です。
spacing の目安 図解
行間の密度は spacing。狭すぎると窮屈、広すぎると情報が分断（12〜16前後が目安）。
GeometryReader：親サイズに応じたレイアウト
比率ボックス 図解（16:9）
geo.size から親の幅・高さを参照し、比率でサイズを決められます。無限拡張を防ぐため外側の .frame で高さを先に制約するのがコツ。
心得（要点）
- 必要最小限の範囲で使い、無闇にネストしない（パフォーマンス・可読性）
- 親ビューの制約（
.frame）を先に置き、無限拡張を防ぐ - 単純に端に寄せたいだけなら
Spacerの方が明快
今日の練習課題 & 解答
課題①：左右に要素、中央にタイトル
HStack {
Button { } label: { Image(systemName: "chevron.left") }
Spacer()
Text("タイトル").font(.headline)
Spacer()
Button("保存") { }
}課題②：カードの情報行（揃え重視）
HStack(alignment: .center, spacing: 12) {
Image(systemName: "doc.text").font(.title3)
VStack(alignment: .leading, spacing: 2) {
Text("書類タイトル").font(.subheadline.bold())
Text("説明文が長くなっても左揃えのまま折り返す")
.foregroundColor(.secondary)
.font(.footnote)
}
Spacer()
Button("詳細") { }
}課題③：比率レイアウトのサムネイル
GeometryReader { geo in
let w = geo.size.width
RoundedRectangle(cornerRadius: 12)
.fill(Color.gray.opacity(0.2))
.frame(width: w, height: w * (16.0/9.0))
}
.frame(height: 220)
チェックリスト
Spacerの押し出し/中央寄せができる- スタックの
alignment/spacingを目的から設定できる GeometryReaderで親サイズを参照する基本を理解した
© Day06 – Layout Thinking with SwiftUI
コメント