SwiftUI

Text in SwiftUI


Everything starts with a “Hello World”. So let’s see Text in SwiftUI.

Text

A Text is basically a label that is used to display a text.

Text("Hello world!")

Just like that! Pass the string you want to display and it’s that simple.

By default this will use the body font according to the platform, however you can change the font with the font(_:) view modifier.

Like this:

Text("Hello world!")
    .font(.title)

Most commonly used font modifiers are title, largeTitle and body. You can choose from the available options from here.

You can even configure a system font or a custom font:

Text("Hello world!")
    .font(.system(size: 14, weight: .bold, design: .monospaced))

Explore more font designs here.

You can apply further text styling to the text using bold() or italic().

Text("Hello world!")
    .bold()

Now you might want to apply text colors to your text, no worries, foregroundColor(_:) has got it!

Text("Hello world!")
    .foregroundColor(Color.red)

That is about everything about a single line text.

Multiline Text in SwiftUI

Multiline texts can also be displayed using Text. You might want to modify few things when working with Multiline Text.

Let’s start with line limit:

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    .lineLimit(3)

This limits the text to display only 3 lines.

Now you might think what if I don’t want to limit the text? pass nil.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    .lineLimit(nil)

Another common modification people use is the Text Alighment.

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    .multilineTextAlignment(.center)

You can apply any Text Alignment you want from here.

Lastly, you can change the line spacing using lineSpacing(_:):

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
    .lineSpacing(14)

With this declarative syntax, SwiftUI has saved us from the hassle of writing so much code just to say “Hello world”!

That’s all on Text in SwiftUI.

Read more about Text and it’s properties on Apple Documentation.


Checkout another quick article on How To Add Splash Screen in SwiftUI.

If you want to learn how to use SwiftUI in your existing app, then you can read it here!

or If you want to learn how to use and convert your UIViewControllers in SwiftUI, then you can read it here!


Like it? Share with your friends!

0 Comments

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