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

阳光穿透心脏的1/2处 2022-08-19 08:40 286阅读 0赞

第一步：选择Iphone的屏幕

![Center][]

注意：在选择屏幕后如果工程在别的地方打开需要重新选择对应的屏幕 也就是与之对应的Size Class，否则的话是不会显示组件的。

第二步：建立约束，进行屏幕适配。

![Center 1][]

第三步：设置PickerView的数据源和代理对象为当前的控制器。

![Center 2][]

第四步：让PIckerView所在的控制器遵循对应的代理协议。并实现对应的数据源和代理方法。

![Center 3][]

第五步：新建或建好资源文件拖进去。

![Center 4][]

运行效果如下：

![Center 5][]

关于数据源和协议方法可以直接点进去拷贝。

在实现省市联动功能时需要注意的两点如下：

（一）设置选中省份的索引为全局变量。以便刷新第二列对应的城市时使用。

（二）在选中行的代理方法中不管第二列之前选中第几行，在刷新数据后都重新显示第一行。

具体工程如下：

建立与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

[Center]: /images/20220731/8b2b19ee5025420ea943706ae201ffca.png
[Center 1]: /images/20220731/8b137aaf0f354ced86079c339e800356.png
[Center 2]: /images/20220731/c14bccc269594a9bbde4798496b65b46.png
[Center 3]: /images/20220731/0178b8f687da46768abc97241b37235b.png
[Center 4]: /images/20220731/db65aa3519464f41b555c4ab47a289a8.png
[Center 5]: /images/20220731/e063b1a7c4814a8a85a20fc0da68ffca.png