CODEWITHSUNDEEP
swiftswiftuifontsaccessibilitydynamic-type-feature
Rob N
Rob N

Reputation: 16419

Does SwiftUI support alternate layouts by preferred font size?

Ideally, an iOS app uses font sizes that follow the user's system-wide font size setting. The topic is covered in a WWDC talk from 2017 called Building Apps with Dynamic Type.

In simple cases, you set a UIView's font using named styles like body, caption1, title, which vary in size depending on the user's settings.

In trickier cases, you need to write different auto-layout constraints for different font sizes. For example, horizontally stacked labels may need to become vertically stacked when the font is larger.

enter image description here

enter image description here

For this situation, the WWDC talk shows some code like this:

if traitCollection.preferredContentSizeCategory > .extraExtraLarge {
    NSLayoutConstraint.deactivate( horizontalConstraints )
    NSLayoutConstraint.activate( verticalConstraints )
} else {
    NSLayoutConstraint.deactivate( verticalConstraints )
    NSLayoutConstraint.activate( horizontalConstraints )
}

What is the equivalent to this in SwiftUI?

Upvotes: 1

Views: 1532

Answers (2)

ascii
ascii

Reputation: 11

As of iOS 16 you can now use an AnyLayout instance to dynamically transition between layouts (conforming to the Layout protocol) while still maintaining your subview's identity.

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

    var body: some View {
        let layout = dynamicTypeSize > .xxLarge ? AnyLayout(VStackLayout()) : AnyLayout(HStackLayout())

        layout {
            Text("Pizza, bananas, donuts")
            Text("Io, Europa, Ganymede")
        }
    }
}

Note that ContentSizeCategory has been deprecated in iOS 17. The example above uses DynamicTypeSize instead.

Upvotes: 1

LuLuGaGa
LuLuGaGa

Reputation: 14388

The closest I can think of would be something like that:

struct ContentView: View {

    @Environment(\.sizeCategory) var sizeCategory: ContentSizeCategory

    let largeSizeCategories: [ContentSizeCategory] = [.extraExtraLarge,
                                                      .extraExtraExtraLarge,
                                                      .accessibilityMedium,
                                                      .accessibilityLarge,
                                                      .accessibilityExtraLarge,
                                                      .accessibilityExtraExtraLarge,
                                                      .accessibilityExtraExtraExtraLarge]

    var body: some View {
        Group {
            if largeSizeCategories.contains(sizeCategory) {
                VStack {
                    Text("Pizza, bananas, donuts")
                    Text("Io, Europa, Ganymede")
                }
            } else {
                HStack {
                    Text("Pizza, bananas, donuts")
                    Text("Io, Europa, Ganymede")
                }
            }
        }
    }

}

Get the ContentSizeCategory from the Environment and adjust your view depending on the value.

Upvotes: 6

Related Questions