【SwiftUI】Dynamic Typeに合わせてカスタム画像をスケーリングする

✅ コード

struct SampleView: View {
  @ScaledMetric(relativeTo: .body)
  private var imageHeight = 17 // 初期値

  var body: some View {
    HStack(spacing: 2) {
      Image(.githubMark)
        .resizable()
        .scaledToFit()
        .frame(height: imageHeight)
      Text("Test User")
        .font(.body)
    }
  }
}

上記のコードでは、@ScaledMetricを使用してimageHeightを定義している。これにより、ユーザーがDynamic Typeの設定を変更した際に、画像の高さが自動的に調整される。

relativeTo: .bodyを指定することで、.bodyテキストスタイルに基づいてスケーリングされる。

---

📝 @ScaledMetricについて

• @ScaledMetricは、数値プロパティをDynamic Typeに対応させるためのプロパティラッパー。
• 初期値を基準として、ユーザーがテキストサイズを変更すると、SwiftUIが自動的に数値をスケーリングする。
• relativeToパラメータを使用することで、スケーリングの基準となるテキストスタイル（例：.body、.titleなど）を指定できる。

---

🔗 参考資料

• 📺 Get started with Dynamic Type - WWDC24 (10:59〜)
• 📘 Applying custom fonts to text | Apple Developer Documentation