省市区三级联动 pickerView

时间 2019-12-12

标签省市区三级联动 pickerview 繁體版

原文原文链接

效果图

概述

关于 省市区 三级联动的 pickerView，我想大多数的 iOS 开发者应该都遇到过这样的需求。在遇到这样的需求的时候，大多数人都会觉的这个很复杂，一时无从下手。其实真的没那么复杂。在这里咱们来一块儿看看，怎么去实现这样的 pickerView，并作一个简单的封装，使其使用的更加简单，从而也减小了 ViewController 中的代码。

实现思路

如何封装

咱们使用一个 View（IDAddressPickerView）来封装 PickerView，来处理 PickerView 的 dataSource 和 delegate，将本来须要在 ViewController处理的逻辑封装的 View 中。
ViewController 只须要为 IDAddressPickerView 提供 dataSource，并获取选中的 Address。而不去关心其余逻辑，不如说：联动逻辑，数据格式化。
IDAddressPickerView 使用委托模式来获取 ViewController 提供的数据源。

数据如何组织

IDAddressPickerView 的数据源是一个数组，且须要知足必定的格式，这在必定程度上下降了其使用灵活性。
目前 IDAddressPickerView 数据源的须要知足的格式如图：git

获取选中的地址

选中地址的格式，目前是经过固定的 key 包装在一个 Dictionary，灵活性不高。
在此没有使用委托等模式，而是经过一个属性保存当前选中的地址，让用户（IDAddressPickerView 的使用者）主动去获取选中的地址。

指望结果

目前实现的 IDAddressPickerView 的数据源缺少灵活性，尽管咱们能够与后台沟通约定数据格式，可是对于一个封装的 IDAddressPickerView 来讲，显然是不稳当的。
我指望实现的结果是，在为 IDAddressPickerView 提供数据源的时候，指定一个 dataFormatter，IDAddressPickerView 根据 dataFormatter 去解析数据源的数据。而不是如今的根据固定的格式解析数据。
因为这些问题的存在，我将项目代码上传到 github 上，还但愿有兴趣的小伙伴们多提宝贵意见。

具体实现

IDAddressPickerView

自定义 UIView 的子类 IDAddressPickerViewgithub
```
@interface IDAddressPickerView : UIView
@end
```

添加 UIPickerView 子控件数组

- (UIPickerView *)pickerView {
    if (_pickerView == nil) {
        _pickerView = [[UIPickerView alloc] init];
        _pickerView.dataSource = self;
        _pickerView.delegate = self;
    }
    return _pickerView;
}

UIPickerView 的数据源atom

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return 3;
}
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    NSInteger numberOfRowsInComponent = 0;
    switch (component) {
        case 0:
            numberOfRowsInComponent = self.addressArray.count;
            break;
        case 1:
        {
            NSDictionary *province = self.addressArray[self.provinceIndex];
            numberOfRowsInComponent = [province[@"cities"] count];
        }
            break;
        case 2:
        {
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *cities = province[@"cities"][self.cityIndex];
            numberOfRowsInComponent = [cities[@"areas"] count];
        }
            break;
    }
    return numberOfRowsInComponent;
}
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    NSString *titleForRow = @"";
    switch (component) {
        case 0:
            titleForRow = self.addressArray[row][@"state"];
            break;
        case 1:
        {
            NSDictionary *province = self.addressArray[self.provinceIndex];
            titleForRow = province[@"cities"][row][@"city"];
        }
            break;
        case 2:
        {
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *city = province[@"cities"][self.cityIndex];
            titleForRow = city[@"areas"][row];
        }
            break;
    }
    return titleForRow;
}

UIPickerView 的代理代理

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    switch (component) {
        case 0:
        {
            self.provinceIndex = row;
            self.cityIndex = 0;
            self.areaIndex = 0;
            [pickerView reloadComponent:1];
            [pickerView reloadComponent:2];
            [pickerView selectRow:0 inComponent:1 animated:NO];
            [pickerView selectRow:0 inComponent:2 animated:NO];
            /**
             *  更新选中的 addresss，包括：市，区
             */
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *city = province[@"cities"][self.cityIndex];
            self.selectedAddress[ProvinceKey] = self.addressArray[row][@"state"];
            if ([province[@"cities"] count] > 0) {
                self.selectedAddress[CityKey] = province[@"cities"][0][@"city"];
            } else {
                self.selectedAddress[CityKey] = @"";
            }
            if ([city[@"areas"] count] > 0) {
                self.selectedAddress[AreaKey] = city[@"areas"][0];
            } else {
                self.selectedAddress[AreaKey] = @"";
            }
        }
            break;
        case 1:
        {
            self.cityIndex = row;
            self.areaIndex = 0;
            [pickerView reloadComponent:2];
            [pickerView selectRow:0 inComponent:2 animated:NO];
            /**
             *  更新选中的 addresss，包括：区
             */
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *city = province[@"cities"][self.cityIndex];
            self.selectedAddress[CityKey] = province[@"cities"][row][@"city"];
            if ([city[@"areas"] count] > 0) {
                self.selectedAddress[AreaKey] = city[@"areas"][0];
            } else {
                self.selectedAddress[AreaKey] = @"";
            }
        }
            break;
        case 2:
        {
            self.areaIndex = row;
            /**
             *  更新选中的 addresss
             */
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *city = province[@"cities"][self.cityIndex];
            self.selectedAddress[AreaKey] = city[@"areas"][row];
        }
            break;
    }
}

