In this tutorial, I’ll guide you through the ins and outs of using and customizing the SwiftUI label component. Whether you’re a seasoned iOS developer or just starting out with SwiftUI, understanding how to effectively utilize labels can greatly enhance the user experience of your app.
With the Swift label, you have the power to combine text, color, and even images to create visually appealing and informative elements in your user interface. Additionally, I will show you how to use label styles, such as title-only, icon-only, and title-and-icon styles.
If you’re feeling adventurous, we’ll even touch on creating custom label styles by adopting the LabelStyle protocol. This protocol allows you to write reusable label style components.
So, join me on this journey to master the art of utilizing and customizing SwiftUI labels!
Where are Labels used in iOS apps?
In SwiftUI, labels are commonly used in various parts of an app’s user interface. Here are some common places where labels are used:
- Tab Bar Items: Labels are used to provide text and icons for each tab in a tab bar. This helps users navigate between different sections or views in the app.
- Buttons: Labels are used to provide descriptive text on buttons, making them more informative and interactive. This helps users understand the purpose or action associated with the button.
- Navigation Bar Buttons: Labels can be used as titles or buttons in the navigation bar. This helps provide context and navigation options to the user.
- Lists: Labels are used to display text for each item in a list. This helps users identify and categorize the items in the list.
How do I add labels in SwiftUI?
The Label component in SwiftUI combines a title and an optional system image, making it a versatile tool for various UI elements. To create a label, you can use the following syntax:
Label("Home", systemImage: "house")The first parameter is the title of the label, which can be a simple string or a localized string for internationalization purposes. The second parameter, systemImage, allows you to add an icon from the SF Symbols collection to the label. You can find a list of all system images in the SF Symbols app.
How to change the size of a Label
You can also customize the size of the label by using the font modifier. For instance, to make the label larger, you can use the title font:
This will increase the size of the label’s title and icon. If you want to make the image larger or smaller independently from the text, you can use the image scale modifier:
Label("Swift", systemImage: "swift")
.imageScale(.small)
Label("Swift", systemImage: "swift")
.imageScale(.medium)
Label("Swift", systemImage: "swift")
.imageScale(.large)
SwiftUI label just like text will reactive to dynamic type sizes. The icon and text will scale nicely together:
How to change the color of SwiftUI Label
This will increase the size of the label’s title and icon. If you want to make the image larger or smaller independently from the text, you can use the image scale modifier:
Label("Add New Folder",
systemImage: "folder.badge.plus")
Label("Add New Folder",
systemImage: "folder.badge.plus")
.foregroundStyle(.accent)
Label("Add New Folder",
systemImage: "folder.badge.plus")
.foregroundStyle(.blue, .pink)
If you want to change the icon color for labels inside a List, you should use the tint modifier instead of foregroundStyle:
struct LabelListExampleView: View {
var body: some View {
NavigationStack {
List {
Label("Folder 1", systemImage: "folder.fill")
Label("Folder 2", systemImage: "folder.fill")
Label("Folder 3", systemImage: "folder.fill")
Label("New Folder", systemImage: "folder.badge.plus")
}
.navigationTitle("Labels")
// .foregroundStyle(.orange)
// .foregroundStyle(.pink, .blue)
.tint(.cyan)
}
}
}
Applying Styles to Labels
In addition to the basic customization options, SwiftUI provides various label styles that you can apply to your labels. These styles define the appearance and behavior of the label, such as whether it displays only the title, only the icon, or both.
To apply a label style, you can use the labelStyle modifier. For example, to create a label with only the icon, you can use:
Label("Home", systemImage: "house")
.labelStyle(IconOnlyLabelStyle())
Label("Home", systemImage: "house")
.labelStyle(.iconOnly) // for iOS 14+, macOS 11+This will display the label with only the house icon, removing the title.
You also can choose to always use the title and icon or only the title:
Label("Home", systemImage: "house")
.labelStyle(.titleAndIcon)
Label("Home", systemImage: "house")
.labelStyle(.titleOnly)Creating Custom Label Styles by adopting the LabelStyle protocol
You can also create custom label styles by adopting the LabelStyle protocol. This allows you to create unique label styles that match your app’s design and branding.
extension LabelStyle where Self == SocialFeedTagLabelStyle {
static var socialFeedTag: SocialFeedTagLabelStyle {
SocialFeedTagLabelStyle()
}
}
struct SocialFeedTagLabelStyle: LabelStyle {
@ScaledMetric(relativeTo: .footnote) private var iconWidth = 14.0
func makeBody(configuration: Configuration) -> some View {
HStack {
configuration.icon
.foregroundColor(.secondary)
.frame(width: iconWidth)
configuration.title
}
.padding(6)
.background(in: RoundedRectangle(cornerRadius: 5, style: .continuous))
.compositingGroup()
.shadow(radius: 1)
.font(.caption)
}
}You can then apply this label style to any label. As en example, I use it for a list of tags in a flow layout:
FlowLayout(alignment: .leading) {
ForEach(tags) { tag in
Label(tag.title, systemImage: tag.icon)
.labelStyle(.socialFeedTag)
}
}
Conclusion
Label component in SwiftUI is a powerful tool for adding descriptive information to your user interface. With its ability to combine titles and icons, along with various customization options, you can create visually appealing and informative labels that enhance the user experience.