SwiftData offers a seamless way to manage and persist data with minimal effort. In this…
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.appmakers.dev"),
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.