今天我想和您談?wù)凷wiftUI中對動態(tài)類型的支持旭从。我認(rèn)為，如果您的應(yīng)用中沒有動態(tài)類型支持场仲，就無法創(chuàng)造出色的用戶體驗和悦。 SwiftUI為任何文本表示形式提供了開箱即用的動態(tài)類型，并簡化了我們的工作渠缕。但是我們?nèi)匀恍枰鲆恍┕ぷ鞲胨兀宰屛覀冋務(wù)勊?/p>

動態(tài)類型基礎(chǔ)(Dynamic type)

動態(tài)類型功能允許用戶選擇屏幕上顯示的文本內(nèi)容的大小。它可以幫助需要較大文本以提高可讀性的用戶亦鳞。它還適合那些閱讀較小文本的人員付鹿，使更多信息顯示在屏幕上。支持動態(tài)類型的應(yīng)用程序還提供了更一致的閱讀體驗蚜迅。

您無需執(zhí)行任何操作即可在SwiftUI視圖中支持動態(tài)類型，因為默認(rèn)情況下俊抵，表示文本的所有組件都是多行的谁不。 Apple的《人機(jī)界面指南》有一個關(guān)于版式的特殊部分，其中提供了常見的文字樣式徽诲。這些文本樣式描述了不同類型的文本內(nèi)容（例如標(biāo)題刹帕，標(biāo)題吵血，正文盐肃，副標(biāo)題语卤，標(biāo)題娄柳，腳注）的字體配置消略。樣式在所有應(yīng)用程序之間共享瘪菌。嘗試盡可能使用這些預(yù)定義的文本樣式弛秋。這是一個如何在SwiftUI中使用HIG定義的文本樣式的小示例凝危。

struct PostView: View {
    let post: Post

    var body: some View {
        VStack(alignment: .leading) {
            Image(post.image)

            Text(post.title)
                .font(.headline)

            Text(post.time)
                .font(.subheadline)

            Text(post.body)
                .font(.body)
        }
    }
}

內(nèi)容大小類別(Content Size category)

在上一段中军俊，我說過SwiftUI開箱即用地支持動態(tài)類型尉共，這是事實褒傅。但是要支持動態(tài)類型，我們需要記住袄友，即使只有兩個單詞殿托，每個文本也可以是多行。這完全取決于用戶定義的字體大小剧蚣，該字體大小可能會很大。 SwiftUI提供了一個特殊的環(huán)境值來描述用戶定義的大小類別鸠按。讓我們來看看如何使用它

import SwiftUI

struct ContentView: View {
    @Environment(\.sizeCategory) var sizeCategory

    var buttons: some View {
        Group {
            Button("Action 1") {}
            Button("Action 2") {}
        }
    }

    var body: some View {
        Group {
            if sizeCategory == .accessibilityLarge {
                VStack { buttons }
            } else {
                HStack { buttons }
            }
        }
    }
}

通過使用環(huán)境的sizeCategory值礼搁，我們可以讀取定義的字體大小并決定如何呈現(xiàn)我們的內(nèi)容。通過使用環(huán)境待诅，我們的應(yīng)用程序?qū)⒂嗛喯到y(tǒng)設(shè)置，并且一旦用戶更改了字體大小募书，我們的視圖就會重新加載

讓我們繼續(xù)，為Group組件創(chuàng)建一個擴(kuò)展，根據(jù)用戶定義的大小類別將其嵌入到水平或垂直堆棧中琉挖。

import SwiftUI

fileprivate struct EmbedInStack: ViewModifier {
    private let verticalSizes: [ContentSizeCategory] = [
        .accessibilityMedium,
        .accessibilityLarge,
        .accessibilityExtraLarge,
        .accessibilityExtraExtraLarge,
        .accessibilityExtraExtraExtraLarge
    ]

    @Environment(\.sizeCategory) var sizeCategory

    func body(content: Content) -> some View {
        Group {
            if verticalSizes.contains(sizeCategory) {
                VStack { content }
            } else {
                HStack { content }
            }
        }
    }
}

extension Group where Content: View {
    func embedInStack() -> some View {
        modifier(EmbedInStack())
    }
}

在上面的示例中寥茫，我們使用ViewModifier纱耻，它將視圖組包裝到堆棧中玖喘。 ViewModifiers的優(yōu)點之一是擁有狀態(tài)或訂閱環(huán)境值的能力。

ScrollView

短文本為多行的可能性帶來了另一個要求费尽。我們需要將根視圖嵌入滾動視圖旱幼，以允許用戶在不適合屏幕的情況下滾動內(nèi)容。它很快就變成樣板，這就是為什么我創(chuàng)建了一個特殊擴(kuò)展以重用此功能的原因

import SwiftUI

extension View {
    func embedInScrollView(alignment: Alignment = .center) -> some View {
        GeometryReader { proxy in
            ScrollView {
                self.frame(
                    minHeight: proxy.size.height,
                    maxHeight: .infinity,
                    alignment: alignment
                )
            }
        }
    }
}

結(jié)論

動態(tài)類型是一項非常重要的功能，每個應(yīng)用程序都應(yīng)支持它弛车。 SwiftUI開箱即用地支持動態(tài)類型喻括，但是需要一些樣板唤崭。今天，我們學(xué)習(xí)了如何通過創(chuàng)建特殊的視圖擴(kuò)展來減少它兜挨。

SwiftUI中的動態(tài)類型Dynamic Type

SwiftUI中的動態(tài)類型Dynamic Type

動態(tài)類型基礎(chǔ)(Dynamic type)

內(nèi)容大小類別(Content Size category)

ScrollView

結(jié)論

推薦

基礎(chǔ)文章推薦

經(jīng)典教程推薦

技術(shù)源碼推薦

推薦文章

CoreData篇

TextField篇

JSON文件篇

一篇文章系列

技術(shù)交流