IOS, How to add a custom SelectionIndicator in a UIPickerView?

Question

I want to add a check mark instead of the standard SelectionIndicator for UIPickerView.

I am trying to add an image as a subview

UIImageView * checkMark = [[[UIImageView alloc] initWithFrame:CGRectMake(0, 102, 13, 13)] autorelease]; [checkMark setImage:[UIImage imageNamed:@"pickerChechmark.png"]]; checkMark.layer.borderColor = [[UIColor redColor] CGColor]; checkMark.layer.borderWidth = 2; [picker addSubview:checkMark]; 

but it was added after the collector, see the following image.

image 1 for x = 0, image 2 for x = 5, image 3 for x = 10 (x check mark) also see the red rectangle in the upper left corner, to clarify my question

 UIView * redblock = [[[UIView alloc] initWithFrame:CGRectMake(0, -20, 50, 40)] autorelease]; redblock.backgroundColor = [UIColor redColor]; [picker addSubview:redblock]; [picker bringSubviewToFront:redblock]; 

How to fix it?

Answer 1

I also needed to set up a selection indicator, because I populate the collector with custom views (they look like cells in a table view) that are higher than the standard indicator.

My initial attempt to specify the translucent view to be overlaid on the UIPickerView when created led to the same result. During tracking, I noticed that there were no impressions in the selection view at the time of creation, which is probably the reason that the custom selection indicator will be sent to the back of the visual hierarchy.

My solution consists of specifying a custom view for the selection indicator when the delegate method is first selected pickerView: viewForRow: forComponent: is called reusingView :. At this point, UIPickerView is ready with all its subzones, and my new custom view is correctly added on top of the rest. If you don’t need to use custom views for content, you can do the same using another pickerView: titleForRow: forComponent: data source method.

The following snippet shows my solution.

Notes: if the delegate method serves more than one UIPickerView, you need to handle the flag differently; SLPickerCell is my own cell class, just a subclass of UIView.

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view { SLPickerCell *pickerCell = nil; NSArray *topLevelObjects; const CGFloat kPickerBorderSize = 10; const CGFloat kIndicatorVerticalMargin = 2; // if this is the first time we enter the function, add selection indicator view on top of everything else if ( ![self pickerSelectionIndicatorInstalled] ) { UIView *customSelectionIndicator; CGRect selectionIndicatorFrame; CGRect pickerViewFrame; pickerViewFrame = [pickerView frame]; // Create and add a custom selection indicator (a superimposed semi-transparent view) // Use the cell height as reference for the height of the indicator selectionIndicatorFrame = CGRectMake(kPickerBorderSize, (pickerViewFrame.size.height - ( [SLPickerCell height] + kIndicatorVerticalMargin )) / 2, pickerViewFrame.size.width - (2 * kPickerBorderSize), ( [SLPickerCell height] + kIndicatorVerticalMargin )); customSelectionIndicator = [[UIView alloc] initWithFrame:selectionIndicatorFrame]; [customSelectionIndicator setUserInteractionEnabled:NO]; [customSelectionIndicator setAlpha:0.25]; [customSelectionIndicator setBackgroundColor:[UIColor lightGrayColor]]; [[customSelectionIndicator layer]setBorderWidth:1.0]; [[customSelectionIndicator layer]setBorderColor:[[UIColor darkGrayColor]CGColor]]; // Add the indicator on top of the picker [pickerView addSubview:customSelectionIndicator]; // set the flag; remember to reset it upon creation of a new UIPickerView [self setPickerSelectionIndicatorInstalled:YES]; } // [...] 

Answer 2

try this code, I added a check mark and a label in the selection view.

 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)theView{ UIView *pickerviewtemp=[[UIView alloc] initWithFrame:CGRectZero]; UILabel *lbl=[[UILabel alloc] initWithFrame:CGRectMake(-105, -15, 240, 30)]; [lbl setBackgroundColor:[UIColor clearColor]]; [lbl setText:[self.folderNameArray objectAtIndex:row]]; [lbl setFont:[UIFont boldSystemFontOfSize:20]]; [pickerviewtemp addSubview:lbl]; UIImageView *imgView=[[UIImageView alloc]initWithFrame:CGRectMake(-130, -5, 15, 15)]; if ([self.folderCheckArray containsObject:[NSString stringWithFormat:@"%d",row]]) { [imgView setImage:[UIImage imageNamed:@"tick.png"]]; } else { [imgView setImage:nil]; } [pickerviewtemp addSubview:imgView]; return pickerviewtemp; } 

Answer 3

Try adding a checkmark to view it as follows:

[self.view addSubview: checkMark];

You will need to play with the coordinate, but you can see it on the selection screen.