UIPickerView row descriptions

Question

Created May ’22

Replies 3

Boosts 0

Views 1.3k

Participants 2

Hey. I´ve created an UIPickerView for selecting time durations in my App. Note: I used UIViewRepresentable to include this picker in my SwiftUI project, it shouldn't make any difference to the UIPickerView. Code:

struct DurationPickerView: UIViewRepresentable {
    
    func makeUIView(context: Context) -> UIPickerView {
        let picker = UIPickerView()
        picker.dataSource = context.coordinator
        picker.delegate = context.coordinator
        picker.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        picker.setContentHuggingPriority(.defaultLow, for: .horizontal)
        
        return picker
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIPickerViewDelegate, UIPickerViewDataSource {
        
        let parent: DurationPickerView
        
        init(_ parent: DurationPickerView) {
            self.parent = parent
        }
        
        func numberOfComponents(in pickerView: UIPickerView) -> Int {
            return 6
        }
        
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            if component == 0 {
                return 25
            }
            
            else if component == 1 {
                return 1
            }
            
            else if component == 2 {
                return 61
            }
            
            else if component == 3 {
                return 1
            }
            
            else if component == 4 {
                return 61
            }
            
            else if component == 5 {
                return 1
            }
            
            return 0
        }
        
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            if component == 0 {
                return "\(row)"
            }
            
            else if component == 1 {
                return "Std."
            }
            
            else if component == 2 {
                return "\(row)"
            }
            
            else if component == 3 {
                return "Min."
            }
            
            else if component == 4 {
                return "\(row)"
            }
            
            else if component == 5 {
                return "Sek."
            }
            
            return ""
        }
    }
}

At the moment I'm using another pickerview row to describe the selectable rows. But thats not what I want... I want a row description that is not selectable and has a smaller text size for each selectable picker component like in the iPhone clock app:

I appreciate any help!

Boost

Answer 1

Claude31 OP

May ’22

I don't understand what are each component. Component is a column, it seems you are trying to use a component as a title for column ?

If I understand correctly, you should have only 3 components.

And titleForRow 0 should hold the title.

To forbid selection of title, do it in

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

with the following code:

                    var selectedRow = row
                    if selectedRow == 0 { // title not to be selected
                        selectedRow = 1
                        pickerView.selectRow(selectedRow, inComponent: component, animated: false)
                    }

0

Answer 2

Claude31 OP

May ’22

Well, it is pretty simple.

For instance, for the component 0 (hours):

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        if component == 0 {
            return row < 1 ? "Std." : "\(row-1)"  // If you want "Std." as title. Otherwise, just "Hr"
        }

So you will see (you have 25 components: title plus 0 to 23):

Std.
0
1
…
23

0

Answer 3

Claude31 OP

May ’22

Sorry, but what you want is not clear (for me at least).

Do you want to have a text on the row that is selected ?

If so, the following is the closest I could get:

    var selectedComponent0 = 0  // We keep the value of current selection for components

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {

      if component == 0 {
          var text = "\(row)"
          if row == selectedComponent0 { text += " Std"}
          return text 
        }
       // Do similar for other components
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

      if component == 0 {
          selectedComponent0 = row
      }
       // Do similar for other components
        pickerView.reloadComponent(component)   // Force reload the component
    }

Note: why 25 items in hours ? When it ranges from 0 to 23 ?

0