How to create static labels with a Text view in SwiftUI?

By | July 8, 2024

Text views are used to show static text on screen. They are equal to UILabel in UIKit. The most basic type of UILabel looks like:

Text("Hello World")

Inside the preview window for the content view, you may see “Automatic preview updating paused”. Sometimes it shows like that, go ahead and press Resume to have swift start building your code and show you a live preview of how it looks.

There is a shortcut method for resuming the preview: Opt+Cmd+P. You can use this for quick refreshing.

Usually text views wrap across as many lines as they need to show text, but if you would like to limit the number of lines to show, you can use ‘lineLimit’ modifier as shown below.

Text("This is some longer text that is limited to three lines maximum, so anything more than that will cause the text to clip.")
    .lineLimit(2)
    .frame(width: 250)

The above code snippet will appear as shown below.

Instead of giving a fixed number for limiting the lines, we can give a range too. For example:

Text("This is some longer text that is limited to a specific range of lines, so anything more than six lines will cause the text to clip.")
    .lineLimit(3...6)
    .frame(width: 200)

The above code snippet will appear as shown below.

If you need an exact line limit – meaning “this text should have exactly two lines of height, not more and not less”, you should use the ‘reservesSpace‘ parameter like this:

        Text("This is always two lines. Therefore it is not possible to increase more than two lines. Same is true for small screen devices too")
                .lineLimit(2, reservesSpace: true)

The above code snippet will appear as shown below.

That doesn’t mean the text will somehow be stretched across two lines, only that the text view will be sized to be two lines in height no matter what its contents. This approach is particularly helpful when you need an exact number of lines – in grids and other layouts where you want nice and even spacing, for example.

If you place a line limit on some text then provide it with a string that’s too long to fit in the available space, SwiftUI will truncate the text so that it ends with “…”.

You can adjust the way SwiftUI truncates your text: the default is to remove text from the end and show an ellipsis there instead, but you can also place the ellipsis in the middle or beginning depending on how important the various parts of your string are.

For example, this truncates your text in the middle:

Text("This is an extremely long string of text that will never fit even the widest of iOS devices even if the user has their Dynamic Type setting as small as is possible, so in theory it should definitely demonstrate truncationMode().")
    .lineLimit(1)
    .truncationMode(.middle)

Regardless of how you truncate the text, what you’ll see is that your text view sits neatly centered in the main view. This is the default behavior of SwiftUI: unless it’s told to position views somewhere else, it positions them relative to the center of the screen.

Leave a Reply

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