🔴Dynamic Type Sizes

🔴 主題

• DynamicTypeSize+ext (extension)

📘 手冊

• Human Interface Guidelines ⟩

  • Dynamic Type Sizes (iOS)

  • Dynamic Type Sizes (watchOS)

• SwiftUI ⟩ State and Data Flow ⟩ EnvironmentValues (struct) ⟩

  • .dynamicTypeSize : DynamicTypeSize (enum)

    • .isAccessibilitySize : Bool - case accessibility1 ~ accessibility5

📗 參考

• FiveStars ⟩ How to make SwiftUI views adaptive

• Sarun ⟩ How to scale custom fonts with Dynamic Type in SwiftUI

👥 相關

• ViewBuilder

• DynamicTypeSize+ext

• AdaptiveHStack

• Picker

Examples

目錄

• 例一：顯示各種 dynamic type size 的相對大小。

• 例二：根據 dynamic type size 將 HStack 調整為 VStack。

💈例一

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)
        }
    }
}

💈例二

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)
        }
    }
}

⬆️ 需要

• DynamicTypeSize+ext

• AdaptiveHStack