文字サイズ最大とドイツ語で、生成された画面は静かに詰まる — Rork Max の SwiftUI にレイアウト耐性の検証を通した記録

// 生成された形。既定値では正しく動くが、AX5 でスイッチが画面外へ出る
struct SettingRow: View {
    let title: String
    @Binding var isOn: Bool
 
    var body: some View {
        HStack {
            Text(title)
            Spacer()
            Toggle("", isOn: $isOn)
                .labelsHidden()
        }
        .padding(.horizontal, 16)
    }
}

struct SettingRow: View {
    let title: String
    @Binding var isOn: Bool
 
    // 文字サイズがアクセシビリティ帯に入ったかを見る
    @Environment(\.dynamicTypeSize) private var typeSize
 
    var body: some View {
        // アクセシビリティ帯では横並びを諦めて縦に落とす
        ViewThatFits(in: .horizontal) {
            horizontalLayout
            verticalLayout
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 8)
    }
 
    private var horizontalLayout: some View {
        HStack(spacing: 12) {
            Text(title)
                .layoutPriority(0)          // ラベルは譲る
            Spacer(minLength: 8)
            Toggle("", isOn: $isOn)
                .labelsHidden()
                .layoutPriority(1)          // コントロールは死守
                .fixedSize()                // 圧縮そのものを拒否
        }
    }
 
    private var verticalLayout: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .fixedSize(horizontal: false, vertical: true)
            Toggle("", isOn: $isOn)
                .labelsHidden()
        }
        .frame(maxWidth: .infinity, alignment: .leading)
    }
}

// 生成された形
Button("設定を保存") { save() }
    .frame(width: 120, height: 44)
    .background(Color.accentColor)
    .foregroundStyle(.white)
    .clipShape(RoundedRectangle(cornerRadius: 8))

Button {
    save()
} label: {
    Text("settings.save")            // String Catalog のキー
        .lineLimit(2)                 // 2行までは許す
        .multilineTextAlignment(.center)
        .minimumScaleFactor(0.8)      // 縮小は 80% まで
        .frame(minWidth: 120)         // 下限だけ残す
        .frame(maxWidth: .infinity)
        .padding(.vertical, 12)
        .padding(.horizontal, 16)
}
.buttonStyle(.borderedProminent)
.frame(maxWidth: 320)                 // 上限で巨大化を抑える

// 追従しない
Text(label).font(.system(size: 15))
 
// 追従する（テキストスタイル基準の相対指定）
Text(label).font(.system(.subheadline, design: .rounded))
 
// 15pt を起点にしつつ追従させたい場合
Text(label).font(.system(size: 15, weight: .medium))
    .dynamicTypeSize(...DynamicTypeSize.accessibility3)   // 上限だけ設ける

struct StatCard: View {
    // 基準サイズを宣言すると、文字サイズ設定に比例して値が変わる
    @ScaledMetric(relativeTo: .headline) private var iconSize: CGFloat = 28
    @ScaledMetric(relativeTo: .body) private var cardPadding: CGFloat = 16
    @ScaledMetric(relativeTo: .body) private var cornerRadius: CGFloat = 12
 
    let title: String
    let value: String
 
    var body: some View {
        HStack(spacing: cardPadding * 0.75) {
            Image(systemName: "chart.bar.fill")
                .font(.system(size: iconSize))
                .frame(width: iconSize, height: iconSize)
 
            VStack(alignment: .leading, spacing: 4) {
                Text(title)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .fixedSize(horizontal: false, vertical: true)
                Text(value)
                    .font(.headline)
                    .fixedSize(horizontal: false, vertical: true)
            }
            Spacer(minLength: 0)
        }
        .padding(cardPadding)
        .background(.regularMaterial, in: RoundedRectangle(cornerRadius: cornerRadius))
    }
}

import XCTest
import SwiftUI
@testable import MyApp
 
final class LayoutResilienceTests: XCTestCase {
 
    /// 検証する4条件。全組み合わせは回さない。
    struct Condition {
        let name: String
        let locale: Locale
        let typeSize: DynamicTypeSize
    }
 
    static let conditions: [Condition] = [
        .init(name: "base",      locale: Locale(identifier: "ja_JP"), typeSize: .large),
        .init(name: "ax5",       locale: Locale(identifier: "ja_JP"), typeSize: .accessibility5),
        .init(name: "double",    locale: Locale(identifier: "en_DOUBLE"), typeSize: .large),
        .init(name: "worst",     locale: Locale(identifier: "en_DOUBLE"), typeSize: .accessibility5),
    ]
 
    /// はみ出しと切り詰めを機械的に判定する
    func assertNoOverflow<V: View>(
        _ view: V,
        named name: String,
        containerWidth: CGFloat = 393,      // iPhone 16 の論理幅
        file: StaticString = #filePath,
        line: UInt = #line
    ) {
        for condition in Self.conditions {
            let hosted = view
                .environment(\.locale, condition.locale)
                .environment(\.dynamicTypeSize, condition.typeSize)
                .frame(width: containerWidth)
 
            let renderer = ImageRenderer(content: hosted)
            renderer.proposedSize = ProposedViewSize(width: containerWidth, height: nil)
 
            guard let image = renderer.uiImage else {
                XCTFail("\(name)/\(condition.name): レンダリング失敗", file: file, line: line)
                continue
            }
 
            // 幅がコンテナを超えていれば水平方向の押し出し
            let renderedWidth = image.size.width
            XCTAssertLessThanOrEqual(
                renderedWidth, containerWidth + 0.5,
                "\(name)/\(condition.name): 幅 \(renderedWidth)pt がコンテナ \(containerWidth)pt を超過",
                file: file, line: line
            )
 
            // 参照画像との比較（初回は記録）
            assertSnapshot(image, named: "\(name)_\(condition.name)", file: file, line: line)
        }
    }
 
    func testSettingRow() {
        assertNoOverflow(
            SettingRow(title: "settings.background_refresh", isOn: .constant(true)),
            named: "SettingRow"
        )
    }
 
    func testStatCard() {
        assertNoOverflow(
            StatCard(title: "stats.total_views", value: "128,400"),
            named: "StatCard"
        )
    }
}

レイアウトの制約:
- 文字サイズ設定 AX5（310%）で操作不能にならないこと
- ラベルとコントロールの HStack は ViewThatFits で縦積みへ落とすこと
- コントロール側に layoutPriority(1) と fixedSize() を付けること
- .font(.system(size:)) の絶対指定を使わず、テキストスタイル基準で書くこと
- アイコン・余白の寸法は @ScaledMetric(relativeTo:) で宣言すること
- ボタンに .frame(width:) を使わず、minWidth と maxWidth で挟むこと