2.13 选择器控件——UIPickerView

UIPickerView 是一个简易的列表控件，用于提供给用户有限个数的选项供用户选择，UIPickerView的UI设计十分漂亮，是iOS系统特有的UI模式。在实际应用中，UIPickerView的应用也十分广泛，例如省市县选择列表、时间选择、日期选择等都可以通过UIPickerView来设计。

2.13.1 创建一个UIPickerView控件

UIPickerView与之前章节中的UI控件有着很大不同，UIPickerView更加复杂一些，它是通过代理和数据源的方法来对其进行设置和数据源的填充，这种控件的设计模式也是代理模式的应用之一。使用Xcode创建一个名为UIPickerViewTest的工程，在ViewController.m文件的声明部分添加对相应协议的遵守，这里需要遵守两个协议，分别是UIPickerViewDelegate 和UIPickerViewDataSource。

        @interface ViewController ()<UIPickerViewDataSource, UIPickerViewDelegate>
        @end

在viewDidLoad方法中添加如下代码。

        - (void)viewDidLoad {
            [super viewDidLoad];
            UIPickerView * picker = [[UIPickerView alloc]initWithFrame:CGRectMake
    (20, 100, 280, 150)];
            picker.delegate=self;
            picker.dataSource=self;
            [self.view addSubview:picker];
        }

上面的代码中除了对UIPickerView 进行创建和初始化工作外，设置了当前类对象为它的数据源和代理。在ViewController.m文件中实现如下代理方法：

        -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
            return 2;
        }
        -(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:
    (NSInteger)component{
            return 10;
        }
        -(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)
    row forComponent:(NSInteger)component{
            return [NSString stringWithFormat:@"%lu分区%lu数据", component, row];
        }
        -(CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NS
    Integer)component{
            return 44;
        }
        -(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInte
    ger)component{
            return 140;
        }

numberOfComponentsInPickerView：方法返回一个NSInterger 类型的整数，用于设置UIPickerView视图的分区数，也可以理解为选择列表的列数。

pickerView:numberOfRowsInComponent：方法的返回值设置UIPickerView 每个分区的行数，参数component用于判断具体的分区。

pickerView:titleForRow:forComponent：方法的返回值设置列表中每一行的数据，这个方法中的两个参数row和component分别用于区分行与列。

pickerView:rowHeightForComponent：方法的返回值设置具体行的行高。

pickerView:widthForComponent：方法的返回值设置分区的宽度，即列的宽度。

运行工程，效果如图2-39所示。

图2-39 UIPickerView控件

2.13.2 UIPickerView选中数据时的回调代理

UIPickerView 总是会展现几列数据，帮助用户进行快速选择，当用户上下滑动UIPickerView 列表时，列表中的数据会进行上下滑动移动，当移动动作停止时，这时悬停在UIPickerView 列表中间的数据即为用户选中的数据，并且此时，系统也会调用UIPickerView的如下代理方法来通知开发者用户的选择。

        -(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row
    inComponent:(NSInteger)component{
            NSLog(@"%lu, %lu", row, component);
        }

pickerView:didSelectRow:inComponent：方法在调用时，row参数和component参数会将用户选择的行和分区的信息传递给开发者。

上一章目录下一章