Skip to content

SwiftUI: Text

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:

Published inSwiftUI

2 Comments

  1. 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!

Comments are closed, but trackbacks and pingbacks are open.