サブビューの測定
レイアウト中にサブビューのサイズを取得します。
「サブビューの測定」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。
測定がレイアウトを決める
子要素を配置する前に、まず子要素を測定する必要があります。SwiftUIのレイアウトは交渉です。親がサイズを提案し、子要素が応答し、その結果を調整します。
サブビューのサイズを尋ねる
Subviews内の各プロキシは、指定されたProposedViewSizeに対してsizeThatFits(_:)を返します。プロキシは、その提案の下で子要素が取るサイズを返します。
let size = subview.sizeThatFits(.unspecified)3つの測定用の提案
子要素の柔軟性を把握するには、3通りの方法で調べます。.zeroで最小サイズ、.infinityで最大サイズ、.unspecifiedで理想サイズが分かります。
let minSize = subview.sizeThatFits(.zero)
let maxSize = subview.sizeThatFits(.infinity)
let ideal = subview.sizeThatFits(.unspecified)特定の幅を提案する
折り返しが発生するテキストでは、具体的な幅を提案し、高さはnilのままにします。子要素は、その幅で必要とする高さを返します。
let proposal = ProposedViewSize(width: 200, height: nil)
let fit = subview.sizeThatFits(proposal)レイアウトの優先度
各サブビューは、.layoutPriorityで設定されるpriorityを持ちます。スペースが限られている場合は、優先度の高い子に理想的なサイズを先に割り当てます。
for subview in subviews {
let p = subview.priority
// distribute space to higher priority first
}カスタム値の読み取り
サブビューは、LayoutValueKeyを介して型付きデータを保持できます。レイアウトはsubview[MyKey.self]を読み取り、配置に反映します。たとえば、アイテムごとの間隔を指定できます。
private struct RankKey: LayoutValueKey {
static let defaultValue: Int = 0
}
let rank = subviews[0][RankKey.self]レイアウト値の設定
ビューはlayoutValue(key:value:)モディファイアでレイアウト値を設定し、子からレイアウトにヒントを伝えられるようにします。
Text("Featured").layoutValue(key: RankKey.self, value: 10)サブビュー間の間隔
サブビューはspacingの設定を提供します。subview.spacing.distance(to:along:)を使うと、軸に沿って隣接する2つの子の間に推奨される間隔を取得できます。
let gap = subviews[0].spacing.distance(
to: subviews[1].spacing, along: .horizontal)サイズの合計
水平方向のレイアウトでは、子の幅を合計し、最も高い子の高さを採用します。すべての子を先に測定しておくと、何も配置しないうちにコンテナのサイズを計算できます。
let sizes = subviews.map { $0.sizeThatFits(.unspecified) }
let totalWidth = sizes.reduce(0) { $0 + $1.width }
let maxHeight = sizes.map(\.height).max() ?? 0配置中の再測定
placeSubviewsでは、報告したサイズと位置が一致するよう、再測定するか、キャッシュしたサイズを再利用する必要があります。測定は実際のレンダリングではなく、低コストなプロキシ呼び出しです。
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
for s in subviews {
let size = s.sizeThatFits(.unspecified)
// use size to position s
_ = size
}
}親からの提案を尊重する
受け取った提案は必ず尊重してください。親が固定幅を提案した場合は、その幅の中に子を配置します。何も言わずにあふれさせると、レイアウトがクリップされます。
let containerWidth = proposal.width ?? .infinity確認テスト:測定
サブビューの測定について理解度を確認します。
まとめ:サブビューの測定
測定はカスタムレイアウトの中心です。.zero、.infinity、.unspecifiedを使って子を調べ、最小・最大・理想のサイズを把握します。折り返しが必要なコンテンツには具体的な幅を提案し、レイアウトの優先度と間隔の設定も尊重してください。
カスタムのLayoutValueKey値を使うと、子からヒントを渡せます。プロトコルの両方のメソッドで一貫して測定し、報告するサイズと配置が常に一致するようにします。
よくある質問
「サブビューの測定」レッスンは無料ですか?
はい。「サブビューの測定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「サブビューの測定」で何を学びますか?
レイアウト中にサブビューのサイズを取得します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「サブビューの測定」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか?
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。