UIPickerView inside prototype tableviewcell has no selection indicator

Question

I have a table view controller that has multiple prototype cells for different input controls like UISwitch, UITextField, and UIPickerView, when the view is loaded I determine which control is needed and only present that one prototype cell.

However for the cell with the UIPickerView I cannot get the selection indicator to appear and the pickerview ends up looking like this:

In my tableView:cellForRowAtIndexPath: method I explicitly enable the selection indicator:

UIPickerView * pickerView = [cell viewWithTag:InputTagPicker];
pickerView.dataSource = self;
pickerView.delegate = self;
[pickerView selectRow:self.pickerInitialIndex inComponent:0 animated:YES];
[pickerView setShowsSelectionIndicator:YES];

Why is the selection indicator not showing up?

Have you managed to fix this problem? I have the exact same issue and I can't find a solution anywhere. — damjandd, Jan 20 '17 at 16:06
Possible duplicate of [UIPickerView selection indicator not visible in iOS10](https://stackoverflow.com/questions/39564660/uipickerview-selection-indicator-not-visible-in-ios10) — kelin, Jul 24 '17 at 09:58

score 1 · Answer 1 · answered Mar 30 '18 at 23:13

I had a similar problem. I noticed that every time I would swipe to a different tab, this problem would go away. This meant that something funny was happening as the tableview(cell) was appearing into view.

Since UITableViewCell doesn't have a viewWillAppear() method, I managed to solve this problem by force removing the pickerView from the cell's list of subviews and then adding it back. This simulates the process of setting the selection before the pickerView is added as a subview to the cell, and fixes the issue.

Here is what you can try:

UIPickerView * pickerView = [cell viewWithTag:InputTagPicker];
pickerView.dataSource = self;
pickerView.delegate = self;
[pickerView selectRow:self.pickerInitialIndex inComponent:0 animated:YES];
[pickerView setShowsSelectionIndicator:YES];

// hack to make sure the selection indicator shows
// first remove the picker
[pickerView removeFromSuperview];

// then add it back
[cell.contentView addSubview:pickerView];

However, this would create the picker that is stuck to the left edge of the cell, so you need to programmatically set the constraints

// finally set the constraints to make sure it fits horizontally centered
//Trailing    
NSLayoutConstraint *trailing =[NSLayoutConstraint
                                constraintWithItem:pickerView
                                attribute:NSLayoutAttributeTrailing
                                relatedBy:NSLayoutRelationEqual
                                toItem:cell.contentView   
                                attribute:NSLayoutAttributeTrailing
                                multiplier:1.0f
                                constant:0.f];

//Leading
NSLayoutConstraint *leading = [NSLayoutConstraint
                                   constraintWithItem:pickerView
                                   attribute:NSLayoutAttributeLeading
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:cell.contentView
                                   attribute:NSLayoutAttributeLeading
                                   multiplier:1.0f
                                   constant:0.f];

//Center Y
NSLayoutConstraint *centerY = [NSLayoutConstraint
                                   constraintWithItem:pickerView
                                   attribute:NSLayoutAttributeCenterY
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:cell.contentView
                                   attribute:NSLayoutAttributeCenterY
                                   multiplier:1.0f
                                   constant:0.f];

[cell.contentView addConstraints:trailing];
[cell.contentView addConstraints:leading];
[cell.contentView addConstraints:centerY];

Here is a Swift 4 version:

// first remove the picker
pickerView?.removeFromSuperview()

// then add it back
cell.contentView.addSubview(pickerView!)

// and finally set the constraints to make sure it fits horizontally centered
cell.contentView.addConstraints([NSLayoutConstraint.init(item: pickerView as Any, attribute: .centerY, relatedBy: .equal, toItem: cell.contentView, attribute: .centerY, multiplier: 1, constant: 0),
                                 NSLayoutConstraint.init(item: pickerView as Any, attribute: .trailing, relatedBy: .equal, toItem: cell.contentView, attribute: .trailing, multiplier: 1, constant: 0),
                                 NSLayoutConstraint.init(item: pickerView as Any, attribute: .leading, relatedBy: .equal, toItem: cell.contentView, attribute: .leading, multiplier: 1, constant: 0)])

UIPickerView inside prototype tableviewcell has no selection indicator

1 Answers1