IOS, How to add a custom SelectionIndicator to a U

Question

I want to add a checkmark instead of the default SelectionIndicator for UIPickerView.

I am trying to add an image as 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 its been added behind the picker see the following image.

image 1 for x =0, image 2 for x =5, image 3 for x = 10 (x position of checkmark) also see the red rectangle on top left, for clarification on my question

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

how fix this?

Answer 1

try this code,I have added a checkmark and label in my picker 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 2

I also needed to customize the selection indicator because I populate the picker with custom views (they are similar to table view cells) that are higher than the standard indicator.

My initial attempt to specify a semi-transparent view to be superimposed to the UIPickerView upon creation led to the same result. While tracing I noticed that the picker view doesn't have subviews yet at the time of creation, which is probably the reason for the custom selection indicator be sent to the back of the visual hierarchy.

My solution consists of specifying the custom view for the selection indicator the first time the delegate method pickerView:viewForRow:forComponent:reusingView: is called. At that point in time the UIPickerView is ready with all its subviews and my new custom view is properly appended on top of the rest. If you don't need to use custom views for the contents, you could do the same using the other data source method pickerView:titleForRow:forComponent:.

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 UIView subclass.

- (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 3

Try adding the check mark to view itself like this:

[self.view addSubview:checkMark];

Your going to have to fiddle around with the coordinate but you should be able to see it on the picker view.