Drop down lists for iPhone: rolling your own

转：http://t2a.co/blog/index.php/drop-down-lists-for-iphone-rolling-your-own/

If like me, you’re fairly new to iPhone development, you might be wondering how to implement drop down lists in your app. The fact of the matter is that there is no native control provided by Apple, similar to the <select> tag you’ll know well if you have a background in web development. So, the solution is to roll our own: stick with me for a few minutes – I promise it’s not as tricky as it sounds. Here is how our finished control will look:

We’re going to use a UIButton control with a custom background image and put a label on top of it to show the currently selected option. Go ahead and add a UIButton and a UILabelto your view using the Interface Builder. If you’re not much of a designer, leave the background image for now and just use a regular button – it doesn’t really matter to get the code working as we need it.

Add an IBOutlet for your label to your view controller’s header file and implement theUIPickerViewDelegate and UIPickerViewDataSource delegates. We also need to define an NSMutableArray, a UIActionSheet and an NSInteger – We’ll deal with these and the delegates we are implementing in just a second. Lastly, declare an IBActionshowSearchWhereOptions which we need to connect to our button in the Interface Builder. Our finished header file looks like this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

@interfaceMyViewController : UIViewController  <UIPickerViewDelegate, UIPickerViewDataSource> {

 

// label showing currently selected option

 

IBOutletUILabel *searchWhere;

 

// data for populating picker view

 

NSMutableArray*searchWhereOptions;

 

// display picker view in an action sheet

 

UIActionSheet *actionSheet;

 

// keep track of selected option’s index

 

NSIntegerselectedOption;

 

}

 

- (IBAction) showSearchWhereOptions;

 

@end

Next – on to our implementation file. Implement the following methods that are required because of the delegates we have implemented.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

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

 

return1;

 

}

 

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {

 

return[searchWhereOptions count];

 

}

 

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

 

return[searchWhereOptions objectAtIndex:row];

 

}

 

// this method runs whenever the user changes the selected list option

 

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

 

// update label text to show selected option

 

searchWhere.text = [searchWhereOptions objectAtIndex:row];

 

// keep track of selected option (for next time we open the picker)

 

selectedOption = row;

 

}

Most of the work happens here.. In our showSearchWhereOptions method, which runs when the user taps our “button” (it is a button really, but it’s sneakily pretending to be a drop down list control).

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

- (IBAction) showSearchWhereOptions {

 

// create action sheet

 

actionSheet = [[UIActionSheet alloc] initWithTitle:nildelegate:nilcancelButtonTitle:nildestructiveButtonTitle:nilotherButtonTitles:nil];

 

[actionSheet setActionSheetStyle:UIActionSheetStyleBlackTranslucent];

 

// create frame for picker view

 

CGRect pickerFrame = CGRectMake(0, 40, 0, 0);

 

// create picker view

 

UIPickerView *pickerView = [[UIPickerView alloc] initWithFrame:pickerFrame];

 

pickerView.showsSelectionIndicator = YES;

 

pickerView.dataSource = self;

 

pickerView.delegate = self;

 

// set selected option to what was previously selected

 

[pickerView selectRow:selectedOption inComponent:0 animated:NO];

 

// add picker view to action sheet

 

[actionSheet addSubview:pickerView];

 

[pickerView release];

 

// create close button to hide action sheet

 

UISegmentedControl *closeButton = [[UISegmentedControl alloc] initWithItems:[NSArrayarrayWithObject:@"Close"]];

 

closeButton.momentary = YES;

 

closeButton.frame = CGRectMake(260, 7.0f, 50.0f, 30.0f);

 

closeButton.segmentedControlStyle = UISegmentedControlStyleBar;

 

closeButton.tintColor = [UIColor blackColor];

 

// link close button to our dismissActionSheet method

 

[closeButton addTarget:selfaction:@selector(dismissActionSheet) forControlEvents:UIControlEventValueChanged];

 

[actionSheet addSubview:closeButton];

 

[closeButton release];

 

// show action sheet

 

[actionSheet showInView:[[UIApplication sharedApplication] keyWindow]];

 

[actionSheet setBounds:CGRectMake(0, 0, 320, 485)];

 

}

We haven’t yet defined our list items – we’ll do this in our viewDidLoad method. We need to make sure we set a default search option too. It’s a zero based index, so setting it to 0 will make “Specified location” our default selection.

1

2

3

4

5

6

7

8

9

10

11

12

13

// define list options

 

searchWhereOptions = [[NSMutableArrayalloc] init];

 

[searchWhereOptions addObject:@"Specified location"];

 

[searchWhereOptions addObject:@"Near me"];

 

[searchWhereOptions addObject:@"Nationally"];

 

// default list option to select

 

selectedOption = 0;

One last thing – implement the dismissActionSheet method which is responsible for hiding the action sheet when we click the done button.

1

2

3

4

5

6

7

- (void) dismissActionSheet {

 

// hide action sheet

 

[actionSheet dismissWithClickedButtonIndex:0 animated:YES];

 

}