iOS学习笔记-025.UIPickerView——数据选择视图

UIPickerView——数据选择视图

一、作用和要求

1.作用

作用：负责从指定的数据源中选择数据

2.要求

要求：使用PickerView之前需要指定数据源

二、UIPickerView——数据源

• 数据源负责计算UIPickerView有多少列、多少行数据
• 数据源须遵守UIPickerViewDataSource协议，数据源方法如下：

1.返回总的列数

// 返回总的列数
- (NSInteger)numberOfComponentsInPickerView:

2.返回第component列的行数

// 返回第component列的行数
- (NSInteger)pickerView:numberOfRowsInComponent:

3.刷新数据方法

[pickerView reloadComponent:1];

一旦调用了这个方法，就会重新给数据源发送消息计算这列的行数、重新给代理发送消息获得这列的内容

三、UIPickerView——代理

1.常用代理

代理可以给UIPickerView提供具体的数据、监听UIPickerView的一些事件
代理必须遵守UIPickerViewDelegate协议，常用代理方法如下：

// 第component列第row行显示什么字符串内容
- (NSString *)pickerView:titleForRow:forComponent:
// 每当选择了新的一行就会调用
- (void)pickerView:didSelectRow:inComponent:

2.其他代理

1.代理方法扩展

// 第component列第row行显示什么样的UIView，最后一个view参数是用来性能优化的
- (UIView *)pickerView:viewForRow:forComponent:reusingView:
// 返回第component列每一行的高度
- (CGFloat)pickerView:rowHeightForComponent:

2.补充

自定义PickerView时，需要指定显示选择指示器属性
pickerView.showsSelectionIndicator = YES;

四、基础代码示例

//
//  ViewController.m
//  03_UIView13_UIPickerView01
//
//  Created by 杞文明 on 15/12/29.
//  Copyright © 2015年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
    // 第一列的数据源
    NSArray *_colOne;
    // 第二列的数据源
    NSArray *_colTwo;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _colOne = @[@"a",@"b",@"c",@"d"];
    _colTwo = @[@"1",@"2",@"3",@"4",@"5",@"6"];

}

/**返回列数*/
- (NSInteger)numberOfComponentsInPickerView:(nonnull UIPickerView *)pickerView{
    return 2;
}

/**返回行数*/
- (NSInteger)pickerView:(nonnull UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if (component == 0) {
        return _colOne.count;
    } else {
        return _colTwo.count;
    }
}

/**row行component列显示的数据是*/
- (nullable NSString *)pickerView:(nonnull UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    if(component==0){
        return _colOne[row];
    }else{
        return _colTwo[row];
    }
}

/**显示选中的数据*/
- (void)pickerView:(nonnull UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    NSInteger rowInCom1 = [pickerView selectedRowInComponent:0];
    NSInteger rowIncom2 = [pickerView selectedRowInComponent:1];
    NSLog(@"第一列选中的行数是 %ld，第二列选中的行数是 %ld",rowInCom1,rowIncom2);
    NSLog(@"第一列选中的值是  %@，第二列选中的值是  %@",_colOne[rowInCom1],_colTwo[rowIncom2]);
    NSLog(@" ");//换行作用
}

@end

五、基础示例图示

六、国旗代码示例

//
//  ViewController.m
//  03_UIView14_UIPickerView2_国旗
//
//  Created by 杞文明 on 15/12/29.
//  Copyright © 2015年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
    NSArray * _dataList ;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self LoadData];
    // 初始化Picker的选项
//    [_pickerView selectRow:8 inComponent:0 animated:YES];
}
/**加载数据*/
-(void)LoadData{
    NSString * path = [[NSBundle mainBundle]pathForResource:@"flags" ofType:@"plist"];
    _dataList = [NSArray arrayWithContentsOfFile:path];
    NSLog(@"%@",_dataList);
}


