Customizing Picker Font Color in SwiftUI

Customizing Picker Font Color, introduced by Apple in 2019, revolutionized the way developers create interfaces for iOS, macOS, watchOS, and tvOS. With a declarative syntax, SwiftUI allows for simpler and more maintainable code compared to the traditional UIKit framework. One common need for developers is customizing the appearance of UI components, including the Picker. In this article, we will dive deep into how you can change the font color in a SwiftUI Picker, along with best practices and additional customization options.

Understanding SwiftUI Picker

The Picker in SwiftUI is used for selecting a value from a list of items. It provides a variety of styles for different platforms and use cases, such as WheelPickerStyle, MenuPickerStyle, and SegmentedPickerStyle. While the default appearance of the Picker looks great out of the box, developers often want to personalize its appearance, including altering the font color.

Here is a basic example of how a Picker is implemented:

swift

struct PickerExample: View {

@State private var selectedItem = "One"

let items = ["One", "Two", "Three"]

var body: some View {
Picker(“Select an item”, selection: $selectedItem) {
ForEach(items, id: \.self) {
Text($0)
}
}
}
}

This Picker creates a simple selection tool that displays a list of items. The question arises: how can we customize the font color?

Changing Font Color in SwiftUI Picker

Changing the font color in a SwiftUI Picker is not as straightforward as one might expect, mainly because the Picker view itself does not directly expose a way to modify the text appearance. The color customization must be applied at the Text level, or with the help of environment modifiers.

Using `.foregroundColor` on `Text`

A simple method for changing the font color is by applying .foregroundColor to the Text view inside the Picker. Each option in a SwiftUI Picker is typically a Text view, so we can modify its color like this:

swift

struct PickerExampleWithColor: View {

@State private var selectedItem = "One"

let items = ["One", "Two", "Three"]

var body: some View {
Picker(“Select an item”, selection: $selectedItem) {
ForEach(items, id: \.self) { item in
Text(item)
.foregroundColor(.blue) // Change text color
}
}
}
}

In this example, the font color of the items in the Picker is changed to blue. However, this method only affects the color of the text when it is displayed in a Picker, not when it’s selected. In the case of segmented controls or menu pickers, the selected state might not reflect the color change in the same way.

Customizing Picker in Different Styles

SwiftUI Picker supports different styles that determine how the Picker is presented. The way you customize the font color can vary depending on the style you are using. Let’s explore the customization options for various styles.

1. Wheel Picker Style

The WheelPickerStyle is used for creating a scrollable list that mimics the traditional UIPickerView from UIKit. Customizing the font color in this style can be done in a similar way as mentioned earlier, by modifying the Text view inside the Picker.

swift

struct WheelPickerWithColor: View {

@State private var selectedItem = "One"

let items = ["One", "Two", "Three"]

var body: some View {
Picker(“Select an item”, selection: $selectedItem) {
ForEach(items, id: \.self) { item in
Text(item)
.foregroundColor(.red) // Custom font color
}
}
.pickerStyle(WheelPickerStyle()) // Wheel style
}
}

In this case, we are applying the .foregroundColor(.red) to each item in the wheel-style Picker. This will ensure that each list item in the picker has red text when it is displayed.

2. Segmented Picker Style

The SegmentedPickerStyle displays the options as a segmented control, which is a common interface element in iOS. Customizing the font color in a segmented picker can be more challenging since the style applies a background and selected-state color that may override text color changes.

To work around this, you may need to apply custom styling with a combination of .accentColor and .foregroundColor to achieve the desired effect.

swift

struct SegmentedPickerWithColor: View {

@State private var selectedItem = "One"

let items = ["One", "Two", "Three"]

var body: some View {
Picker(“Select an item”, selection: $selectedItem) {
ForEach(items, id: \.self) { item in
Text(item)
.foregroundColor(.green) // Custom font color
}
}
.pickerStyle(SegmentedPickerStyle()) // Segmented style
.accentColor(.purple) // Change accent color for selected segment
}
}

In this example, we are using .accentColor(.purple) to change the highlight color of the selected segment, while .foregroundColor(.green) changes the text color. However, the segmented picker’s background and system defaults can sometimes override or ignore the custom text color.

Using `.onAppear` for Dynamic Styling

For more dynamic styling based on the state of the Picker, you can use the .onAppear modifier to apply changes when the view appears or based on user interaction.

swift

struct DynamicColorPicker: View {

@State private var selectedItem = "One"

let items = ["One", "Two", "Three"]

@State private var isHighlighted = false

var body: some View {
Picker(“Select an item”, selection: $selectedItem) {
ForEach(items, id: \.self) { item in
Text(item)
.foregroundColor(isHighlighted ? .orange : .blue) // Dynamic color
}
}
.onAppear {
// Update color dynamically based on condition
if selectedItem == “One” {
isHighlighted = true
}
}
}
}

This approach allows for more flexibility in terms of styling, where you can dynamically change the font color based on conditions such as user selection or interaction with other views.

Limitations and Considerations

Despite the flexibility that SwiftUI offers, there are a few limitations to keep in mind when customizing the font color of Picker elements:

Style Overwrites: Certain styles, especially SegmentedPickerStyle, might override custom text color due to system-defined behaviors. Customizations may be limited or require the use of environment modifiers like .accentColor.
Platform-Specific Customization: The appearance of Picker elements can differ across iOS, macOS, watchOS, and tvOS, meaning that customizations may need to be platform-specific. For instance, WheelPickerStyle is primarily used in iOS, while MenuPickerStyle is more common in macOS.
State-Dependent Customization: Customizing the appearance of selected items can be tricky, as the selected state often applies system defaults that can override your customizations. Using environment modifiers or applying styles conditionally is the best way to handle this.

Advanced Customization with `UIViewRepresentable`

If you require even more control over the appearance of the Picker, you can bridge SwiftUI with UIKit using UIViewRepresentable. This allows you to customize the underlying UIKit components directly and gives you full control over the font color and other properties.

Here’s an example of how to create a custom picker using UIViewRepresentable:

swift

import SwiftUI

import UIKit

struct CustomPickerView: UIViewRepresentable {
func makeUIView(context: Context) -> UIPickerView {
let picker = UIPickerView()
picker.delegate = context.coordinator
return picker
}

func updateUIView(_ uiView: UIPickerView, context: Context) {}

func makeCoordinator() -> Coordinator {
Coordinator(self)
}

class Coordinator: NSObject, UIPickerViewDelegate, UIPickerViewDataSource {
var parent: CustomPickerView

init(_ parent: CustomPickerView) {
self.parent = parent
}

func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}

func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return 3
}

func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
return “Item \(row)“
}

func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
let label = UILabel()
label.text = “Item \(row)“
label.textColor = .red // Custom font color
return label
}
}
}

In this example, you can fully customize the appearance of each row in the UIPickerView using UILabel and modify the font color or any other property. This approach provides the most flexibility but requires more code and bridges SwiftUI with UIKit.

Conclusion

Customizing the font color in a SwiftUI Picker can be accomplished in various ways depending on the style and platform. Using .foregroundColor, .accentColor, and conditional styling with .onAppear are the simplest methods. However, more advanced customization may require bridging to UIKit using UIViewRepresentable. With these techniques, you can make your Picker visually appealing and tailored to your app’s design.

Understanding the limitations and how SwiftUI handles default styles is essential when creating customized Picker views. As SwiftUI continues to evolve, future updates may provide more straightforward ways to achieve this customization. Nonetheless, developers can still use the existing tools to create stunning and interactive pickers that match the overall theme of their apps.