iOS 5 编程-实现自定义的选择器视图(UIPickerView)
在iOS 5 编程-工具栏UIToolbar和日期选择器UIDatePicker的应用中,演示了UIDatePicker 日期选择器的使用。
这里将创建一个自定义的选择器视图,提供的范例App在iPad 模拟器中运行,iPhone的版本稍有差异。iPad 采用popover 弹出式视图,iPhone 版本采用模态视图,这个符合Apple的UI设计规范(Apple要求必须在弹出框中显示选择器)。
范例App的运行界面如下所示(iPad模拟器):
要实现自定义选择器视图,必须实现类遵守选择器委托协议(UIPickerViewDelegate)和选择器数据源协议(UIPickerViewDataSource)。
@interface AppleChooserViewController : UIViewController <UIPickerViewDataSource, UIPickerViewDelegate>
上述定义的AppleChooserViewController 类将负责实现自定义选择器视图正常运行所需的所有方法。
1. 遵守选择器数据源协议(UIPickerViewDataSource),必须实现的2个方法。
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return kComponentCount;
}
这个方法返回选择器将显示多少个Component。
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
if(component == kAppleComponent)
return [self.appleNames count];
else{
return [self.appleColor count];
}
}
这个方法根据相应的component编号,返回该component将显示的元素数,也就是每一个component包含的元素数。这里使用了常量kAppleComponent,需要自己在AppleChooserViewController.m实现文件中定义。
2. 实现选择器视图委托协议
选择器视图委托协议负责定制选择器的显示方法,以及在用户在选择器中选择时,做出相应的操作。
下面这个方法在选择器相应位置,显示自定义的视图。第一个component显示苹果图片;第二个component显示一个label标签,文本信息为苹果颜色。
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
if(component == kAppleComponent){
return [self.appleImages objectAtIndex:row];
}
else{
UILabel *colorLabel;
colorLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 32)];
colorLabel.backgroundColor = [UIColor clearColor];
colorLabel.text = [self.appleColor objectAtIndex:row];
return colorLabel;
}
}
设置选择器component的高度:
- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
if(component == kAppleComponent){
return 200.0;
}
else{
return 55.0;
}
}
设置选择器component的宽度:
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
if(component == kAppleComponent){
return 200.0;
}
else{
return 120.0;
}
}
下面这个委托方法,用来获取用户在自定义的选择器中所做的选择,这个方法提供的参数为用户选择的component和行号row。
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
MainViewController *initialView = self.mainViewControler;
if(component == kAppleComponent)
{
int chosenColor = [pickerView selectedRowInComponent:kColorComponent];
[initialView displaySelectedApple:[self.appleNames objectAtIndex:row]
withColor:[self.appleColor objectAtIndex:chosenColor]
fromComponent:@”苹果组”];
} else{
int chosenApple = [pickerView selectedRowInComponent:kAppleComponent];
[initialView displaySelectedApple:[self.appleNames objectAtIndex:chosenApple]
withColor:[self.appleColor objectAtIndex:row]
fromComponent:@”颜色组”];
}
}
其中[initialView displaySelectedApple:]是调用初始视图(主视图)的方法displaySelectedApple,用来在主视图显示用户在自定义选择器视图中所做的选择。
3. 还需要建立连接,也就是将选择器视图的输出口dataSource和delegate连接到视图控制器对象。