您的位置:首页 > 产品设计 > UI/UE

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

2017-01-18 17:26 561 查看
UIPickerView数据选择视图
一作用和要求
作用

要求

二UIPickerView数据源
返回总的列数

返回第component列的行数

刷新数据方法

三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


九、省市选择的图示

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: