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连接到视图控制器对象。

 





posted @ 2012-10-17 16:00  周文  阅读(683)  评论(0编辑  收藏  举报