iOS 14 UIPickerView Selected View Background Color

Question

Created Sep ’20

Replies 8

Boosts 0

Views 9.5k

Participants 8

I have noticed that in iOS 14 the UIPickerView has by default a light grey background on the selected Row like shown here.
https://developer.apple.com/design/human-interface-guidelines/ios/controls/pickers/

I noticed also that pickerView.showsSelectionIndicator is deprecated on iOS 14.

Is there a way to change the background color to white and add separators to achieve a pre iOS 14 UIPickerView style?

Thank you

Boost

Answer 1

magnit OP

Sep ’20

Code Block datePicker.subviews.first?.subviews.last?.backgroundColor = UIColor.red

This code can change background color for selected row

1

Answer 2

TN-T OP

Sep ’20

I have the same problem. The code change the background of the picker, not the selected row!
I am also looking for a solution to keep the design of iOS13.

1

Answer 3

TN-T OP

Oct ’20

I have found a solution:

The indicator color can be changed to transparent with the following code. I manually added two separator lines for iOS14, so the picker is again identical to iOS13.

if #available(iOS 14.0, *)
{
let transparent = UIColor(red: 255.0 , green: 255.0, blue: 255.0, alpha: 0.0)
pickerView.subviews[1].backgroundColor = transparent
}

3

Answer 4

sguerrera OP

Nov ’20

I am unsure how to implement your solutions? Can you show more code... like in this case

datePicker.subviews.first?.subviews.last?.backgroundColor = UIColor.red

How do you declare the picker?

Same for this example:

if #available(iOS 14.0, *)
{
let transparent = UIColor(red: 255.0 , green: 255.0, blue: 255.0, alpha: 0.0)
pickerView.subviews[1].backgroundColor = transparent
}

0

Answer 5

aldriq OP

Nov ’20

Has anyone found a clean way to achieve this in SwiftUI?

0

Answer 6

peteburford OP

Jan ’21

Swift 5

This will highlight the pickerView row to whatever you set 'tintColor' to

Code Block Swift 5func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
   pickerView.subviews[0].subviews[0].subviews[2].backgroundColor = pickerView.tintColor;

0

Answer 7

WilliamRiver OP

Feb ’21

I hope this can help you.

Code Block func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
    if #available(iOS 14.0, *) {
      let height: CGFloat = 0.5
      for subview in pickerView.subviews {
        /* smaller than the row height plus 20 point, such as 40 + 20 = 60*/
        if subview.frame.size.height < 60 {
          if subview.subviews.isEmpty {
            let topLineView = UIView()
            topLineView.frame = CGRect(x: 0.0, y: 0.0, width: subview.frame.size.width, height: height)
            topLineView.backgroundColor = .lightGray
            subview.addSubview(topLineView)
            let bottomLineView = UIView()
            bottomLineView.frame = CGRect(x: 0.0, y: subview.frame.size.height - height, width: subview.frame.size.width, height: height)
            bottomLineView.backgroundColor = .lightGray
            subview.addSubview(bottomLineView)
          }
        }
        subview.backgroundColor = .clear
      }
    }
    let label = UILabel()
    return label
  }

2

Answer 8

serj.rubens OP

Jun ’23

pickerView.subviews.last?.isHidden = true

0