第一步:选择Iphone的屏幕
注意:在选择屏幕后如果工程在别的地方打开需要重新选择对应的屏幕 也就是与之对应的Size Class,否则的话是不会显示组件的。
第二步:建立约束,进行屏幕适配。
第三步:设置PickerView的数据源和代理对象为当前的控制器。
第四步:让PIckerView所在的控制器遵循对应的代理协议。并实现对应的数据源和代理方法。
第五步:新建或建好资源文件拖进去。
运行效果如下:
关于数据源和协议方法可以直接点进去拷贝。
在实现省市联动功能时需要注意的两点如下:
(一)设置选中省份的索引为全局变量。以便刷新第二列对应的城市时使用。
(二)在选中行的代理方法中不管第二列之前选中第几行,在刷新数据后都重新显示第一行。
具体工程如下:
建立与Plist文件对应的Model类Province
Province.h
//
// Province.h
// 03.省市联动
//
// Created by 刘刘勋 on 16/1/3.
// Copyright © 2016年 aaaaa. All rights reserved.
//
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface Province : NSObject
@property(nonatomic, copy)NSString *name;
@property(nonatomic, strong)NSArray *cities;
-(instancetype)initWithDic:(NSDictionary *)dic;
+(instancetype)provinceWithDic:(NSDictionary *)dic;
+(NSArray *)provinceList;
@end
Province.m
//
// Province.m
// 03.省市联动
//
// Created by 刘刘勋 on 16/1/3.
// Copyright © 2016年 aaaaa. All rights reserved.
//
#import "Province.h"
@implementation Province
-(instancetype)initWithDic:(NSDictionary *)dic{
if (self = [super init]) {
[self setValuesForKeysWithDictionary:dic];
}
return self;
}
+(instancetype)provinceWithDic:(NSDictionary *)dic{
return [[self alloc] initWithDic:dic];
}
+(NSArray *)provinceList{
//PList文件路径
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"provinces" ofType:@"plist"];
NSArray *provincePlist = [NSArray arrayWithContentsOfFile:filePath];
NSMutableArray *provinceM = [NSMutableArray array];
for (NSDictionary *dic in provincePlist) {
Province *prov = [Province provinceWithDic:dic];
[provinceM addObject:prov];
}
return provinceM;
}
@end
在PickerView所在的控制器内编辑如下:
viewController.m
//
// ViewController.m
// 03.省市联动
//
// Created by 刘刘勋 on 16/1/3.
// Copyright © 2016年 aaaaa. All rights reserved.
//
#import "ViewController.h"
#import "Province.h"
@interface ViewController ()<UIPickerViewDataSource,UIPickerViewDelegate>
@property(nonatomic, strong)NSArray *provinces;
@property(nonatomic, assign)NSInteger indexOfProvince; //当前默认选中的省份
@end
@implementation ViewController
-(NSArray *)provinces{
if (!_provinces) {
_provinces = [Province provinceList];
}
return _provinces;
}
- (void)viewDidLoad {
[super viewDidLoad];
}
// returns the number of 'columns' to display.
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{
return 2;
}
// returns the # of rows in each component..
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{
if (component == 0) { // 第一列显示省份
return self.provinces.count;
}
// 获取对应省份的城市个数
Province *province = self.provinces[self.indexOfProvince];
return province.cities.count;
}
#pragma mark - 显示数据
-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{
if (component == 0) { //显示省份的名称
Province *province = self.provinces[row];
return province.name;
}
// 获取选中的城市,显示城市的名称
Province *selectedProvince = self.provinces[self.indexOfProvince];
return selectedProvince.cities[row];
}
//-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
//{
// UILabel *label = (UILabel *)view;
// if (!label) {
// label = [[UILabel alloc] init];
// }
//
// if (component == 0) { // 显示省份的名称
// // 对应列行的省份
// Province *province = self.provinces[row];
// label.text = province.name;
// label.backgroundColor = [UIColor grayColor];
// }else{
//
// // 获取选中的城市,显示城市的名称
// Province *selectedProvince = self.provinces[self.indexOfProvince];
// label.text = selectedProvince.cities[row];
// label.backgroundColor = [UIColor blueColor];
// }
//
// return label;
//}
#pragma mark - 选中行
-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
if (component == 0) { // 第一列省选中后,就要更新第二列的数据
// 更新选中省份的索引
self.indexOfProvince = row;
// 刷新数据
// 全部刷新
// [pickerView reloadAllComponents];
// 部分刷新
[pickerView reloadComponent:1];
// 不管第二列选中第几行,重新刷新数据后,都显示第二列的第一行
[pickerView selectRow:0 inComponent:1 animated:YES];
}
}
#pragma mark 设置每一列的宽度
-(CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
if (component == 0) {
return 80;
}
return 200;
}
@end