相信好多小伙伴都有遇到开发多textField页面的时候，就是一个页面有多个textField，例如下图这样：
QQ20170324-213821.png
这个是输入框比较少的，但是我在调试过程中，试过加入多个textField，也是没问题的。
言归正传，我当初看到这个页面是，我有想过用scrollView，然后上面再一个个布局textField，但感觉这样比较蠢。。。所以我就用tableView，但是tableView里搞多个textField的话，问题比较多，例如：
1.tableview滑动，cell在复用时，导致textField里的旧值会被刷掉
2.在最后表单提交时，需要把每一个输入框的值获取提交，十分麻烦等等。。。
所以，我在考虑怎么布局时，想到，利用model去绑定数据，我显示创建一个model，用来绑定数据：
typedef NS_ENUM(NSUInteger, CreateTableCellType) {
CreateTableNormalCell,
CreateTableTFCell,
CreateTableSeparatorCell,
};
@interface BZCreateTableModel : NSObject
// 名称
@property (nonatomic, copy)NSString *title;
@property (nonatomic, copy)NSString *placeholder;
// 表单对应的字段
@property (nonatomic, copy)NSString *key;
//cell图片
@property (nonatomic,copy) NSString *imageName;
// cell的类型
@property (nonatomic, assign)CreateTableCellType cellType;
@property (nonatomic,assign) TextFieldCellSeparatorType textFieldCellSeparatorType;
@property (nonatomic,assign) BOOL textFieldShowBtn;
@end
其中key就是提交数据时的名字，例如：店铺名称，提交数据时，后台用Name来接收，所以店铺名称的key就是Name。
然后，我在controller里，创建model:
- (void)creatData
{
BZCreateTableModel *model1 = [BZCreateTableModel new];
model1.cellType = CreateTableTFCell;
model1.title = @"店铺名称";
model1.placeholder = @"必填/请输入店铺名称";
model1.key = @"Name";
model1.textFieldCellSeparatorType = TextFieldCellSeparatorTop;
[self.dataArray addObject:model1];
BZCreateTableModel *model2 = [BZCreateTableModel new];
model2.cellType = CreateTableTFCell;
model2.title = @"手机号码";
model2.placeholder = @"必填/请输入手机号码";
model2.key = @"Phone";
model2.textFieldShowBtn = YES;
[self.dataArray addObject:model2];
BZCreateTableModel *model3 = [BZCreateTableModel new];
model3.cellType = CreateTableTFCell;
model3.title = @"验 证 码";
model3.placeholder = @"请输入手机短信验证码";
model3.key = @"ValidateCode";
model3.textFieldCellSeparatorType = TextFieldCellSeparatorBomtom;
[self.dataArray addObject:model3];
BZCreateTableModel *model4 = [BZCreateTableModel new];
model4.cellType = CreateTableSeparatorCell;
[self.dataArray addObject:model4];
BZCreateTableModel *model5 = [BZCreateTableModel new];
model5.cellType = CreateTableTFCell;
model5.title = @"登录密码";
model5.placeholder = @"密码6-18位，建议数字与字母组合";
model5.key = @"Password";
model5.textFieldCellSeparatorType = TextFieldCellSeparatorTop;
[self.dataArray addObject:model5];
BZCreateTableModel *model6 = [BZCreateTableModel new];
model6.cellType = CreateTableTFCell;
model6.title = @"推 荐 人";
model6.placeholder = @"如果没有可以不填写";
model6.key = @"Referrer";
model6.textFieldCellSeparatorType = TextFieldCellSeparatorBomtom;
[self.dataArray addObject:model6];
}
这里可以看到，model已经指定了各种属性了，直接在返回cell的方法中就好写好多：
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
BZCreateTableModel *model = self.dataArray[indexPath.row];
if (model.cellType == CreateTableTFCell) {
static NSString *cellID = @"TextFieldCellID";
BZTextFieldCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (!cell) {
cell = [[BZTextFieldCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
cell.textField.delegate = self;
[cell textFieldAddObserver:self selector:@selector(textFieldValueChange:)];
}
cell.createTableModel = model;
cell.formDict = self.formDict;
return cell;
}else if (model.cellType == CreateTableSeparatorCell){
static NSString *cellID = @"SeparatorCellID";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.backgroundColor = kBackGroundColor;
}
return cell;
}
return [UITableViewCell new];
}
其中，cell.formDict = self.formDict;这个formDict，其实就是用来最后提交数据的一个字典。
cell.createTableModel = model;
cell.formDict = self.formDict;
就是用来刷新cell数据，并且把之前textField的旧值赋值上。
------------------------------------------------华丽的分隔线------------------------------------------------
在cell里面，(这是cell里面的方法)监听textField输入：
Paste_Image.png
监听输入时，及时把textField最新的值赋值给formDict，保持formDict里面的值是最新的：
Paste_Image.png
除以之外，如果你想在controller监听输入框输入，做好把控的话也是可以的，
可以在cell里面为controller添加输入框监听：
Paste_Image.png
然后再cell创建时，添加监听就可以：
[cell textFieldAddObserver:self selector:@selector(textFieldValueChange:)];
在controller里，就可以把输入框输入做好把控：
- (void)textFieldValueChange:(NSNotification *)note
{
// UITextField *textField = note.object;
// NSIndexPath *indexPath = [self.tableView indexPathForCell:(UITableViewCell *)textField.superview.superview];
// BZCreateTableModel *model = self.dataArray[indexPath.row];
NSString *Name = self.formDict[@"Name"];
NSString *ValidateCode = self.formDict[@"ValidateCode"];
NSString *Phone = self.formDict[@"Phone"];
NSString *Password = self.formDict[@"Password"];
if (Name.length > 0 && [BZFunction validateMobile:Phone] && ValidateCode.length > 0 && [BZFunction validatePassword:Password]) {
self.registerEnterBtn.enabled = YES;
self.registerEnterBtn.backgroundColor = kYellowColor;
}else{
self.registerEnterBtn.enabled = NO;
self.registerEnterBtn.backgroundColor = kDisableColor;
}
}
基本输入框的布局也差不多完毕了。。
还有在返回高度的方法：
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
BZCreateTableModel *model = self.dataArray[indexPath.row];
if (model.cellType == CreateTableTFCell) {
return 49;
}else if (model.cellType == CreateTableSeparatorCell){
return 17;
}
return 44;
}
最后再提交数据到服务器时，直接就可以调用formDict：
#pragma mark --申请入驻方法
- (void)registerEnterAction
{
[BZHTTPClient postUrlString:@"PostResist/" withParam:self.formDict withSuccessBlock:^(id data) {
[self jumpToLoginVCwithIsRegister:YES];
} withMessageBlock:^(id message) {
} withFailedBlock:^(NSError *error) {
}];
}
最后这里的formDict里面就是所有数据框值的一个字典了，直接提交就OK了！！！
大概就是这么多了，后面这种写法还可以扩展成多类型cell的，例如：一个页面里有上传图片的，多选择的，多输入框的多类型cell，利用model绑定数据是个很不错的选择！！！
网友评论