带选择器的UITextField列表的实现

1. 项目介绍

本项目是对BRPickerViewDemo的改进，BRPickerViewDemo示例了BRPickerView的具体用法，实现了如下效果演示的列表功能。需要强调的是本文中所说的BRPickerViewDemo和BRPickerView是有区别的。
BRPickerView 封装的是iOS中常用的选择器组件。选择器类型主要包括：日期选择器、时间选择器、地址选择器、自定义字符串选择器。
BRPickerView项目地址：https://github.com/91renb/BRPickerView
本文提供了对其优雅的封装方式，demo地址：https://github.com/imsz5460/BRPickViewDemo-Post-packaging

2. 效果演示

查看并运行 BRPickerViewDemo.xcodeproj

效果图1.gif
效果图2.gif
框架Demo运行效果图1 框架Demo运行效果图2

3. 系统要求

  • iOS 8.0+
  • ARC

4. 我为什么对原demo进行修改

BRPickerView原作者给出的demo，即textField列表，是APP中常用的一个功能模块。可能是原作者重点不在于该列表的实现而在于选择器BRPickerView，我发现这个demo的使用方式很繁琐，开发者需要在好些个不同的方法中编写相应的代码，而且这些代码之间还需要建立对应的逻辑关系，如果某个方法有疏漏，就容易造成数据错乱。本人在使用过程中就因为疏漏导致cell复用而数据错乱，一度以为该demo是有严重bug的。这也是我对该demo进行改进的初衷。特别说明的是我并没有对BRPickerView进行修改，希望大家能够明白。这样在更新BRPickerView的时候不要有顾虑。

5. 使用

5.1. 初始化

我封装了两个模型类：SZTextFieldCellItem和SZTextFieldSelItem，分别对应普通的textField cell和带选择功能的textField cell。看代码就明白了：

