I Created a custom time picker in Swiftui to enter a desired time, the picker works by having multiple picker next to each other, to select time values, ie there is a picker for hours, minutes, seconds and miliseconds. With iOS 14 this worked perfectly but since updating to iOS 15 only one picker works at a time. This seems to be because the pickers are now overlapping. To me it seems that setting the frame is not working properly, but I am unsure how to fix this issue.
The code consists of a TimePickerClass which stores the values of the time pickers:
class TimePickerClass: ObservableObject {
@Published var hoursTime = 0
@Published var secondsTime = 0
@Published var milisecondsTime = 0
@Published var minutesTime : Int = 0
func GetTime() -> Double {
return Double(hoursTime) * 3600.0 + Double(minutesTime) * 60.0 + Double(secondsTime) + Double(milisecondsTime)/100
}
func GetTimeString() -> String {
return TimeFormatted(timeInSeconds: GetTime())
}
func Reset(){
hoursTime = 0
secondsTime = 0
milisecondsTime = 0
minutesTime = 0
}
}
And this is the TimePicker view
struct TimePicker: View {
@ObservedObject var viewModel : TimePickerClass
let pickerColor : Color = AppColor.PickerColors.backgroundColor
let textColor : Color = AppColor.PickerColors.textColor
let width :CGFloat = 30
var body: some View {
HStack
{
HStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 0){
Spacer()
Picker("", selection: $viewModel.hoursTime) {
ForEach(0..<24){ hours in
if(hours < 10){
Text(" \(hours)").foregroundColor(textColor)
}
else{
Text("\(hours)").foregroundColor(textColor)
}
}
}.pickerStyle(WheelPickerStyle()).frame(width: width, height: 40).clipped().labelsHidden().clipShape(Rectangle())
Text(":").foregroundColor(textColor)
Picker("", selection: $viewModel.minutesTime) {
ForEach(0..<60){ minutes in
if(minutes < 10){
Text("0\(minutes)").foregroundColor(textColor)
}
else{
Text("\(minutes)").foregroundColor(textColor)
}
}
}.pickerStyle(WheelPickerStyle()).frame(width: width, height: 40).clipped().labelsHidden().clipShape(Rectangle())
Text(":").foregroundColor(textColor)
Picker("", selection: $viewModel.secondsTime) {
ForEach(0..<60){ seconds in
if(seconds < 10){
Text("0\(seconds)").foregroundColor(textColor)
}
else{
Text("\(seconds)").foregroundColor(textColor)
}
}
}.pickerStyle(WheelPickerStyle()).frame(width: width, height: 40).clipped().labelsHidden().clipShape(Rectangle())
Text(".").foregroundColor(textColor)
Picker("", selection: $viewModel.milisecondsTime) {
ForEach(0..<100){ miliSeconds in
if(miliSeconds < 10){
Text("0\(miliSeconds)").foregroundColor(textColor)
}
else{
Text("\(miliSeconds)").foregroundColor(textColor)
}
}
}.pickerStyle(WheelPickerStyle())
.labelsHidden()
.frame(width: width, height: 40)
.clipped()
.clipShape(Rectangle())
Spacer()
}.padding(.leading).padding(.trailing).overlay(RoundedRectangle(cornerRadius: 10).stroke(pickerColor, lineWidth: 2))
}.background(pickerColor.clipShape(RoundedRectangle(cornerRadius: 10))).overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.black, lineWidth: 1))
}
}
To test it use:
struct ContentView: View {
@ObservedObject var testTimePicker = TimePickerClass()
var body: some View {
VStack{
TimePicker(viewModel: testTimePicker)
Text("\(String(testTimePicker.GetTime()))")
Text(testTimePicker.GetTimeString())
}
}
iOS 14
iOS 15
