<

UIPickerView Multi

>

Reference: Apple Developer Page

 

Setup:

  1. Create a Single View Application
  2. Drag the UIPickerView object into your Storyboard
  3. Bring over three UIImageView objects.
Create the connections to NMViewController.h file.

CTRL+drag from each of the four UI elements into the NMViewController.h file and release.

  1. For the UIPickerView element, when the popup appears, select "outlet" as an outlet type, and we’ll name the static label as “personPicker”
  2. Label for the UIImageView selections as "headImage”, "bodyImage", "legImage".

NMViewController.h file.
Adding this code shows that we’ll use the data source and delegate protocols of this class:
<UIPickerViewDataSource,UIPickerViewDelegate>

@interface NMViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIImageView *headImage;
@property (strong, nonatomic) IBOutlet UIImageView *bodyImage;
@property (strong, nonatomic) IBOutlet UIImageView *legImage;
@property (strong, nonatomic) IBOutlet UIPickerView *personPicker;
@property (strong, nonatomic) NSArray *heads;
@property (strong, nonatomic) NSArray *bodies;
@property (strong, nonatomic) NSArray *feet;
@end

Data Source Implementation

While some Xcode UI elements already come preconfigured (like UIDatePicker), UIPickerview does require some coding to get the element to look right, and to function correctly. This is all done within the viewcontroller.m file.

Create the array of names to populate our UIPickerView.

Within the ‘viewDidLoad’ method in the viewcontroller.m file add a list of names:

// column 1
self.heads = [[NSArray alloc] initWithObjects:@"H1",@"H2",@"H3",@"H4",@"H5",@"H6",@"H7",@"H8",@"H9",@"H10",@"H11",@"H12",@"H13",@"H14",@"H15", nil];
// column 2
self.bodies = [[NSArray alloc] initWithObjects:@"B1",@"B2",@"B3",@"B4",@"B5",nil];
// column 3
self.legs = [[NSArray alloc] initWithObjects:@"L1",@"L2",@"L3",@"L4",nil];

UIPicker Setup

    The UIPicker View can be configured to hold a number of different variables. The follwoing code creates a picker view with one wheel of data.

// returns the number of 'columns' to display.

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{

// Three components: "0","1", and "3"
return 3;
}

// returns the # of rows in each component
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent: (NSInteger)component
{
if (component == 0) { // For component 1, return the heads length
return [self.heads count];
}
else if (component == 1) { // For component 2, return the heads length
return [self.bodies count];
}
else // For component 3, return the heads length
{
return [self.legs count];

}
}

The return in the numberOfRowsInComponent will just return the number of items in the friendList array.

Delegate Implementation

Configure the UIPickerView delegate that we defined in the .h file. Command+Click the UIPickerViewDelegate from viewcontroller.h will take you to a list of 3 delegate methods that we’ll define. The two that we’ll use for this example are:

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
if (component == 0) {
return [self.heads objectAtIndex:row];
}
if (component == 1)
{
return [self.bodies objectAtIndex:row];
}
else
{
return [self.legs objectAtIndex:row];
}

}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
// UIImage objects

UIImage *H1 = [UIImage imageNamed:@"H1.png"];
UIImage *H2 = [UIImage imageNamed:@"H2.png"];
UIImage *H3 = [UIImage imageNamed:@"H3.png"];
UIImage *H4 = [UIImage imageNamed:@"H4.png"];
UIImage *H5 = [UIImage imageNamed:@"H5.png"];
UIImage *H6 = [UIImage imageNamed:@"H6.png"];
UIImage *H7 = [UIImage imageNamed:@"H7.png"];
UIImage *H8 = [UIImage imageNamed:@"H8.png"];
UIImage *H9 = [UIImage imageNamed:@"H9.png"];
UIImage *H10 = [UIImage imageNamed:@"H10.png"];
UIImage *H11 = [UIImage imageNamed:@"H11.png"];
UIImage *H12 = [UIImage imageNamed:@"H12.png"];
UIImage *H13 = [UIImage imageNamed:@"H13.png"];
UIImage *H14 = [UIImage imageNamed:@"H14.png"];
UIImage *H15 = [UIImage imageNamed:@"H15.png"];

