PickerView Workshop 3

This is the final workshop of the PickerView tutorial and in it you will learn how to display images and text in a single component of a PickerView control.

Initial Setup

Start by launching the PickerView application you’ve been working on. Add a third class file in the project. Provide these options for it.

Modify the AppDelegate didFinishLaunchingWithOptions: method’s code so it will display a tab for the new view.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

  UIViewController *viewController1 = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
  UIViewController *viewController2 = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
  UIViewController *viewController3 = [[ThirdViewController alloc] initWithNibName:@"ThirdViewController" bundle:nil];

  self.tabBarController = [[UITabBarController alloc] init];
  self.tabBarController.viewControllers = @[viewController1, viewController2, viewController3];
  self.window.rootViewController = self.tabBarController;
  [self.window makeKeyAndVisible];
  return YES;
}

Add code shown below in the ThirdViewController interface.h file.

#import <UIKit/UIKit.h>

@interface ThirdViewController : UIViewController

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

@property (nonatomic,strong) IBOutlet UILabel *itemPicked;

@property (strong, nonatomic) NSDictionary *itemList;

@end

Connect the pickerView and itemPicked IBOutlet properties in Interface Builder. Connect the PickerView control’s dataSource and delegate. When you are done, right-click the File’s Owner object to see connections.

Click the ThirdViewController.m file and modify the initWithNibName: method’s code to what’s shown below.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
  self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
  if (self) {
    self.title = @"Third View";
    self.tabBarItem.image = [UIImage imageNamed:@"star"];
  }
  return self;
}

Next, modify the viewDidLoad method to what’s shown below.

- (void)viewDidLoad
{
  [super viewDidLoad];

  // Initialize the the dictionary with 7 entries (Key:Value)
  self.itemList = @{"Toy Car": @"redcar_icon.png",
  @"Wine Glass": @"87-wine-glass.png",
  @"Small TV": @"70-tv.png",
  @"Toy Jeep": @"jeep.png",
  @"Dog": @"dog.png",
  @"Office Phone": @"office-phone.png",
  @"Flowers": @"flowers-icon.png"
  };
}

Here is the PickerView’s dataSource and delegate methods to add in the ThirdViewController.m file.

#pragma mark - The PickerView dataSource methods

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

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
  return [self.itemList count];
}

#pragma mark - The PickerView delegate methods

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
  // Place the dictionary keys and values in separate variables
  NSArray *itemNames=[self.itemList allKeys];
  NSArray *itemImages=[self.itemList allValues];

  // Create and initialize an ImageView control
  UIImage *img = [UIImage imageNamed:[itemImages objectAtIndex:row]];
  UIImageView *imageView = [[UIImageView alloc] initWithImage:img];
  imageView.frame = CGRectMake(0, 0, 27, 29);

  // Create and initialize a Label control
  UILabel *productLabel = [[UILabel alloc] initWithFrame:CGRectMake(30,0,105,30)];
  productLabel.backgroundColor=[UIColor clearColor];
  productLabel.text=[itemNames objectAtIndex:row];
  productLabel.textColor = [UIColor blueColor];

  // Create and initialize a UIView
  UIView *output = [[UIView alloc] initWithFrame:CGRectMake(0,0,110,33)];
  [output insertSubview:imageView atIndex:0];
  [output insertSubview:productLabel atIndex:1];
  return output;
}

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row
		inComponent:(NSInteger)component
{
  NSArray *itemNames=[self.itemList allKeys];

  // Set three properties of the itemPicked Label control
  self.itemPicked.textColor = [UIColor colorWithRed:0.09 green:0.45 blue:0.44 alpha:1.00];
  self.itemPicked.font=[UIFont fontWithName:@"Verdana-Bold" size:18];
  self.itemPicked.textAlignment = 1;

  // Display the item the user picked from the PickeView control in the Label control
  self.itemPicked.text = [itemNames objectAtIndex:row];
}

Test The PikerView Code

Run the application to see output shown in the image below for the Third View tab.

Default View	Fourth row picked

This concludes the PickerView tutorial.