I just updated my old Answer with new Version of it, now you can just use AdvancedSegmentedPicker in your View, and work with it like a normal SegmentedPicker with this deference that you are able to change and update all colors on SegmentedPicker, like:
backgroundColor
selectedSegmentTintColor
selectedSegmentForegroundColor
normalSegmentForegroundColor
you could use like:
AdvancedSegmentedPicker(items:selectedItem:)
Or:
AdvancedSegmentedPicker(items:selectedItem:backgroundColor:selectedSegmentTintColor:selectedSegmentForegroundColor:normalSegmentForegroundColor:)
Also Notice that this AdvancedSegmentedPicker is not hard coded for just this project, as long as you gave items and selectedItem to AdvancedSegmentedPicker, you can use it in any project, and you could do your color customization as well.
Version 2.0.0:
import SwiftUI
struct ContentView: View {
var items: [ColorEnum] = ColorEnum.allCases
@State private var selectedItem: ColorEnum = ColorEnum.blue
@State private var backgroundColor: UIColor?
@State private var selectedSegmentTintColor: UIColor?
@State private var selectedSegmentForegroundColor: UIColor?
@State private var normalSegmentForegroundColor: UIColor?
var body: some View {
VStack(spacing: 30.0) {
AdvancedSegmentedPicker(items: items, selectedItem: $selectedItem, backgroundColor: backgroundColor, selectedSegmentTintColor: selectedSegmentTintColor,
selectedSegmentForegroundColor: selectedSegmentForegroundColor, normalSegmentForegroundColor: normalSegmentForegroundColor)
Text("You selected: " + selectedItem.rawValue)
.bold()
.shadow(radius: 10.0)
.padding()
Button("update backgroundColor") {
if backgroundColor == UIColor.gray { backgroundColor = nil }
else { backgroundColor = UIColor.gray }
}
Button("update selectedSegmentForegroundColor") {
if selectedSegmentForegroundColor == UIColor.white { selectedSegmentForegroundColor = nil }
else { selectedSegmentForegroundColor = UIColor.white }
}
Button("update normalSegmentForegroundColor") {
if normalSegmentForegroundColor == UIColor.white { normalSegmentForegroundColor = nil }
else { normalSegmentForegroundColor = UIColor.white }
}
}
.font(Font.body.bold())
.onAppear() { selectedSegmentTintColor = selectedItem.ColorValue }
.onChange(of: selectedItem) { newValue in selectedSegmentTintColor = newValue.ColorValue }
.padding()
.background(Color.black.opacity(0.1).cornerRadius(10.0))
.padding()
.statusBar(hidden: true)
}
}
struct AdvancedSegmentedPicker<T: CustomStringConvertible & Hashable>: View {
var items: [T]
@Binding var selectedItem: T
var backgroundColor: UIColor? = nil
var selectedSegmentTintColor: UIColor? = nil
var selectedSegmentForegroundColor: UIColor? = nil
var normalSegmentForegroundColor: UIColor? = nil
@State private var renderView: Bool = Bool()
var body: some View {
return Group {
if renderView { SegmentedPickerView(items: items, selectedItem: $selectedItem, backgroundColor: backgroundColor, selectedSegmentTintColor: selectedSegmentTintColor,
selectedSegmentForegroundColor: selectedSegmentForegroundColor, normalSegmentForegroundColor: normalSegmentForegroundColor) }
else { SegmentedPickerView(items: items, selectedItem: $selectedItem, backgroundColor: backgroundColor, selectedSegmentTintColor: selectedSegmentTintColor,
selectedSegmentForegroundColor: selectedSegmentForegroundColor, normalSegmentForegroundColor: normalSegmentForegroundColor) }
}
.onChange(of: backgroundColor) { _ in renderView.toggle() }
.onChange(of: selectedSegmentTintColor) { _ in renderView.toggle() }
.onChange(of: selectedSegmentForegroundColor) { _ in renderView.toggle() }
.onChange(of: normalSegmentForegroundColor) { _ in renderView.toggle() }
}
}
private struct SegmentedPickerView<T: CustomStringConvertible & Hashable>: View {
var items: [T]
@Binding var selectedItem: T
init(items: [T], selectedItem: Binding<T>, backgroundColor: UIColor? = nil,
selectedSegmentTintColor: UIColor? = nil, selectedSegmentForegroundColor: UIColor? = nil, normalSegmentForegroundColor: UIColor? = nil) {
self.items = items
self._selectedItem = selectedItem
UISegmentedControl.appearance().backgroundColor = backgroundColor
UISegmentedControl.appearance().selectedSegmentTintColor = selectedSegmentTintColor
if let unwrappedSelectedSegmentForegroundColor: UIColor = selectedSegmentForegroundColor {
UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: unwrappedSelectedSegmentForegroundColor], for: .selected)
}
else {
UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.label], for: .selected)
}
if let unwrappedNormalSegmentForegroundColor: UIColor = normalSegmentForegroundColor {
UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: unwrappedNormalSegmentForegroundColor], for: .normal)
}
else {
UISegmentedControl.appearance().setTitleTextAttributes([.foregroundColor: UIColor.label], for: .normal)
}
}
var body: some View {
Picker("", selection: $selectedItem) {
ForEach(items, id: \.self) { item in
Text(String(describing: item))
}
}
.pickerStyle(SegmentedPickerStyle())
}
}
enum ColorEnum: String, CaseIterable, CustomStringConvertible { case red, yellow, green, blue
var ColorValue: UIColor {
get {
switch self {
case .red: return UIColor.red
case .yellow: return UIColor.yellow
case .green: return UIColor.green
case .blue: return UIColor.blue
}
}
}
var description: String {
get { return self.rawValue }
}
}