关于 UIPickerView 的数据源

UIPickerView 的数据源经过 IDAddressPickerViewDataSource 协议得到code

- (NSArray *)addressArray {
    if (_addressArray == nil) {
        if ([self.dataSource respondsToSelector:@selector(addressArray)]) {
            _addressArray = [self.dataSource addressArray];
        } else {
            _addressArray = [NSArray array];
        }
    }
    return _addressArray;
}

联动效果的实现

原理
- 基本的原理是经过更新数据源的方式，来实现选中一列中的某一行时，更新后继（更深层次）的列。
具体实现
- 在此使用三个属性分别记录省市区三个层次的对应的列中选中的行，UIPickerView 经过这三个属性来获取对应的数据源。
- 选中一列中的某一行时，须要更新当前列及其后继列所对应的选中行信息。component
```
/** 选中的省份 */
@property (nonatomic, assign) NSInteger provinceIndex;
/** 选中的城市 */
@property (nonatomic, assign) NSInteger cityIndex;
/** 选中的省份 */
@property (nonatomic, assign) NSInteger areaIndex;
```

更新后继的列

来实现选中一列中的某一行时，更新全部后继列，默认选中第一行。即，选中第一列时，更新第二列和第三列；选中第二列时，更新第三列；选中第三列时。

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    switch (component) {
        case 0:
        {
            self.provinceIndex = row;
            self.cityIndex = 0;
            self.areaIndex = 0;
            [pickerView reloadComponent:1];
            [pickerView reloadComponent:2];
            [pickerView selectRow:0 inComponent:1 animated:NO];
            [pickerView selectRow:0 inComponent:2 animated:NO];
            /**
             *  更新选中的 addresss，包括：市，区
             */
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *city = province[@"cities"][self.cityIndex];
            self.selectedAddress[ProvinceKey] = self.addressArray[row][@"state"];
            if ([province[@"cities"] count] > 0) {
                self.selectedAddress[CityKey] = province[@"cities"][0][@"city"];
            } else {
                self.selectedAddress[CityKey] = @"";
            }
            if ([city[@"areas"] count] > 0) {
                self.selectedAddress[AreaKey] = city[@"areas"][0];
            } else {
                self.selectedAddress[AreaKey] = @"";
            }
        }
            break;
        case 1:
        {
            self.cityIndex = row;
            self.areaIndex = 0;
            [pickerView reloadComponent:2];
            [pickerView selectRow:0 inComponent:2 animated:NO];
            /**
             *  更新选中的 addresss，包括：区
             */
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *city = province[@"cities"][self.cityIndex];
            self.selectedAddress[CityKey] = province[@"cities"][row][@"city"];
            if ([city[@"areas"] count] > 0) {
                self.selectedAddress[AreaKey] = city[@"areas"][0];
            } else {
                self.selectedAddress[AreaKey] = @"";
            }
        }
            break;
        case 2:
        {
            self.areaIndex = row;
            /**
             *  更新选中的 addresss
             */
            NSDictionary *province = self.addressArray[self.provinceIndex];
            NSDictionary *city = province[@"cities"][self.cityIndex];
            self.selectedAddress[AreaKey] = city[@"areas"][row];
        }
            break;
    }
}

IDAddressPickerViewDataSource 协议

@protocol IDAddressPickerViewDataSource <NSObject>
/**
 *  地址信息，指定格式的数组
 */
- (NSArray *)addressArray;
@end

使用示例

设置 textField 的 inputView 为 IDAddressPickerVieworm

_textField.inputView = self.addressPickerView;
// getter
- (IDAddressPickerView *)addressPickerView {
    if (_addressPickerView == nil) {
        _addressPickerView = [[IDAddressPickerView alloc] init];
        _addressPickerView.dataSource = self;
    }
    return _addressPickerView;
}

IDAddressPickerViewDataSource 提供数据blog

#pragma mark - IDAddressPickerViewDataSource
- (NSArray *)addressArray {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"address" ofType:@"plist"];
    NSArray *addressInfo = [NSArray arrayWithContentsOfFile:path];
    return addressInfo;
}

获取选中的地址ci

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    NSLog(@"%@", self.addressPickerView.selectedAddress);
}

声明

项目代码已经上传到 gitHub，若须要请自行获取：IDAddressPickerView