UIPickerView
UIPickerView在iOS开发中是一个很常见的控件,例如计时器选择时间,填写省市区位置时都可以用的上,最近写项目时使用到了这个技术,总结一下。
遵循的协议
UIPickerView类似于UITableView这类控件,是需要遵循数据源和代理两个协议的。 我们在使用前添加这两个协议。
@interface ViewController : UIViewController<
UIPickerViewDelegate,
UIPickerViewDataSource
>
@property (nonatomic, strong) UIPickerView* pickerView;
UIPickerViewDataSource : 此协议中有两个必须实现的方法 分别是设置选择器的行和列数
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 3;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
return 10;
}
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
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;
简单实用
大概使用的方法如上所示,下面就开始创建UIPickerView;
_pickerView = [[UIPickerView alloc] init];
_pickerView.delegate = self;
_pickerView.dataSource = self;
_pickerView.frame = CGRectMake(0, HEIGHT * 0.7, WIDTH, HEIGHT * 0.3);
[self.view addSubview:_pickerView];
然后实现必须的方法以及你需要的方法: 这里简单的使用了NSSting显示这种方式
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 3;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
return 10;
}
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
return @"差不多先生";
}
就实现了下面的效果 这就是一个简单的选择器的使用,但比较单一无法解决实际开发的需求,下面实现了一个省市区绑定选择的UIPickerView。
省市区联动UIPickerView
Demo需求展示如下:
滑动省市对应的列数据刷新
重构plist
由于这里省市区的数据很多,所以我们利用plist文件来保存信息,这里有一个重构好的文件,链接: plist 密码: 8b9u。
有了文件后,我们首先创建三个数组来保存文件中存的信息,可以提前看一下plist里面存储的数据了解一下类型。 解析数据:
@interface ChangeAreaViewController () {
NSArray* provinceArray, *cityArray, *areaArray;
}
- (void)loadData {
provinceArray = [[NSMutableArray alloc] initWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"area.plist" ofType:nil]];
cityArray = [[provinceArray objectAtIndex:0] objectForKey:@"cities"];
areaArray = [[cityArray objectAtIndex:0] objectForKey:@"areas"];
}
这样我们便得到了plist中的全部省信息,以及第一个省的市区信息(这里默认展示第一行)。
实现相应方法
下面设置列和行数
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
return 3;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
if (component == 0) {
return [provinceArray count];
} else if( component == 1 ) {
return [cityArray count];
} else {
return [areaArray count];
}
}
列数还是3,行数变成实际每列对应的行数。
实现自定义view的显示,以及滑动对应的逻辑关系
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {
UILabel* myView = nil;
myView = [[UILabel alloc] init];
myView.textAlignment = NSTextAlignmentCenter;
myView.font = [UIFont systemFontOfSize:22];
if (component == 0) {
myView.text =[[provinceArray objectAtIndex:row] objectForKey:@"state"];
} else if (component == 1) {
myView.text =[[cityArray objectAtIndex:row] objectForKey:@"city"];
} else {
myView.text =[areaArray objectAtIndex:row];
}
return myView;
}
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
if (component == 0) {
cityArray = [[provinceArray objectAtIndex:row] objectForKey:@"cities"];
NSLog(@"%@", cityArray);
[self.pickerView reloadComponent:1];
[_pickerView selectRow:0 inComponent:1 animated:NO];
if ([cityArray count] != 0) {
areaArray = [[cityArray objectAtIndex:0] objectForKey:@"areas"];
[_pickerView selectRow:0 inComponent:2 animated:NO];
[_pickerView reloadComponent:2];
}
} else if (component == 1) {
areaArray = [[cityArray objectAtIndex:row] objectForKey:@"areas"];
[_pickerView selectRow:0 inComponent:2 animated:NO];
[_pickerView reloadComponent:2];
}
}
上面的方法很好理解,就是显示对应数据,不多赘述。 最核心的代码就是滑动后响应方法,当我们滑动数据为第0列时候,更新对应的第1列数据,如果第1列数据存在,那么请求第2列的数据,对应更新第二列的数据。 以上就是UIPickerView的简单实用,如有问题,敬请斧正。
|