【iOS控件】—— UIPickerView的使用

一. 简述UIPickerView

先看一下UIPickerView的效果图：

1. 什么是UIPickerView

UIPickerView是iOS平台上的一个用户界面元素，用于在应用程序中显示和选择多个选项中的一个。它通常以类似于滚轮的形式呈现，允许用户通过滑动手势来选择列表中的项目，UIPickerView由一个或多个组件（Component）组成，每个组件都表示一个独立的选项列表。每个组件可以包含多个行（Row），每一行代表一个具体的选项。用户可以通过滑动每个组件的滚轮来选择特定的行。

2. UIPickerView遵守的协议

UIPickerView需要遵守两个基础的协议。

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
<UIPickerViewDelegate, UIPickerViewDataSource>

@end

UIPickerViewDataSource：
此协议中有两个必须实现的方法
分别是设置选择器的行和列数。

//表示有几列
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 3;
    
}

//每一列中有几个格子
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    if (component == 0) {
        return self.directionArray.count;
        
    } else if (component == 1) {
        return self.curentNameArray.count;
        
    } else {
        return 1;
    }
}

UIPickerViewDeleagate:
有以下方法：

//返回UIPickerView中Component列的宽度
 - (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component;
 
 //返回UIPickerView中Component列中每行的高度
 - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component;
 
 //当选择某一项Component列中的row行时的回调函数
 - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
 //标准的UIPickerView内容，只有字符串
 - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component;
 
//自定义的UIPickerView内容，给每个列，行设置一个UIView对象
 - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view;
 //这里列为component,行row返回一个UIView用来显示在UIPickerView中。reusingView:(UIView *)

刷新数据的方法：

- (void)reloadAllComponents;
- (void)reloadComponent:(NSInteger)component;

二. 测试Demo

以上都是一些基础的概念性的东西，接下来通过一个Demo来实现一下上面的功能。
首先要先定义一个UIPickerView的视图然后进行初始化。

@interface ViewController ()

@property (nonatomic, copy) NSArray* directionArray;
@property (nonatomic, copy) NSArray* curentNameArray;
@property (nonatomic, copy) NSArray* nameArray1;
@property (nonatomic, copy) NSArray* nameArray2;
@property (nonatomic, copy) NSArray* nameArray3;
@property (nonatomic, copy) NSArray* nameArray4;
@property (nonatomic, copy) NSArray* nameArray5;
@property (nonatomic, copy) NSArray* nameArray6;

@property (nonatomic, copy) NSArray* Dict;
@property (nonatomic, copy) NSArray* endArray;
@property (nonatomic, copy) NSString* currentEndString;

@property (nonatomic, strong) UIPickerView* pickerView;

@end

然后对这些数组进行初始化，并且初始化UIPickerView。

[self loadDate];

    self.pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 200, [UIScreen mainScreen].bounds.size.width, 200)];
    self.pickerView.delegate = self;
    self.pickerView.dataSource = self;
    [self.view addSubview:self.pickerView];

- (void) loadDate {
    
    self.directionArray = @[@"陕西", @"山西", @"重庆", @"河南", @"湖北", @"四川"];
    self.nameArray1 = @[@"西安", @"榆林", @"咸阳", @"宝鸡", @"延安", @"渭南"];
    self.nameArray2 = @[@"太原", @"长治", @"吕梁", @"晋城", @"运城", @"临汾"];
    self.nameArray3 = @[@"重庆", @"涪陵", @"万州", @"永州", @"江津", @"长寿"];
    self.nameArray4 = @[@"郑州", @"洛阳", @"南阳", @"许昌", @"周口", @"新乡"];
    self.nameArray5 = @[@"武汉", @"襄阳", @"宜昌", @"荆州", @"荆门", @"黄石"];
    self.nameArray6 = @[@"成都", @"绵阳", @"南充", @"宜宾", @"泸州", @"达州"];
    
    self.endArray = @[@"秦", @"晋", @"巴", @"韩", @"楚", @"蜀"];
    self.Dict = @[self.nameArray1, self.nameArray2, self.nameArray3, self.nameArray4, self.nameArray5, self.nameArray6];
    self.curentNameArray = self.Dict[0];
    self.currentEndString = self.endArray[0];
    
}

然后实现必须的方法以及你需要的方法：

//表示有几列
- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 3;
    
}

//每一列中有几个格子
- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    if (component == 0) {
        return self.directionArray.count;
        
    } else if (component == 1) {
        return self.curentNameArray.count;
        
    } else {
        return 1;
    }
}


// 滑动触发事件
- (void) pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    // 使用一个UIAlertView来显示用户选中的列表项
    if (component == 0) {
        self.curentNameArray = self.Dict[row];
        self.currentEndString = self.endArray[row];
        
        [self.pickerView reloadComponent:1];
        [self.pickerView reloadComponent:2];
        
        //这个方法的selectRow即可以表示你更新第一个列表之后是否更新到第二个列表的对应的row
        // BOOL类型的YES表示动画效果
        [self.pickerView selectRow:0 inComponent:1 animated:YES];
        [self.pickerView selectRow:0 inComponent:2 animated:YES];
        
        NSLog(@"选择了%@方向",self.directionArray[row]);
        
    } else {
        NSLog(@"%@", self.curentNameArray[row]);
    }
    
}

// 返回列表的内容
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    if (component == 0) {
        return self.directionArray[row];
    } else if (component == 1){
        return  self.curentNameArray[row];
    } else {
        return  self.currentEndString;
    }
}
// 返回列表的宽度
- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    return 130;
    
}

三. 总结

UIPickerView使用滚轮形式展示选项，用户可以通过滑动手势来选择，这种交互方式直观且易于使用，可以显示多个选项，但只占用有限的屏幕空间，适用于在有限的界面空间中提供大量选项选择的情况。但是仍然有缺点，由于UIPickerView一次只显示有限数量的选项，对于包含大量选项的情况，可能会导致用户需要频繁滚动和选择，不太方便。