UIPickerView组件的使用之——省市联动

第一步：选择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