How to change the color of a UIPickerView selector

Question

I have a UIPicker, I want to change the color of the selector. Is it possible to change the color of the selector?

Answer 1

I assume you are dealing with an iPhone SDK? There may be other frameworks that use this name, so maybe you can add your tags to include uikit, cocoa -touch or something else.

In any case, you can set the showsSelectionIndicator UIPickerView instance to NO, so it hides the selector. You can then create a new view with a customized selection style and add it to the supervisor above the UIPickerView.

 // Some sample code, but you can do this in IB if you want to _pickerView = [[UIPickerView alloc] init]; _pickerView.showsSelectionIndicator = NO; [_pickerView sizeToFit]; [self.view addSubview:_pickerView]; UIImage *selectorImage = [UIImage imageNamed:@"selectorImage.png"]; // You have to make it strechable, probably UIView *customSelector = [[UIImageView alloc] initWithImage:selectorImage]; customSelector.frame = CGRectZero; // Whatever rect to match the UIImagePicker [self.view addSubview:customSelector]; [customSelector release]; 

Hacking a UI element in itself will take a lot more work, and this should work too.

Answer 2

It may not be fully suited to answer this question, in iOS 7 and later you can adjust the color this way:

In delegate methods

 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component 

add next

 [[pickerView.subviews objectAtIndex:1] setBackgroundColor:NEEDED_COLOR]; [[pickerView.subviews objectAtIndex:2] setBackgroundColor:NEEDED_COLOR]; 

UPDATE

The previous code works, but so-so. Here are simple subclasses for UIPickerView

Swift:

 class RDPickerView: UIPickerView { @IBInspectable var selectorColor: UIColor? = nil override func didAddSubview(subview: UIView) { super.didAddSubview(subview) if let color = selectorColor { if subview.bounds.height <= 1.0 { subview.backgroundColor = color } } } } 

Objective-C:

 @interface RDPickerView : UIPickerView @property (strong, nonatomic) IBInspectable UIColor *selectorColor; @end @implementation RDPickerView - (void)didAddSubview:(UIView *)subview { [subview didAddSubview:subview]; if (self.selectorColor) { if (subview.bounds.size.height <= 1.0) { subview.backgroundColor = self.selectorColor; } } } @end 

and you can set the color of the selector directly in the storyboard

Thanks to Ross Barbish - "With the release of iOS 9.2 and XCode 7.2 on 12/8/2015, the height of this choice is 0.666666666666666."

UPDATE:

This fix is ​​for an issue with iOS 10, but not good, but it works.: /

 class RDPickerView: UIPickerView { @IBInspectable var selectorColor: UIColor? = nil override func didAddSubview(_ subview: UIView) { super.didAddSubview(subview) guard let color = selectorColor else { return } if subview.bounds.height <= 1.0 { subview.backgroundColor = color } } override func didMoveToWindow() { super.didMoveToWindow() guard let color = selectorColor else { return } for subview in subviews { if subview.bounds.height <= 1.0 { subview.backgroundColor = color } } } } 

Thanks, Dmitry Klochkov, I will try to find the best solution.

Answer 3

This improves vsilux's answer as a simple category on UIPickerView without the need to subclass UIPickerView.

Swift:

 private var selectorColorAssociationKey: UInt8 = 0 extension UIPickerView { @IBInspectable var selectorColor: UIColor? { get { return objc_getAssociatedObject(self, &selectorColorAssociationKey) as? UIColor } set(newValue) { objc_setAssociatedObject(self, &selectorColorAssociationKey, newValue, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN) } } public override func didAddSubview(subview: UIView) { super.didAddSubview(subview) if let color = selectorColor { if subview.bounds.height < 1.0 { subview.backgroundColor = color } } } } 

Answer 4

You can only change the background color of the selection indicator.
Just add a UIView over the selection indicator (it will become your overlay view), set its alpha value to low (it is up to you, but I like its overlay to look transparent), give it a background color, and you're good to go.

Consider this,

 var overlayOnPicker:UIView = UIView(frame: CGRectMake(1, 68, mypicker.frame.width, 26)) // Adds a layer on the selection indicator 

And set the value to CGRect X = 1 (Remember, this is a frame, so it will be placed in accordance with the coordinate system of the supervisor)

 overlayOnPicker.backgroundColor = UIColor.whiteColor() overlayOnPicker.alpha = 0.2 myDatePicker.addSubview(overlayOnPicker) // You have to add the overlayOnPicker view as a subview to the Date Picker. // myDatePicker is the UIDatePicker that I declared earlier in my code