UIPickerView selection indicator not visible in iOS10

Question

I build my project in Xcode 8. UIPickerView separator lines are not visible in iOS 10 simulator and the devices, but works fine on iOS 9.3 devices and simulator. I tried to adjust the UIPickerView back ground color, auto layouts and everything possible in the XIB, but nothing works. Anyone have an idea on this?

This is a custom view which contains a UIPickerView

-(void)layoutSubviews{
    isShown = NO;
    [super layoutSubviews];
    
    //self.selectedDic = nil;
    
    self.doneBtn.tintColor = COLOR_DB3535;
    self.pickerView.backgroundColor = COLOR_DEDEDE;
    self.pickerView.showsSelectionIndicator = YES;
    
    [self.doneBtn setTitle:NSLocalizedString(@"App_Generic_Button_Text_Done", @"")];
    }


    -(UIView*)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
    label.tintColor = [UIColor clearColor];
    label.backgroundColor = [UIColor yellowColor];
    label.textColor = COLOR_666;
    label.font = [FontsManager getFONT_ROBOTO_LIGHT_16];
    label.textAlignment = NSTextAlignmentCenter;
    NSDictionary *dict = [dataArray objectAtIndex:row];
    label.text = @"Test";
    return label;
}

I am using picker in my react-native app. I need not to show the picker boderline. How can I remove that? https://stackoverflow.com/posts/comments/108759438?noredirect=1 — sejn, May 12 '20 at 11:14

score 35 · Answer 1 · edited Nov 15 '17 at 08:23

I had this exact issue when I rebuilt a couple of solutions for iOS10 and deployed to iOS10 on both simulators and devices.

I narrowed the problem in my case to be down to selecting an item in the picker during initialisation. ie. I populate my picker and if we have already got a selection for this property then I preselect it and the lines are present. I do this during the initialisation when I set up my picker.

So my fix, which worked in my use case, was to select the 0 element in the case of no existing value.

Objective-C

UIPickerView *pickerView;

...

[pickerView selectRow:0 inComponent:0 animated:YES];

Swift

let pickerView: UIPickerView

...

pickerView.selectRow(0, inComponent: 0, animated: true)

This was fine for my solution since I effectively select row zero on setup.

I haven't had chance to dig into the reasoning or look for a cleaner solution, but since I've solved my problem I thought I'd share it here to help you all out if I can.

Adding the selection code during initialization indeed fixed the problem for me. Thanks! — Lukas Petr, Dec 01 '16 at 14:02
Well, that didn't work for me. In fact I am already doing that. I have to select some specific value on initializing. — Umair Aamir, Jan 18 '18 at 14:33

score 12 · Answer 2 · answered Feb 24 '17 at 03:01

12

UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 44, 320, 200)];
pickerView.backgroundColor = [UIColor whiteColor];
pickerView.dataSource = self;
pickerView.delegate = self;
[pickerView selectRow:0 inComponent:0 animated:YES];
[self.view addSubview:pickerView];

add the code [pickerView selectRow:0 inComponent:0 animated:YES]; before pickerView added to superView.

answered Feb 24 '17 at 03:01

YB.Jiao

121
1
3

1

Perfect. In IOS 10 the line reappeared. – Julian Corrêa Mar 28 '17 at 15:09
Works also on iOS 11. Thanks! – Baran Sep 15 '18 at 10:46
Also fixed the bug in iOS 12 for me. How has Apple not fixed this yet?? – Trev14 Mar 13 '19 at 13:24
Fixed the bug in iOS 12 for me too. – Baran Jul 02 '19 at 08:34

ocarol · Answer 3 · 2016-10-21T04:52:14.327

I have faced the same issue in iOS10, too. Here is my problem:

And I solved this problem by:

 self.pickerView.backgroundColor = COLOR_DEDEDE;
 self.pickerView.showsSelectionIndicator = YES;
    for (UIView *view in self.pickerView.subviews) {
        if (view.bounds.size.height < 2.0f && view.backgroundColor == nil) {
            view.backgroundColor = PICK_Line_COLOR; // line color
        }
    }

Note:

this code mush be called after method:[self.view addSubview:pickeView];

The final result：

it works in my project. Hope it helps to you.

matt · Answer 4 · 2016-09-19T03:28:13.633

1

I'm not sure what "separator lines" you are talking about. I don't see "separator lines" in iOS 9 either.

The only "lines" missing from your screen shot are the selection indicator. You can get them by setting the picker view's showsSelectionIndicator to YES. But you shouldn't have to; showing the selection indicator is the default. The docs say:

On iOS 7 and later ... the selection indicator is always shown

edited Sep 19 '16 at 03:28

answered Sep 19 '16 at 03:10

matt

515,959
87
875
1,141

Yes, my apologies. It should be corrected as selection indicator. I edited the question – smartsanja Sep 19 '16 at 03:13
Of course, part of the problem might be that your background is the same color as the selection indicator. So the lines might be there but you cannot see them. I don't know. But my screen shot is taken in iOS 10, so that proves it is possible to get the selection indicator lines. – matt Sep 19 '16 at 03:13
elf.pickerView.backgroundColor = [UIColor yellowColor]; self.pickerView.showsSelectionIndicator = YES; But still I can't see selection indicator. Strange issue – smartsanja Sep 19 '16 at 03:17
Well, I can't see your code. Would you like to see mine? This is a working example: https://github.com/mattneub/Programming-iOS-Book-Examples/tree/master/bk2ch12p568pickerView/ch25p842pickerView But I don't explicitly have to set `showsSelectionIndicator`; the default is YES. – matt Sep 19 '16 at 03:26
Have you _really_ tried this on a device? I think you've only tried it in the simulator, and your simulator settings are the problem. – matt Sep 19 '16 at 03:28
Yes. I tried on device, its same. I'll update the question with codes – smartsanja Sep 19 '16 at 03:30

score 1 · Answer 5 · edited Nov 12 '16 at 07:56

1

This is my code:

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

    for(UIView *single in pickerView.subviews)
    {
        if (single.frame.size.height < 1)
        {
            single.backgroundColor = [UIColor grayColor];
        }
    }
   //other code

}

edited Nov 12 '16 at 07:56

Pang

9,564
146
81
122

answered Oct 22 '16 at 07:33

kingalex

21
3

score 1 · Answer 6 · answered Aug 06 '19 at 10:13

Solved this problem using subclass of UIPickerView:

import UIKit

    class FixedPickerView: UIPickerView, UIPickerViewDelegate {

        override func willMove(toSuperview newSuperview: UIView?) {
            self.delegate = self
            self.selectRow(0, inComponent: 0, animated: true)
            self.delegate = nil
            super.willMove(toSuperview: newSuperview)
        }
    }

score -2 · Answer 7 · answered Sep 19 '16 at 07:45

I am also facing the same issue. Below is my code for creating the UIPickerView:

self.pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, frame.size.height - 216, frame.size.width, 216)];
self.pickerView.dataSource = self;
self.pickerView.delegate = self;
self.pickerView.backgroundColor = [UIColor whiteColor];
self.pickerView.showsSelectionIndicator = YES;
[self addSubview:self.pickerView];

UIPickerView selection indicator not visible in iOS10

7 Answers7

Note:

Linked