SwiftUI Text and Label in iOS 14
Let’s explore these powerful text controls
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 Text
s:
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 Text
s:
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 Label
s are an out-of the box substitute for a view we were using a lot: wrapping text and image in stack
s.
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 Label
s and how to use them in a ContextMenu
:
Label
s 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.
struct VLabelStyle: LabelStyle { | |
func makeBody(configuration: Configuration) -> some View { | |
VStack { | |
configuration.icon | |
configuration.title | |
} | |
} | |
} |
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 Label
s 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.