文字サイズ最大とドイツ語で、生成された画面は静かに詰まる — 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"
        )
    }
}

import SwiftUI
 
struct ControlFrame: Equatable {
    let id: String
    let rect: CGRect
}
 
struct ControlFrameKey: PreferenceKey {
    static var defaultValue: [ControlFrame] = []
    static func reduce(value: inout [ControlFrame], nextValue: () -> [ControlFrame]) {
        value.append(contentsOf: nextValue())
    }
}
 
extension View {
    /// タップできる要素にだけ付けて、計測座標系での矩形を報告させる
    func trackHitArea(_ id: String) -> some View {
        background(
            GeometryReader { proxy in
                Color.clear.preference(
                    key: ControlFrameKey.self,
                    value: [ControlFrame(id: id, rect: proxy.frame(in: .named("probe")))]
                )
            }
        )
    }
}

import SwiftUI
import UIKit
 
@MainActor
func measureHitAreas<V: View>(
    of view: V,
    locale: Locale,
    typeSize: DynamicTypeSize,
    containerWidth: CGFloat
) -> [ControlFrame] {
    final class Box { var frames: [ControlFrame] = [] }
    let box = Box()
 
    let probe = view
        .environment(\.locale, locale)
        .environment(\.dynamicTypeSize, typeSize)
        .frame(width: containerWidth)
        .coordinateSpace(name: "probe")
        .onPreferenceChange(ControlFrameKey.self) { box.frames = $0 }
 
    let host = UIHostingController(rootView: probe)
    let fitted = host.sizeThatFits(
        in: CGSize(width: containerWidth, height: .greatestFiniteMagnitude)
    )
    host.view.frame = CGRect(origin: .zero, size: fitted)
    host.view.setNeedsLayout()
    host.view.layoutIfNeeded()
 
    return box.frames
}

@MainActor
func assertHitAreasReachable<V: View>(
    _ view: V,
    named name: String,
    containerWidth: CGFloat = 393,
    minimumSide: CGFloat = 44,
    file: StaticString = #filePath,
    line: UInt = #line
) {
    for condition in LayoutResilienceTests.conditions {
        let frames = measureHitAreas(
            of: view,
            locale: condition.locale,
            typeSize: condition.typeSize,
            containerWidth: containerWidth
        )
 
        // 印の付け忘れを素通りさせない
        XCTAssertFalse(
            frames.isEmpty,
            "\(name)/\(condition.name): trackHitArea の報告が 0 件です",
            file: file, line: line
        )
 
        for frame in frames {
            XCTAssertGreaterThanOrEqual(
                frame.rect.minX, -0.5,
                "\(name)/\(condition.name): \(frame.id) が左へ \(-frame.rect.minX)pt はみ出しています",
                file: file, line: line
            )
            XCTAssertLessThanOrEqual(
                frame.rect.maxX, containerWidth + 0.5,
                "\(name)/\(condition.name): \(frame.id) の右端 \(frame.rect.maxX)pt が画面外です",
                file: file, line: line
            )
            XCTAssertGreaterThanOrEqual(
                frame.rect.width, minimumSide,
                "\(name)/\(condition.name): \(frame.id) の幅 \(frame.rect.width)pt が 44pt 未満です",
                file: file, line: line
            )
            XCTAssertGreaterThanOrEqual(
                frame.rect.height, minimumSide,
                "\(name)/\(condition.name): \(frame.id) の高さ \(frame.rect.height)pt が 44pt 未満です",
                file: file, line: line
            )
        }
    }
}

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