UIImage *B1 = [UIImage imageNamed:@"B1.png"];
UIImage *B2 = [UIImage imageNamed:@"B2.png"];
UIImage *B3 = [UIImage imageNamed:@"B3.png"];
UIImage *B4 = [UIImage imageNamed:@"B4.png"];
UIImage *B5 = [UIImage imageNamed:@"B5.png"];

UIImage *L1 = [UIImage imageNamed:@"L1.png"];
UIImage *L2 = [UIImage imageNamed:@"L2.png"];
UIImage *L3 = [UIImage imageNamed:@"L3.png"];
UIImage *L4 = [UIImage imageNamed:@"L4.png"];

if (component == 0) { // Change the image
switch(row)
{
case 0:
self.headImage.image = H1;
break;
case 1:
self.headImage.image = H2;
break;
case 2:
self.headImage.image = H3;
break;
case 3:
self.headImage.image = H4;
break;
case 4:
self.headImage.image = H5;
break;
case 5:
self.headImage.image = H6;
break;
case 6:
self.headImage.image = H7;
break;
case 7:
self.headImage.image = H8;
break;
case 8:
self.headImage.image = H9;
break;
case 9:
self.headImage.image = H10;
break;
case 10:
self.headImage.image = H11;
break;
case 11:
self.headImage.image = H12;
break;
case 12:
self.headImage.image = H13;
break;
case 13:
self.headImage.image = H14;
break;
case 14:
self.headImage.image = H15;
break;
}

}
if (component == 1) { // Change the image
//else // Change the label text
switch(row)
{
case 0:
self.bodyImage.image = B1;
break;
case 1:
self.bodyImage.image = B2;
break;
case 2:
self.bodyImage.image = B3;
break;
case 3:
self.bodyImage.image = B4;
break;
case 4:
self.bodyImage.image = B5;
break;
}
}
NSLog(@"here");
if (component == 2) { // Change the image
//else // Change the label text
switch(row)
{
case 0:
self.legImage.image = L1;
break;
case 1:
self.legImage.image = L2;
break;
case 2:
self.legImage.image = L3;
break;
case 3:
self.legImage.image = L4;
break;

}
}
}

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

@end

 

 

Connecting Data Source and Delegate

Connect our PickerView to the ViewController.

  1. Select the PickerView element,and make a connection from the delegate open circle to the ViewController within the document outline.
    delegate
  2. Repeat this process for the data source.

 

Adding to the Project (three row picker w secret button)

// entire .m file
// ViewController.m
// ThreeViewApp
//
// Created by John Valentino on 4/6/16.
// Copyright © 2016 SLU. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
// column 1
self.heads = [[NSArray alloc] initWithObjects:@"H1",@"H2",@"H3",@"H4",@"H5",@"H6",@"H7",@"H8",@"H9",@"H10",@"H11",@"H12",@"H13",@"H14",@"H15", nil];
// column 2
self.bodies = [[NSArray alloc] initWithObjects:@"B1",@"B2",@"B3",@"B4",@"B5",nil];
// column 3
self.feet = [[NSArray alloc] initWithObjects:@"L1",@"L2",@"L3",@"L4",nil];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
// returns the number of 'columns' to display.

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{

// Three components: "0","1", and "3"
return 3;
}

// returns the # of rows in each component
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent: (NSInteger)component
{
if (component == 0) { // For component 1, return the heads length
return [self.heads count];
}
else if (component == 1) { // For component 2, return the heads length
return [self.bodies count];
}
else // For component 3, return the heads length
{
return [self.feet count];

}
}

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
if (component == 0) {
return [self.heads objectAtIndex:row];
}
if (component == 1)
{
return [self.bodies objectAtIndex:row];
}
else
{
return [self.feet objectAtIndex:row];
}

}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
// Keeps track of which row is selected
if (component == 0) {
self.column0 = row;
}
else {
self.column1 = row;
// End keeping track of which row is selected
}
// UIImage objects

