省市區三級聯動 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。