Apple didn’t exactly call the second iteration of SwiftUI a 2.0, but there were really some crackling updates announced during WWDC 2020.

Besides the introduction of Grids and MatchedGeometryEffect, SwiftUI Text also got a huge boost. In addition to that, Label, Link, and TextEditor were introduced to allow the building of forms, buttons, and fancy text to be a whole lot easier.

In the next few sections, we’ll look at what you can achieve with the new Text controls in SwiftUI in iOS 14.

SwiftUI Text Now Supports Powerful Interpolation

SwiftUI Text has been bumped up this year with new initializers to let you format dates, interpolate strings with images, and add Text within Text.

Let’s look at how to wrap images with SF symbols in SwiftUI Text:

Text("Hello, \(Image(systemName: "heart.fill"))

Text(Image(systemName:))

The following examples show what we can achieve by concatenating a few SwiftUI Texts:

SwiftUI Text has also gotten two initializers for wrapping dates in strings — namely a date interval and a date range, with an optional argument to set the style.

Let’s look at the different ways to set and format dates in Swift Text:

Text(Date().addingTimeInterval(600))

Text(Date().addingTimeInterval(3600),style: .time)

addTimeInterval accepts absolute values only, so the above two snippets set the date at T + 10 minutes and T + 1 hour in different styles.

What’s amazing about the new semantic API is it lets you set a counter or timer within the SwiftUI Text initializer using the styles relative, timer, and offset.

//countdown timer to update every minute

Text(Date().addingTimeInterval(60),style: .offset)

Now, you might be wondering if setting a timer will trigger the SwiftUI view body to refresh every seconds, but that isn’t the case.

SwiftUI Text considers the counter as an animation, which means it interpolates values between the start and end date. Let’s look at different kinds of Texts:

Pay heed to how the three different styles of Timer behave differently. And also that they autoreverse at the end of the counter.

SwiftUI Text also makes it possible to interpolate Text within Text while preserving each of their identities. Like “Inception.”

SwiftUI Labels to Display Text and Images Together

SwiftUI Labels are an out-of the box substitute for a view we were using a lot: wrapping text and image in stacks.

Here’s how to define the all-new SwiftUI Label:

Label("Hello Label", systemImage: "sun.min")

Label("Hello Label", image: "asset_image")

Label(title: {Text("..")}, icon: {Image(..)})

Labels also provide a labelStyle modifier that comes with two built-in variants — TitleOnlyLabelStyle and IconOnlyLabelStyle. Though you can create your own custom label style configuration as well.

In the below screen grab, we’re showing the different types of Labels and how to use them in a ContextMenu:

Labels largely reduce the unnecessary Text and Image views we had to define in ContextMenu buttons.

Though it’d be a dream to get a SwiftUI button initializer that lets us set images as well.

Creating Your Own Label Style

We can create custom styles for our labels by conforming to the LabelStyle.

The below code looks to set the icon and text vertically, instead of being horizontally aligned.

You can now set it inside the view modifier as .labelStyle(VLabelStyle()).

Conclusion

SwiftUI Text now supports more powerful interpolations that let you set timers in a single line (in fact, just a few words).

SwiftUI Labels are handy inside outlined lists and context menus.

You can view or download the source code of everything we covered from this gist link.

That’s it for this one. Thanks for reading.