SwiftUI Text と動的型サイズ（Dynamic Type）

Dynamic Type は iOS のアクセシビリティ機能の一つで、ユーザーがシステム全体のテキストサイズを調整できる仕組みです。SwiftUI の Text はこの機能に自動対応しています。

自動対応のテキストスタイル

システム定義のテキストスタイルを使うと、自動的に Dynamic Type に対応します。

VStack(alignment: .leading) {
    Text("Title").font(.title)
    Text("Body").font(.body)
    Text("Caption").font(.caption)
}

ユーザーが設定アプリでテキストサイズを変更すると、これらのテキストは自動的にサイズが変わります。

カスタムフォントでの対応

カスタムフォントを使う場合は relativeTo: を指定します。

Text("カスタムフォント")
    .font(.custom("Helvetica Neue", size: 17, relativeTo: .body))

こうすると、ベースサイズは 17pt ですが、Dynamic Type の設定に応じてスケールします。

プレビューで確認する

Xcode のプレビューで様々なサイズを確認できます。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.sizeCategory, .extraSmall)
        
        ContentView()
            .environment(\.sizeCategory, .large)
        
        ContentView()
            .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)
    }
}

サイズカテゴリの種類

主なサイズカテゴリは以下のとおりです。

extraSmall

small

medium

large（デフォルト）

extraLarge

extraExtraLarge

extraExtraExtraLarge

accessibilityMedium

accessibilityLarge

accessibilityExtraLarge

accessibilityExtraExtraLarge

accessibilityExtraExtraExtraLarge

大きいサイズでのレイアウト対応

アクセシビリティサイズでは、横並びのレイアウトが収まらなくなることがあります。

@Environment(\.sizeCategory) var sizeCategory

var body: some View {
    if sizeCategory.isAccessibilityCategory {
        VStack { /* 縦並び */ }
    } else {
        HStack { /* 横並び */ }
    }
}

isAccessibilityCategory でアクセシビリティサイズかどうかを判定し、レイアウトを切り替えられます。

最小スケールの設定

スペースが限られる場合は、最小スケールを設定して自動縮小させることもできます。

Text("長いテキスト")
    .minimumScaleFactor(0.7)

Dynamic Type に対応することで、より多くのユーザーにとって使いやすいアプリになります。