UIImage *H1 = [UIImage imageNamed:@"H1.png"];
UIImage *H2 = [UIImage imageNamed:@"H2.png"];
UIImage *H3 = [UIImage imageNamed:@"H3.png"];
UIImage *H4 = [UIImage imageNamed:@"H4.png"];
UIImage *H5 = [UIImage imageNamed:@"H5.png"];
UIImage *H6 = [UIImage imageNamed:@"H6.png"];
UIImage *H7 = [UIImage imageNamed:@"H7.png"];
UIImage *H8 = [UIImage imageNamed:@"H8.png"];
UIImage *H9 = [UIImage imageNamed:@"H9.png"];
UIImage *H10 = [UIImage imageNamed:@"H10.png"];
UIImage *H11 = [UIImage imageNamed:@"H11.png"];
UIImage *H12 = [UIImage imageNamed:@"H12.png"];
UIImage *H13 = [UIImage imageNamed:@"H13.png"];
UIImage *H14 = [UIImage imageNamed:@"H14.png"];
UIImage *H15 = [UIImage imageNamed:@"H15.png"];

UIImage *B1 = [UIImage imageNamed:@"B1.png"];
UIImage *B2 = [UIImage imageNamed:@"B2.png"];
UIImage *B3 = [UIImage imageNamed:@"B3.png"];
UIImage *B4 = [UIImage imageNamed:@"B4.png"];
UIImage *B5 = [UIImage imageNamed:@"B5.png"];

UIImage *L1 = [UIImage imageNamed:@"L1.png"];
UIImage *L2 = [UIImage imageNamed:@"L2.png"];
UIImage *L3 = [UIImage imageNamed:@"L3.png"];
UIImage *L4 = [UIImage imageNamed:@"L4.png"];

if (component == 0) { // Change the image
switch(row)
{
case 0:
self.headImage.image = H1;
break;
case 1:
self.headImage.image = H2;
break;
case 2:
self.headImage.image = H3;
break;
case 3:
self.headImage.image = H4;
break;
case 4:
self.headImage.image = H5;
break;
case 5:
self.headImage.image = H6;
break;
case 6:
self.headImage.image = H7;
break;
case 7:
self.headImage.image = H8;
break;
case 8:
self.headImage.image = H9;
break;
case 9:
self.headImage.image = H10;
break;
case 10:
self.headImage.image = H11;
break;
case 11:
self.headImage.image = H12;
break;
case 12:
self.headImage.image = H13;
break;
case 13:
self.headImage.image = H14;
break;
case 14:
self.headImage.image = H15;
break;
}

}
if (component == 1) { // Change the image
//else // Change the label text
switch(row)
{
case 0:
self.bodyImage.image = B1;
break;
case 1:
self.bodyImage.image = B2;
break;
case 2:
self.bodyImage.image = B3;
break;
case 3:
self.bodyImage.image = B4;
break;
case 4:
self.bodyImage.image = B5;
break;
}
}
NSLog(@"here");
if (component == 2) { // Change the image
//else // Change the label text
switch(row)
{
case 0:
self.legImage.image = L1;
break;
case 1:
self.legImage.image = L2;
break;
case 2:
self.legImage.image = L3;
break;
case 3:
self.legImage.image = L4;
break;

}
}
//beginning of statement for showing a button if specific pickerView cases are selected
if (self.column0 == 1 && self.column1 == 3)
{
self.goodbutton.hidden = false;
self.goodbutton.enabled = true;
}
else
{
self.goodbutton.hidden = true;
self.goodbutton.enabled = false;
}
//End of statement for showing a button if specific pickerView cases are selected

if (self.column0 == 2 && self.column1 == 4)
{
self.badbutton.hidden = false;
self.badbutton.enabled = true;
}
else
{
self.badbutton.hidden = true;
self.badbutton.enabled = false;
}
}

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

@end

//entre .h file

//
// ViewController.h
// ThreeViewApp
//
// Created by John Valentino on 4/6/16.
// Copyright © 2016 SLU. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIImageView *headImage;
@property (strong, nonatomic) IBOutlet UIImageView *bodyImage;
@property (strong, nonatomic) IBOutlet UIImageView *legImage;
@property (strong, nonatomic) IBOutlet UIPickerView *personPicker;
@property (strong, nonatomic) IBOutlet UIButton *goodbutton;
@property (strong, nonatomic) IBOutlet UIButton *badbutton;
@property (strong, nonatomic) NSArray *heads;
@property (strong, nonatomic) NSArray *bodies;
@property (strong, nonatomic) NSArray *feet;
@property NSInteger column0;
@property NSInteger column1;
@end