Last updated on March 9, 2023
Text can be used to represent TextView or UILabel in UIKit. Text has capabilities of both TextView & UILabel. Isn’t is awesome that you won’t be switching either to UILabel or TextView because one lacks some capabilities. This is definitely a good news!
A view that displays one or more lines of read-only text.
Apple Documentation
In this tutorial, you’ll learn what it takes to use Text in SwiftUI. You’ll learn:
- How to limit text line
- Different text styles
- Different font weight
- Different font design
- Different text formatting
- Text alignment
- Truncation mode
- Combining modified texts
Prerequisites
To follow along this tutorial, you’ll need some basic knowledge in:
- A basic familiarity with Swift.
- At least Xcode 11
Text Line Limit
By default the line limit is set to unlimited but in case you would like to limit the line, you could use the lineLimit
and insert the number of line you would like to have. Below is an example of line limit.
struct ContentView: View {
var body: some View {
VStack(spacing: 50) {
Text("This is suppose to be a really long text that can go on to multiple lines. By default, it could go more than one lines.")
Text("This is only one line regardless of how long the sentence is")
.lineLimit(1)
}
}
}
The first text does not implement lineLimit
and the line can go on and on. While the second text implements a lineLimit
of 1, it only allows one line regardless of how long the text is.
Text Styles
You can modify the text styles easily the type of style you would like to use.
Text("Hello Swift").font(.largeTitle)
Text("Hello Swift").font(.title)
Text("Hello Swift").font(.headline)
Text("Hello Swift").font(.subheadline)
Text("Hello Swift").font(.body)
Text("Hello Swift").font(.callout)
Text("Hello Swift").font(.footnote)
Font Weight
You can also adjust the font weight depending on your need.
Text("Hello Swift").fontWeight(.ultraLight)
Text("Hello Swift").fontWeight(.thin)
Text("Hello Swift").fontWeight(.light)
Text("Hello Swift").fontWeight(.regular)
Text("Hello Swift").fontWeight(.medium)
Text("Hello Swift").fontWeight(.semibold)
Text("Hello Swift").fontWeight(.bold)
Text("Hello Swift").fontWeight(.heavy)
Text("Hello Swift").fontWeight(.black)
Font Design
There are about 4 Font Design available for use and they are default
, monospaced
, rounded
and serif
.
Text("Hello Swift").font(Font.system(size: 36, design: Font.Design.default))
Text("Hello Swift").font(Font.system(size: 36, design: .monospaced))
Text("Hello Swift").font(Font.system(size: 36, design: .rounded))
Text("Hello Swift").font(Font.system(size: 36, design: .serif))
Text Formatting
You also can format the text to several other factor such as bold, italic and more. What you will about to see also will give you some insights of the new capabilities that you may easily achieve compare to UIKit.
Text("Hello Swift").bold()
Text("Hello Swift").italic()
Text("Hello Swift").strikethrough()
Text("Hello Swift").strikethrough(true, color: .blue)
Text("Hello Swift").foregroundColor(.yellow)
Text("Hello Swift").underline()
Text("Hello Swift").underline(true, color: .red)
Line Spacing
Traditionally this could be achieved by TextView and not UILabel. With the introduction of Text, it definitely has make things a lot easier.
Text Alignment
This is a basic one by aligning the text to certain angle using multilineTextAlignment
.
Text("This really long text is meant to have some space in between the texts to make it nicer. This is cool!")
.multilineTextAlignment(.center)
You can even try it with .trailing
or .leading
which would align it right and left respectively.
Truncation Mode
By truncating the text, you see a three dots (…) either in between text, beginning of the text or at the end of the text. You can use truncationMode
and select either .middle
, .tail
or .head
. The below is an example of middle.
Text("This really long text is meant to have some space in between the texts to make it nicer. This is cool!")
.truncationMode(.middle)
.lineLimit(1)
Combining Modified Texts
This is a widely used features in most of my projects with a combination of certain design on certain texts. This certainly is a lot easier to achieve and I really do look forward to SwiftUI.
Text("What about a combination of cool texts such as") +
Text(" bold ").bold() +
Text("Yellow Text").foregroundColor(.yellow) +
Text(" or ") +
Text(" a design font ").font(.title).fontWeight(.medium)
Custom Fonts
You can even configure the text to use certain fonts that are already provided by Apple in the system.
Text("What about a combination of cool texts such as").font(Font.custom("Helvetica Neue", size: 30))
What if you would like to add your own kind of font. That’s definitely do-able. I downloaded a font from this site. It’s called Pacifico. Then head to Info.plist
Make sure that the font file target your project or else it will not work.
Where to go From Here
If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:
A very helpful, simply explained article. Thank you!
Hi! Gosh, im looking forward to using your suggestions and feel safe trying these out with my apple pro ipad. In this tech savvy world, you never know how secure and safe these apps are, but since its already available in my system, i feel its the best choice at this point.
Apple , and unfortunately Google, already know my life’s choices. Dang it!