Basic Text Usage

Chapter: SwiftUI Fundamentals / Section: Text and Typography

Basic Text Usage in SwiftUI - Complete Guide 2023

A comprehensive guide to Basic Text Usage in SwiftUi. Learn about displaying and styling text with clear explanations. Perfect for beginners starting with SwiftUi.

Table of Contents

Estimated reading time: 10 minutes Last updated: May 2, 2023

Introduction

Text is a fundamental component in any SwiftUI app. Whether you're creating a simple label or a complex document, understanding how to display and style text is essential. In this guide, we'll explore the basics of working with text in SwiftUI, providing clear explanations and examples to help you master text usage in your apps.

Displaying Text

To display text in SwiftUI, you use the Text view. It's a simple yet versatile view that allows you to present static or dynamic text content. Here's a basic example:

Text("Hello, SwiftUI!")

This code creates a text view with the content "Hello, SwiftUI!". The Text view automatically handles text rendering, including line wrapping and truncation when necessary.

Text Styling

SwiftUI provides various modifiers to style your text. You can change the font, color, size, weight, and more. Here are a few common text styling options:

  • font(_:): Sets the font of the text.
  • foregroundColor(_:): Changes the text color.
  • bold(), italic(), underline(): Applies bold, italic, or underline styling.
  • lineSpacing(_:): Adjusts the spacing between lines of text.

For example:

Text("Hello, SwiftUI!") .font(.title) .foregroundColor(.blue) .bold()

Text Alignment

You can control the alignment of text within its container using the multilineTextAlignment(_:) modifier. SwiftUI provides three alignment options:

  • .leading: Aligns the text to the leading edge of its container.
  • .center: Centers the text within its container.
  • .trailing: Aligns the text to the trailing edge of its container.

Here's an example:

Text("This is a long paragraph of text that demonstrates text alignment.") .multilineTextAlignment(.center)

Text Modifiers

SwiftUI offers additional modifiers to customize the appearance and behavior of text:

  • lineLimit(_:): Limits the number of lines the text can span.
  • truncationMode(_:): Specifies how the text should be truncated when it exceeds the available space.
  • minimumScaleFactor(_:): Sets the minimum scale factor for the text to shrink when it doesn't fit.
  • textCase(_:): Applies case transformation to the text (e.g., uppercase, lowercase).

FAQ

Q: How can I create a multiline text in SwiftUI? A: Simply include line breaks (\n) in your text string, and SwiftUI will display it as multiline text.

Q: Can I use custom fonts in SwiftUI? A: Yes! You can add custom fonts to your Xcode project and use them in your SwiftUI views by referring to their names.

Conclusion

In this guide, we covered the basics of text usage in SwiftUI. We learned how to display text using the Text view, style text with various modifiers, control text alignment, and apply additional text customizations. With these fundamentals, you're well-equipped to create engaging and informative text content in your SwiftUI apps.

To further enhance your text formatting skills, explore advanced topics like attributed text, text fields, and text input. Happy coding!