SwiftUI Text

The Text view in SwiftUI is incredibly versatile, allowing for the display of static text or dynamic content passed through variables. It supports styling, formatting, and localization, making it a powerful tool for developers to present information in their apps. This guide will walk you through the basics to more advanced uses of Text, making your apps more interactive and engaging.

import SwiftUI

struct SwiftUI_Text: View {
    var body: some View {
        
           Text("Hello, UIExamples.com readers!")
               .font(.title) // Sets the font to a title size.
               .fontWeight(.bold) // Makes the text bold.
               .foregroundColor(.blue) // Sets the text color to blue.
               .multilineTextAlignment(.center) // Centers the text.
               .padding() // Adds padding around the text.
       }
    
}

#Preview {
    SwiftUI_Text()
}

This code snippet showcases a basic Text view with various modifiers applied to customize its appearance. It’s a simple yet effective way to understand how text can be manipulated in SwiftUI to fit the design needs of your application.

Basic Text Display

Text("Hello, UIExamples.com!")

This simple line of code displays a basic string. However, SwiftUI’s Text goes far beyond displaying static content.

Styling Text

Customize your text’s appearance to fit your app’s design. You can change the font, color, and weight.

 Text("Welcome to SwiftUI!")
            .font(.headline)
            .foregroundColor(.green)
            .fontWeight(.bold)

Combining Text Views

SwiftUI allows you to concatenate Text views, enabling dynamic content creation.

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

Text Alignment and Limitation

Control the alignment and the number of lines displayed in your Text view.

Text("A long string that we want to wrap across multiple lines in our SwiftUI view.")
            .frame(width: 200)
            .multilineTextAlignment(.center)
            .lineLimit(3)

Adding Text Decorations: Strikethrough and Underline

  Text("Sale ends today!")
            .strikethrough()
        
  Text("Don't miss out!")
             .underline()

Adjusting Text Kerning and Tracking

Fine-tune the spacing between characters or across text.

Text("Kerning").kerning(2)
Text("Tracking").tracking(3)

Text Shadow and Background

Enhance text visibility with shadows and backgrounds.

        Text("Shadowed Text")
            .shadow(color: .red, radius: 2, x: 0, y: 2)
            .background(Color.yellow)

Localized Strings

Support multiple languages in your app by localizing strings.

 Text(LocalizedStringKey("Hello"))

Links within Text

Make a part of your text clickable.

   // Links within Text
        Text("Visit UIExamples.com Website")
            .foregroundColor(.blue)
            .onTapGesture {
                if let url = URL(string: "https://www.uiexamples.com"),
                   UIApplication.shared.canOpenURL(url) {
                    UIApplication.shared.open(url)
                }
            }

Displaying Integers in Text

SwiftUI effortlessly integrates integers within Text views, perfect for dynamic data displays.

let score = 10
Text("Your score is \(score)")

Conclusion

SwiftUI’s Text view is a powerful way to display and style text in your apps. Experiment with these examples to discover how versatile Text can be in enhancing your app’s UI.