text on Software Development Notes

Animate Text size change in SwiftUI

Eric Callanan — Sunday, 28 Nov 2021

One way to animation the change in text size is to use scale effect, however the text will appear blurred when scaled up. A custom AnimatableModifier can be used to smoothly animate the resizing of text in SwiftUI, which results in displaying clear text at all sizes through the animation.

Text size change without animation

Create a Text View and change the font size and font weight with an easeInOut animation. The font size and weight changes immediately and animates into the correct position.

 1struct ContentView: View {
 2    @State var small = true
 3    
 4    var body: some View {
 5        VStack {
 6            Text("Plain Text")
 7                .font(.system(size: 24))
 8                .frame(width: 350, height: 50, alignment: .leading)
 9            
10            Text("Text - not animated")
11                .font(.system(size: small ? 24 : 36))
12                .fontWeight(small ? .none : .bold)
13                .frame(width: 350, height: 50, alignment: .leading)
14                .onTapGesture {
15                    withAnimation(.easeInOut(duration: 1)){
16                        small.toggle()
17                    }
18                }
19            
20            Spacer()
21        }
22    }
23}

Text with default animation - size jumps to final size

Text with default animation - size jumps to final size

Scale Text size with animation

Use scaleEffect to change the text size with animation. Now the text grows and shrinks with the animated effect, however the text is blurred as the text grows. This is more noticeable at larger sizes.

 1    Text("Text - Scaled")
 2        .font(.system(size: 24))
 3        .fontWeight(small ? .regular : .bold)
 4        .frame(width: 350, height: 50, alignment: .leading)
 5        .scaleEffect(small ? 1.0 : 1.5, anchor: .leading)
 6        .onTapGesture {
 7            withAnimation(.easeInOut(duration: 1)){
 8                small.toggle()
 9            }
10        }

Text scaled with animation - large text is blurred

Text scaled with animation - large text is blurred

Change Text size with custom AnimatableModifier

A custom AnimatableModifier as described in How to animate a Shape change in SwiftUI and Flip a card in SwiftUI is defined to animate the font size change. The size is used as the animatableData so SwiftUI knows how to render font at all the intermediate sizes resulting in a smooth animation.

 1struct AnimatableFontModifier: AnimatableModifier {
 2    var size: Double
 3    var weight: Font.Weight = .regular
 4    var design: Font.Design = .default
 5    
 6    var animatableData: Double {
 7        get { size }
 8        set { size = newValue }
 9    }
10    
11    func body(content: Content) -> some View {
12        content
13            .font(.system(size: size, weight: weight, design: design))
14    }
15}

The AnimatableFontModifier is used to modify the Text View to animate the size change.

1    Text("Size Animated")
2        .modifier(AnimatableFontModifier(size: small ? 24 : 36,
3                                         weight: small ? .regular : .bold))
4        .frame(width: 350, height: 50, alignment: .leading)
5        .onTapGesture {
6            withAnimation(.easeInOut(duration: 1)){
7                small.toggle()
8            }
9        }

Text with custom animatableModifier - large text is clear

Text with custom animatableModifier - large text is clear

View Extension

The custom modifier can be wrapped in a View Extension to make it easier to use on any Text view and allow for cleaner code.

1extension View {
2    func animatableFont(size: Double,
3                        weight: Font.Weight,
4                        design: Font.Design = .default) -> some View {
5        self.modifier(AnimatableFontModifier(size: size,
6                                             weight: weight,
7                                             design: design))
8    }
9}

1    Text("Size Animated")
2        .animatableFont(size: small ? 24 : 36,
3                        weight: small ? .regular : .bold)
4        .frame(width: 350, height: 50, alignment: .leading)
5        .onTapGesture {
6            withAnimation(.easeInOut(duration: 1)){
7                small.toggle()
8            }
9        }

Text with custom animatableFont using View Extension - large text is clear

Text with custom animatableFont using View Extension - large text is clear

Conclusion

SwiftUI does not provide a mechanism to animate font size change. This can be added to text views by creating a custom AnimatableModifier using size as the animatableData. The modified can be embedded in a View Extension for easier use in your application code.

Displaying text in SwiftUI

Eric Callanan — Sunday, 14 Feb 2021

