转: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
|
@interface
MyViewController : UIViewController <UIPickerViewDelegate, UIPickerViewDataSource> {
// label showing currently selected option
IBOutlet
UILabel *searchWhere;
// data for populating picker view
NSMutableArray
*searchWhereOptions;
// display picker view in an action sheet
UIActionSheet *actionSheet;
// keep track of selected option’s index
NSInteger
selectedOption;
}
- (
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 {
return
1;
}
- (
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:
nil
delegate:
nil
cancelButtonTitle:
nil
destructiveButtonTitle:
nil
otherButtonTitles:
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:[
NSArray
arrayWithObject:
@"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:
self
action:
@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 = [[
NSMutableArray
alloc] 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
];
}
|