- (void)setCells {
    __weak typeof (self) weakSelf = self;
    SZTextFieldCellItem *item0 = [SZTextFieldCellItem rowItemWithTitle: @"姓名" placeholder: @"请输入姓名" isNeedStar:YES editingBlock:^(BRTextField *textF, NSString *str) { 
//        weakSelf.infoModel.nameStr = str;
    }];
    
    SZTextFieldSelItem *item1 = [SZTextFieldSelItem rowItemWithTitle:@"性别" placeholder:@"请选择" tapAcitonBlock:^(BRTextField *textF, SZResultModel *resultM) {
       
        // 性别
        BRStringPickerView *stringPickerView = [[BRStringPickerView alloc]init];
        stringPickerView.pickerMode = BRStringPickerComponentSingle;
        stringPickerView.title = @"请选择性别";
        stringPickerView.dataSourceArr = @[@"男", @"女", @"其他"];
        stringPickerView.selectIndex = resultM.resultModel.index;
        
        stringPickerView.resultModelBlock = ^(BRResultModel *resultModel) {
            resultM.resultModel = resultModel;
            textF.text = self.infoModel.genderStr = resultModel.value;
        };
        [stringPickerView show];
    }];
    
    SZTextFieldSelItem *item2 = [SZTextFieldSelItem rowItemWithTitle:@"出生日期" placeholder:@"请选择" tapAcitonBlock:^(BRTextField *textF, SZResultModel *resultM) {
    
        // 出生年月日
        BRDatePickerView *datePickerView = [[BRDatePickerView alloc]init];
        datePickerView.pickerMode = BRDatePickerModeYMD;
        datePickerView.title = @"请选择年月日";
        datePickerView.selectDate = resultM.selectDate;
        datePickerView.minDate = [NSDate br_setYear:2018 month:3 day:10];
        datePickerView.maxDate = [NSDate br_setYear:2025 month:10 day:20];
        datePickerView.isAutoSelect = YES;
        //datePickerView.monthNames = @[@"一月", @"二月", @"三月", @"四月", @"五月", @"六月", @"七月", @"八月", @"九月", @"十月", @"十一月", @"十二月"];
        //datePickerView.customUnit = @{@"year": @"Y", @"month": @"M", @"day": @"D", @"hour": @"H", @"minute": @"M", @"second": @"S"};
        // 指定不可选择的日期
        //datePickerView.nonSelectableDates = @[[NSDate br_setYear:2020 month:8 day:1], [NSDate br_setYear:2020 month:9 day:10]];
        datePickerView.keyView = self.view; // 将组件 datePickerView 添加到 self.view 上，默认是添加到 keyWindow 上
        datePickerView.resultBlock = ^(NSDate *selectDate, NSString *selectValue) {
            resultM.selectDate = selectDate;
            textF.text = weakSelf.infoModel.birthdayStr = selectValue;
            NSLog(@"selectValue=%@", selectValue);
            NSLog(@"selectDate=%@", selectDate);
            NSLog(@"---------------------------------");

        };

        datePickerView.resultRangeBlock = ^(NSDate * _Nullable selectStartDate, NSDate * _Nullable selectEndDate, NSString * _Nullable selectValue) {
            NSLog(@"selectValue=%@", selectValue);
            NSLog(@"selectStartDate=%@", selectStartDate);
            NSLog(@"selectStartDate=%@", selectEndDate);
            NSLog(@"---------------------------------");
        };

        // 设置年份背景
        UILabel *yearLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 44, self.view.bounds.size.width, 216)];
        yearLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth;
        yearLabel.backgroundColor = [UIColor clearColor];
        yearLabel.textAlignment = NSTextAlignmentCenter;
        yearLabel.textColor = [[UIColor lightGrayColor] colorWithAlphaComponent:0.2f];
        yearLabel.font = [UIFont boldSystemFontOfSize:100.0f];
        NSString *yearString = resultM.selectDate ? @(resultM.selectDate.br_year).stringValue : @([NSDate date].br_year).stringValue;
        if (self.itemArray[2].str && [self.itemArray[2].str containsString:@"自定义"]) {
            yearString = @"";
        }
        yearLabel.text = yearString;
        [datePickerView.alertView addSubview:yearLabel];
        // 滚动选择器，动态更新年份
        datePickerView.changeBlock = ^(NSDate * _Nullable selectDate, NSString * _Nullable selectValue) {
            yearLabel.text = selectDate ? @(selectDate.br_year).stringValue : @"";

        };

        BRPickerStyle *customStyle = [[BRPickerStyle alloc]init];
        customStyle.pickerColor = [UIColor clearColor];
        customStyle.selectRowTextColor = [UIColor blueColor];
        datePickerView.pickerStyle = customStyle;

        [datePickerView show];
    }];
    
    SZTextFieldSelItem *item3 = [SZTextFieldSelItem rowItemWithTitle:@"出生时刻" placeholder:@"请选择" tapAcitonBlock:^(BRTextField *textF, SZResultModel *resultM) {
        // 出生时刻
        BRDatePickerView *datePickerView = [[BRDatePickerView alloc]init];
        datePickerView.pickerMode = BRDatePickerModeHMS;
        datePickerView.title = @"出生时刻";
        datePickerView.selectDate = resultM.selectDate;

        datePickerView.isAutoSelect = YES;
        datePickerView.resultBlock = ^(NSDate *selectDate, NSString *selectValue) {
            resultM.selectDate = selectDate;
            textF.text = /*weakSelf.infoModel.birthtimeStr =*/ selectValue;
        };

        // 自定义弹框样式
        BRPickerStyle *customStyle = [BRPickerStyle pickerStyleWithThemeColor:[UIColor darkGrayColor]];
        datePickerView.pickerStyle = customStyle;
        [datePickerView show];
    }];
    
    SZTextFieldCellItem *item4 = [SZTextFieldCellItem rowItemWithTitle: @"联系方式" placeholder: @"请输入联系方式" isNeedStar:YES editingBlock:^(BRTextField *textF, NSString *str) {
//        weakSelf.infoModel.nameStr = str;
    }];
    
    SZTextFieldSelItem *item5 = [SZTextFieldSelItem rowItemWithTitle:@"出生地址" placeholder:@"请选择" tapAcitonBlock:^(BRTextField *textF, SZResultModel *resultM) {
//        //         【转换】：以@" "自字符串为基准将字符串分离成数组，如：@"浙江省 杭州市 西湖区" ——》@[@"浙江省", @"杭州市", @"西湖区"]
        NSArray *dataSource = [weakSelf getAddressDataSource];  //从外部传入地区数据源
        // 地区
        BRAddressPickerView *addressPickerView = [[BRAddressPickerView alloc]init];
        addressPickerView.pickerMode = BRAddressPickerModeArea;
        addressPickerView.title = @"请选择地区";
        addressPickerView.selectIndexs = resultM.indexes;
        addressPickerView.dataSourceArr = dataSource;
        addressPickerView.isAutoSelect = YES;
        addressPickerView.resultBlock = ^(BRProvinceModel *province, BRCityModel *city, BRAreaModel *area) {
            resultM.indexes = @[@(province.index), @(city.index), @(area.index)];
            NSLog(@"省[%@]：%@，%@", @(province.index), province.code, province.name);
            NSLog(@"市[%@]：%@，%@", @(city.index), city.code, city.name);
            NSLog(@"区[%@]：%@，%@", @(area.index), area.code, area.name);
            NSLog(@"--------------------");
            textF.text = weakSelf.infoModel.addressStr = [NSString stringWithFormat:@"%@ %@ %@", province.name, city.name, area.name];
        };
        [addressPickerView show];
    }];

    SZTextFieldSelItem *item6 = [SZTextFieldSelItem rowItemWithTitle:@"学历" placeholder:@"请选择" tapAcitonBlock:^(BRTextField *textF, SZResultModel *resultM) {
        // 学历
        NSArray *dataSource = @[@"大专以下", @"大专", @"本科", @"硕士", @"博士", @"博士后"];
        BRStringPickerView *stringPickerView = [[BRStringPickerView alloc]init];
        stringPickerView.pickerMode = BRStringPickerComponentSingle;
        stringPickerView.title = @"请选择学历";
        stringPickerView.dataSourceArr = dataSource;
        stringPickerView.selectIndex = resultM.resultModel.index;
        stringPickerView.isAutoSelect = YES;
        stringPickerView.resultModelBlock = ^(BRResultModel *resultModel) {
            resultM.resultModel = resultModel;
            textF.text = /*weakSelf.infoModel.educationStr = */resultModel.value;
        };

        // 自定义弹框样式
        BRPickerStyle *customStyle = [[BRPickerStyle alloc]init];
        if (@available(iOS 13.0, *)) {
            customStyle.pickerColor = [UIColor secondarySystemBackgroundColor];
        } else {
            customStyle.pickerColor = BR_RGB_HEX(0xf2f2f7, 1.0f);
        }
        customStyle.separatorColor = [UIColor clearColor];
        stringPickerView.pickerStyle = customStyle;

        [stringPickerView show];
    }];

    SZTextFieldSelItem *item7 = [SZTextFieldSelItem rowItemWithTitle:@"其他" placeholder:@"请选择" tapAcitonBlock:^(BRTextField *textF, SZResultModel *resultM) {
        /// 多列字符串
        NSArray *dataSource = @[@[@"第1周", @"第2周", @"第3周", @"第4周", @"第5周", @"第6周", @"第7周"], @[@"第1天", @"第2天", @"第3天", @"第4天", @"第5天", @"第6天", @"第7天"]];
        BRStringPickerView *stringPickerView = [[BRStringPickerView alloc]init];
        stringPickerView.pickerMode = BRStringPickerComponentMulti;
        stringPickerView.title = @"其他";
        stringPickerView.dataSourceArr = dataSource;
        stringPickerView.selectIndexs = @[@(resultM.resultModelArr[0].index),@(resultM.resultModelArr[1].index)];
        stringPickerView.isAutoSelect = YES;
        stringPickerView.resultModelArrayBlock = ^(NSArray<BRResultModel *> *resultModelArr) {
            resultM.resultModelArr = resultModelArr;
            textF.text = /*weakSelf.infoModel.otherStr = */[NSString stringWithFormat:@"%@ %@", resultModelArr[0].value, resultModelArr[1].value];
        };

        // 使用模板样式2
        stringPickerView.pickerStyle = [BRPickerStyle pickerStyleWithDoneTextColor:[UIColor blueColor]];
        [stringPickerView show];

    }];
    self.itemArray = @[item0,item1,item2,item3,item4,item5,item6,item7];
}
说明：如果该行 是带选择器的cell，则每个item方法里调用的block就是点击textFiled所实现的方法。这样你甚至可以灵活改用其他选择器控件。关于BRPickerView选择器的详细使用方法可以参阅原作者项目说明。

5.2. 实现数据源方法

//一组当中有多少行
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return self.itemArray.count;
}

//返回每一组当中每一行的内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    BRInfoCell *cell = [BRInfoCell cellWithTable:tableView];
    cell.textField.delegate = self;
    //取出当前组的每一个行模型
    SZTextFieldCellItem *rowItem = self.itemArray[indexPath.row];
    //给Cell进行赋值.
    cell.rowItem = rowItem;
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 50;
}

后记：

如果你看过原作者提供的demo，想必已经注意到了我的使用方式要简洁方便很多，其实就是把一些逻辑封装到了内部。感谢原作者给我们提供了这么好用的选择器组件。站在巨人的肩膀上，做一个代码的搬运工，也挺好！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,492评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,048评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,927评论 0赞 358
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,293评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,309评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,024评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,638评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,546评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,073评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,188评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,321评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,998评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,678评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,186评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,303评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,663评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,330评论 2赞 358