Text is displayed in SwiftUI using the Text view. A Text view is displayed by default when a new iOS app is created and is set to contain the words "Hello world!"

Text View

The Text view is used to display text, which is passed into the view in a parameter. The default iOS app template starts with a simple Text View containing the phrase "Hello World!".

1struct ContentView: View {
2    var body: some View {
3        Text("Hello, world!")
4            .padding()
5    }
6}

Default iOS app showing 'Hello World!' text in a Text view

Default iOS app showing 'Hello World!' text in a Text view

Change Font Style

The default fonts style is "body", but this can be changed with the use of the font modifier. As can be seen from the documentation the font modifier takes one of eleven enumerations to modify the text in the view. The following code displays two Text views, one displaying a title and another displaying body text.

Here is the list of font options:

largeTitle
title
title2
title3
headline
subheadline
body
callout
caption
caption2
footnote

1VStack {
2	Text("Title text")
3		.font(.title)
4	Text("Some body text under the title")
5		.font(.body)
6	Spacer()
7}

Text with 'large title' and 'body' text style

Text with 'large title' and 'body' text style

Using System Fonts

It is also possible to create a custom font, but there is are some advantages to using the system fonts. The text fits in with the default Apple apps and the text from the OS. In addition, the text is responsive and obeys the users preference for text size. This shows the font change size from small to extra large based on the text size settings in the System app. This feature is called Dynamic Type in iOS that adjusts the font size based on the user's settings:
(Settings > Accessibility > Display & Text Size > Larger Text)

Text styles showing sizes for small, large and Extra Large system preferences

Text styles showing sizes for small, large and Extra Large system preferences

Custom fonts can be used and set to respect Dynamic Font. The size of the custom font is specified and this is related to one of the system styles. This text responds to changes to the display text size in Settings.

1VStack {
2	Text("Default")
3		.font(.body)
4	Text("Helvetica Neue")
5		.font(.custom("Helvetica Neue", size: 20, relativeTo: .body))
6	Text("Zapfino")
7		.font(.custom("Zapfino", size: 20, relativeTo: .body))
8	Spacer()
9}

Using custom fonts that respect dynamic font type

Using custom fonts that respect dynamic font type

Font Weight

The font weight modifier is used to set how thick or thin text characters appear. There are 9 options for font weight in Swift.

black
bold
heavy
light
medium
regular
semibold
thin
ultraLight

Font weight options

Font weight options

Fixed Size

It is also possible to specify a fixed size for text. In this case, this text will not respond to Dynamic Font and this may be required in some circumstances.

Code to specify fixed font size

Code to specify fixed font size

Fixed font size remains constant when dynamic font is changed

Fixed font size remains constant when dynamic font is changed

Multiline Text

The Text view supports multiline text by default. There are additional properties that can be set, such as limiting the number of lines displayed and where to truncate the text. Note that using .truncationMode(.head) truncates the start of the last line rather than the start of the entire text.

1Text("There must have been a moment, at the beginning, where we could have said -- no. But somehow we missed it.")
2	.truncationMode(.head)
3	.padding()
4	.frame(width: 300, height: 80, alignment: .center)
5	.background(Color.yellow.opacity(0.3))
6	.cornerRadius(10)

Examples of multiline text

Examples of multiline text

Multiple Properties

There are other properties that can be applied to text and multiple modifiers can be chained together to create unique displays for text in an app.

Common properties used on text

font
fontWeight
padding
background
lineLimit
lineSpacing
foregroundColor

1Text("Final Text")
2	.font(.custom("Baskerville", size: 36, relativeTo: .body))
3	.fontWeight(.bold)
4	.padding(10)
5	.background(Color(.sRGB, red: 192/255, green: 47/255, blue: 19/255, opacity: 1.0))
6	.foregroundColor(.white)
7	.cornerRadius(20)

Combining multiple modifiers on text

Combining multiple modifiers on text

Conclusion

Text is displayed in SwiftUI using the Text view. The text can be configured in a number of ways using modifiers such as font, fontweight, padding and background. The default Text can handle multiline text and it can be modified to set how many lines to display or how to truncate the text. How the text is displayed can be customised significantly by chaining together multiple modifications.