Skip to content

SwiftUI: Text

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.

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.

Font Weight

You can also adjust the font weight depending on your need.

Font Design

There are about 4 Font Design available for use and they are default, monospaced, rounded and 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.

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.

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.

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.

Custom Fonts

You can even configure the text to use certain fonts that are already provided by Apple in the system.

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

One Comment

  1. John Stevenson John Stevenson

    A very helpful, simply explained article. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *