Custom Xcode Picker with Identity Inspector

Question

I am trying to make a custom Xcode UIPicker with only numbers 1-10. Is there any simple way to do this with an Identity Inspector or if not, what is the best way to go about making this simple UIPicker?

Thanks in advance!

Answer 1

No, you can't create a picker using only Inerface Builder. There is no equivalent to UITableView Static cells for UIPicker. You need a view controller but it's not that complicated. The view controller need to implement the UIPickerViewDataSource, UIPickerViewDelegate delegates. Here is the basics for a single column picker with the values 1 to 10.

#import "ViewController.h"

@interface ViewController () <UIPickerViewDataSource, UIPickerViewDelegate>

@property (weak, nonatomic) IBOutlet UIPickerView *pickerView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.pickerView.delegate   = self;
    self.pickerView.dataSource = self;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - UIPickerView Data Source & Delegate

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return 10;
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    return [NSString stringWithFormat:@"%d", row + 1 ];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    // TODO do something with the selection
}

@end

To create a minimal iOS app with a picker. Create a new Project select single window application. Replace the code in ViewController.m with above. Edit the story board and add a picker. Important You need to connect the picker view in the storyboard to the IBOutlet in the code.

Not Connected

To connect the outlet you should be editing the storyboard in assistant editor mode. The assisted editor will display the code and the IBOutlet property. Now "Control Click the picker view in the storyboard and drag to the line of code declaring the IBOutlet. The connection is made when the circle is black in the gutter on the line declaring the IBOutlet property.

Connected

Xcode Editing Storyboard in Assistant Editor Mode

FYI: By far the best and fastest moving way to learn iOS is the Stanford iTunes U Course:

Developing iOS 7 Apps for iPhone and iPad https://itunes.apple.com/us/course/developing-ios-7-apps-for/id733644550

You will need to watch a few of the demos to grok how to make connections Interface Builder (IB). The first thing you need to understand is the IB does not create resource or configuration files. The storyboard files contain serialized interface objects. Almost identical to the objects you can create in code.

Changing the size of the picker text

You need to replace the implementation of pickerView:titleForRow:forComponent: with your own pickerView:rowHeightForComponent: and pickerView:viewForRow:forComponent:reusingView:

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
    return 60;  // Row height in points, Note this should match the height of the UILabel Rect.
}

// FYI points are not pixels on non retina screens 1 point = 1 pixel but on retina screens 1 point = 2 pixels

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    if (view) {
        UILabel *reuseLabel = (UILabel *)view;
        reuseLabel.text = [NSString stringWithFormat:@"%ld", row + 1 ];
        return reuseLabel;
    }
    
    UILabel *newLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 60)];
    newLabel.text = [NSString stringWithFormat:@"%ld", row + 1 ];
    newLabel.font = [UIFont systemFontOfSize:42];
    newLabel.textAlignment = NSTextAlignmentCenter;
    
    return newLabel;
}