How to get Custom UIPickerView?

Question

I want to achieve the following functionality in Custom UIPiker as shown in below picture.

I want to change the text colour of selected area only like above.

Prerecord

add this into question not in comment – Theodore

you have to take different label for different selection. Check it. – Cortico

Answer 1

Add lable in your pickerview in your viewDidLoad method as below.

Define label and myPickerView both in ViewController.h file

- (void)viewDidLoad
{

    myPickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 200, 320, 200)];
    myPickerView.delegate = self;
    myPickerView.showsSelectionIndicator = YES;
    [self.view addSubview:myPickerView];

    label = [[UILabel alloc] initWithFrame:CGRectMake(145, 76, 36, 36)];
    //label.text = @"Label";
    label.font = [UIFont boldSystemFontOfSize:20];
    label.layer.cornerRadius = 18;
    [label setTextColor:[UIColor whiteColor]];
    label.backgroundColor = [UIColor blueColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.shadowColor = [UIColor whiteColor];
    label.shadowOffset = CGSizeMake (0,1);
    [myPickerView addSubview:label];

    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

in pickerview delegate set label title.

#pragma mark - PickerView delegate

- (void)pickerView:(UIPickerView *)pickerView didSelectRow: (NSInteger)row inComponent:(NSInteger)component {
    // Handle the selection

    [label setText:[NSString stringWithFormat:@"%d",row]];
    NSLog(@"%@",[NSString stringWithFormat:@"%d",row]);

}
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

    NSLog(@"%@",[NSString stringWithFormat:@"%d",row]);
    [label setText:[NSString stringWithFormat:@"%d",row]];
    return [NSString stringWithFormat:@"%d",row];
}

Your OuytPut is :

Cortico

Thanks It Works..... Just 1 thing unable to round the corner of label background, Although using: label.layer.cornerRadius = 18; – Prerecord

Your label width and height is same and corner radius is half of width. then you lable is rounded. – Cortico

Weird behaviour when you drag it up it changes to 4 and back to 0 even if 4 is in the bottom of the selection – Core