/**选中row行component列*/
- (void)pickerView:(nonnull UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{
    NSDictionary *dict = _dataList[row];
    NSLog(@"选择的国家是 %@", dict[@"name"]);
}

/**返回多少列*/
- (NSInteger)numberOfComponentsInPickerView:(nonnull UIPickerView *)pickerView{
    return 1;
}
/**返回多少行*/
- (NSInteger)pickerView:(nonnull UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    return _dataList.count;
}
/**加载内容 用自定义视图填充选择器的内容*/
- (nonnull UIView *)pickerView:(nonnull UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(nullable UIView *)view{
    // 这里木有优化
    // 自定义一个UIView
    NSInteger viewHeight = 44;
    NSInteger labelWidth = 200;
    NSInteger viewWidth = 280;
    // 从数组中取出对应的数据字典
    NSDictionary *dict = _dataList[row];

    //1.创建一个view
    UIView * myView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, viewWidth, viewHeight)];
    [myView setBackgroundColor:[UIColor blueColor]];

    //2.创建label
    //2.1创建uilabel
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, labelWidth, viewHeight)];
    //2.2设置数据
    [label setText:dict[@"name"]];
    [label setTextColor:[UIColor redColor]];
    [label setTextAlignment:NSTextAlignmentCenter];
    //2.3加载lable 到view
    [myView addSubview:label];

    //3.创建imageview
    //3.1创建UIImage
    UIImage * image = [UIImage imageNamed:dict[@"icon"]];
    //3.2创建UIImageView
    UIImageView * imageView = [[UIImageView alloc]initWithImage:image];
    [imageView setFrame:CGRectMake(labelWidth, 0, viewWidth-labelWidth, viewHeight)];
    //3.3加载imageview到myview
    [myView addSubview:imageView];

    //4.返回myView
    return myView;
}

/**返回列高*/
- (CGFloat)pickerView:(nonnull UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component{
    return 48;
}

@end

七、国旗图示

八、省市选择代码

//
//  ViewController.m
//  03_UIView15_UIPickerView03
//
//  Created by 杞文明 on 15/12/30.
//  Copyright © 2015年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
    //省份
    NSArray* _province;
    //市
    NSDictionary* _city;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self createPickerView];
    [self loadData];
}

/**创建ui*/
-(void)createPickerView{
    //1.实例化
    UIPickerView * pickerview = [[UIPickerView alloc]init];

    //2.设置控件的数据源
    [pickerview setDataSource:self];

    //3.设置代理
    [pickerview setDelegate:self];

    //4.设置选择选择器
    [pickerview setShowsSelectionIndicator:YES];

    //5.添加view中
    [self.view addSubview:pickerview];



}

/**加载数据*/
-(void)loadData{
    // 1. 省份
    _province = @[@"北京", @"河北", @"湖南"];

    // 2. 城市
    // 2.1 初始化城市字典
    _city = [NSMutableDictionary dictionary];

    // 2.2 实例化城市中的数据
    NSArray *city1 = @[@"东城", @"西城"];
    [_city setValue:city1 forKey:@"北京"];

    NSArray *city2 = @[@"石家庄", @"唐山", @"保定"];
    [_city setValue:city2 forKey:@"河北"];

    NSArray *city3 = @[@"长沙", @"郴州", @"衡阳"];
    [_city setValue:city3 forKey:@"湖南"];
}

/**行数*/
- (NSInteger)numberOfComponentsInPickerView:(nonnull UIPickerView *)pickerView{
    return 2;
}

/**列数*/
-(NSInteger)pickerView:(nonnull UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
    if(component==0){//第一列
        return _province.count;
    }else{
        NSInteger rowCom0 = [pickerView selectedRowInComponent:0];
        NSString * provinceName = _province[rowCom0];
        NSArray* city = _city[provinceName];
        return city.count;
    }
}

/**显示的视图*/
//-(nonnull UIView *)pickerView:(nonnull UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(nullable UIView *)view{
//    
//}

- (nullable NSString *)pickerView:(nonnull UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
    if (component == 0) {
        return _province[row];
    } else {
        // 城市
        // 1. 获得省份列选择的行数
        NSInteger rowProvince = [pickerView selectedRowInComponent:0];
        // 2. 获得省份名称
        NSString *provinceName = _province[rowProvince];
        // 3. 获得城市的数组
        NSArray *citys = _city[provinceName];

        //        NSLog(@"%@", citys[row]);

        // 4. 返回城市数组中row的字符串内容
        return citys[row];
    }
}

/**选中的数据*/
- (void)pickerView:(nonnull UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{

    [pickerView reloadComponent:1];

    NSInteger row1 = [pickerView selectedRowInComponent:0];
    NSInteger row2 = [pickerView selectedRowInComponent:1];

    NSString *provinceName = _province[row1];
    // 3. 获得城市的数组
    NSArray *citys = _city[provinceName];

    NSLog(@"%@~%@", _province[row1], citys[row2]);
}
@end

九、省市选择的图示