iOS新手开发之旅-UIPickerView选择器

竹林风

  文章导航  

【iOS新手开发之旅】   http://www.sufeinet.com/thread-24000-1-1.html

介绍

UIPickerView是一个选择器控件，可以生成单列的选择器，也可生成多列的选择器，而且开发者完全可以自定义选择项的外观，因此用法非常灵活。


1.单个pickerview的使用

[Objective-C] 纯文本查看 复制代码

#import "firstVC.h"


@interface firstVC ()<UIPickerViewDataSource,UIPickerViewDelegate>  //遵循协议

@property (nonatomic,strong)UIPickerView * pickerView;//自定义pickerview
@property (nonatomic,strong)NSArray * letter;//保存要展示的字母
@property (nonatomic,strong)NSArray * number;//保存要展示的数字


@end

@implementation firstVC

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor yellowColor];
    self.title = @"Leader";
    
    //获取需要展示的数据
    [self loadData];
    
    // 初始化pickerView
    self.pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, 50, self.view.bounds.size.width, 200)];
    [self.view addSubview:self.pickerView];
    
    //指定数据源和委托
    self.pickerView.delegate = self;
    self.pickerView.dataSource = self;
    
}

#pragma mark 加载数据
-(void)loadData
{
    //需要展示的数据以数组的形式保存
    self.letter = @[@"aaa",@"bbb",@"ccc",@"ddd"];
    self.number = @[@"111",@"222",@"333",@"444"];
}

#pragma mark UIPickerView DataSource Method 数据源方法

//指定pickerview有几个表盘
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 2;//第一个展示字母、第二个展示数字
}

//指定每个表盘上有几行数据
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    NSInteger result = 0;
    switch (component) {
        case 0:
            result = self.letter.count;//根据数组的元素个数返回几行数据
            break;
        case 1:
            result = self.number.count;
            break;
            
        default:
            break;
    }
    
    return result;
}

#pragma mark UIPickerView Delegate Method 代理方法

//指定每行如何展示数据（此处和tableview类似）
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    NSString * title = nil;
    switch (component) {
        case 0:
            title = self.letter[row];
            break;
        case 1:
            title = self.number[row];
            break;
        default:
            break;
    }
    
    return title;
}

看效果：


附件： Test-UIPickerView.zip (199.47 KB, 下载次数: 0)

2018-12-8 15:41 上传

点击文件名下载附件

2.两个PickerView联动

[Objective-C] 纯文本查看 复制代码

#import "firstVC.h"


@interface firstVC ()<UIPickerViewDataSource,UIPickerViewDelegate>  //遵循协议

@property (nonatomic,strong)UIPickerView * pickerView;//自定义pickerview
@property (nonatomic,strong)NSArray * provinces;//展示省份
@property (nonatomic,strong)NSArray * cities;//展示城市
@property (nonatomic,strong)UILabel * label;//展示选中的结果


@end

@implementation firstVC

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor yellowColor];
    self.title = @"Leader";
    
    //获取需要展示的数据
    [self loadData];
    
    // 初始化pickerView
    self.pickerView = [[UIPickerView alloc]initWithFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.height - 400, self.view.bounds.size.width, 400)];
    [self.view addSubview:self.pickerView];
    
    //指定数据源和委托
    self.pickerView.delegate = self;
    self.pickerView.dataSource = self;
    
    _label = [[UILabel alloc]initWithFrame:CGRectMake(0,200, [UIScreen mainScreen].bounds.size.width, 50)];
    _label.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:_label];
    
}

#pragma mark 加载数据
-(void)loadData
{
    NSString * path = [[NSBundle mainBundle]pathForResource:@"citys" ofType:@"plist"];
    self.provinces = [NSArray arrayWithContentsOfFile:path];
    self.cities = [NSArray arrayWithArray:self.provinces[0][@"cities"]];
}

#pragma mark UIPickerView DataSource Method 数据源方法

//有几个表盘（component）
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 2;
}

//没个表盘有几行数据（rows）
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    NSInteger rows = 0;
    switch (component) {
        case 0:
            rows = self.provinces.count;//根据plist文件中的数据返回rows
            break;
        case 1:
            rows = self.cities.count;
            break;
        default:
            break;
    }
    return rows;
}

//每行的标题
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    NSString * title = nil;
    switch (component) {
        case 0:
            title = self.provinces[row][@"name"];
            break;
        case 1:
            title = self.cities[row];
            break;
        default:
            break;
    }
    return title;
}

//选中时回调的委托方法，在此方法中实现省份和城市间的联动
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    switch (component) {
        case 0://选中省份表盘时，根据row的值改变城市数组，刷新城市数组，实现联动
            self.cities = self.provinces[row][@"cities"];
            [self.pickerView reloadComponent:1];
            break;
        case 1:
            self.label.text = [NSString stringWithFormat:@"%@%@",self.provinces[[self.pickerView selectedRowInComponent:0]][@"name"],self.cities[[self.pickerView selectedRowInComponent:1]]];//如果选中第二个
            break;
            
        default:
            break;
    }
}

看效果：



附件： Test-UIPickerView1.zip (205.48 KB, 下载次数: 0)

2018-12-8 16:10 上传

点击文件名下载附件

下一篇  日期选择器UIDatePicker

站长苏飞

强烈支持楼主ing……3

惜

我只是路过打酱油的。

Amy

真是难得给力的帖子啊。

liu

强烈支持楼主ing……

范范

强烈支持楼主ing……