# Dynamic Type Sizes

{% tabs %}
{% tab title="🔴 主題" %}
* [dynamictypesize+ext](dynamic-type-sizes/dynamictypesize+ext "mention") (<mark style="color:red;">**extension**</mark>)
{% endtab %}

{% tab title="📘 手冊" %}
* Human Interface Guidelines ⟩&#x20;
  * [Dynamic Type Sizes](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/#dynamic-type-sizes) (iOS)
  * [Dynamic Type Sizes](https://developer.apple.com/design/human-interface-guidelines/watchos/visual/typography/#dynamic-type-sizes) (watchOS)
* SwiftUI ⟩ [State and Data Flow](https://developer.apple.com/documentation/swiftui/state-and-data-flow) ⟩ [EnvironmentValues](https://developer.apple.com/documentation/swiftui/environmentvalues) (<mark style="color:red;">**struct**</mark>) ⟩
  * [.dynamicTypeSize](https://developer.apple.com/documentation/swiftui/environmentvalues/dynamictypesize) : [DynamicTypeSize](https://developer.apple.com/documentation/swiftui/dynamictypesize) (<mark style="color:red;">**enum**</mark>)
    * [.isAccessibilitySize](https://developer.apple.com/documentation/swiftui/dynamictypesize/isaccessibilitysize) : Bool - case [`accessibility1`](https://developer.apple.com/documentation/swiftui/dynamictypesize/accessibility1) \~ [`accessibility5`](https://developer.apple.com/documentation/swiftui/dynamictypesize/accessibility5)
{% endtab %}

{% tab title="📗 參考" %}
* FiveStars ⟩ [How to make SwiftUI views adaptive](https://www.fivestars.blog/articles/adaptive-swiftui-views/)
* Sarun ⟩ [How to scale custom fonts with Dynamic Type in SwiftUI](https://sarunw.com/posts/swiftui-scale-custom-font-dynamic-type/)
{% endtab %}

{% tab title="👥 相關" %}
* [view-builder](../../view-builder "mention")
* [dynamictypesize+ext](dynamic-type-sizes/dynamictypesize+ext "mention")
* [adaptivehstack](../stacks/adaptivehstack "mention")
* [picker](../../../control/pickers/picker "mention")
{% endtab %}
{% endtabs %}

## Examples

{% tabs %}
{% tab title="目錄" %}
* 例一：顯示各種 dynamic type size 的相對大小。
* 例二：根據 dynamic type size 將 HStack 調整為 VStack。
{% endtab %}

{% tab title="💈例一" %}
```swift
struct DynamicTypeSizeView: View {
    let sizes = DynamicTypeSize.allCases
    var body: some View {
        List(sizes, id: \.self){ size in
            // ⭐️ custom string interpolation with `LocalizedStringKey`
            Text("\(size)")
                // ⭐️ dynamic type size (for child views)
                .environment(\.dynamicTypeSize, size)
        }
    }
}
```

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FGMeFr01DcznN6T6j7nB9%2Fdynamic%20type%20sizes.png?alt=media\&token=30f6727b-3179-45bc-a02e-87d18d1a9362)
{% endtab %}

{% tab title="💈例二" %}
{% embed url="https://youtu.be/kozoXy64nZE" %}

```swift
struct ContentView: View {
    
    // ⭐️ dynamic type size
    @Environment(\.dynamicTypeSize) var typeSize: DynamicTypeSize
    @State private var currentTypeSize: DynamicTypeSize = .medium
    
    let allSizes = DynamicTypeSize.allCases
    
    var typeSizeLargeThanXL: Bool {
        currentTypeSize > .xLarge
    }
    
    var body: some View {
        let _ = print("environ. type size: \(typeSize)")
        let _ = print("selected type size: \(currentTypeSize)")
        VStack {
            // ⭐️ AdaptiveHStack
            AdaptiveHStack(threshold: typeSizeLargeThanXL) {
                Text("Text A")
                Text("Text B")
                Text("Text C")
            }
            // ⭐️ set dynamic type size (for child views❗❗)
            // ❗ 注意：這裡的設定是給「child views」的，不會往外傳遞。
            .environment(\.dynamicTypeSize, currentTypeSize)
            
            Spacer()
            
            // Picker
            Picker("Type Size", selection: $currentTypeSize) {
                ForEach(allSizes, id: \.self) { size in
                    Text("\(size.abbreviation)")
                        .tag(size)
                }
            }.pickerStyle(.segmented)
        }
    }
}
```
{% endtab %}

{% tab title="⬆️ 需要" %}
* [dynamictypesize+ext](dynamic-type-sizes/dynamictypesize+ext "mention")
* [adaptivehstack](../stacks/adaptivehstack "mention")
{% endtab %}
{% endtabs %}
