相信好多小伙伴都有遇到開(kāi)發(fā)多textField頁(yè)面的時(shí)候，就是一個(gè)頁(yè)面有多個(gè)textField，例如下圖這樣：
這個(gè)是輸入框比較少的，但是我在調(diào)試過(guò)程中，試過(guò)加入多個(gè)textField，也是沒(méi)問(wèn)題的。
言歸正傳，我當(dāng)初看到這個(gè)頁(yè)面是，我有想過(guò)用scrollView，然后上面再一個(gè)個(gè)布局textField，但感覺(jué)這樣比較蠢。。。所以我就用tableView，但是tableView里搞多個(gè)textField的話，問(wèn)題比較多，例如：
1.tableview滑動(dòng)，cell在復(fù)用時(shí)，導(dǎo)致textField里的舊值會(huì)被刷掉
2.在最后表單提交時(shí)，需要把每一個(gè)輸入框的值獲取提交，十分麻煩等等。。。
所以，我在考慮怎么布局時(shí)，想到，利用model去綁定數(shù)據(jù)，我顯示創(chuàng)建一個(gè)model，用來(lái)綁定數(shù)據(jù)：
typedef NS_ENUM(NSUInteger, CreateTableCellType) {
CreateTableNormalCell,
CreateTableTFCell,
CreateTableSeparatorCell,
};
@interface BZCreateTableModel : NSObject
// 名稱(chēng)
@property (nonatomic, copy)NSString *title;
@property (nonatomic, copy)NSString *placeholder;
// 表單對(duì)應(yīng)的字段
@property (nonatomic, copy)NSString *key;
//cell圖片
@property (nonatomic,copy) NSString *imageName;
// cell的類(lèi)型
@property (nonatomic, assign)CreateTableCellType cellType;
@property (nonatomic,assign) TextFieldCellSeparatorType textFieldCellSeparatorType;
@property (nonatomic,assign) BOOL textFieldShowBtn;
@end
其中key就是提交數(shù)據(jù)時(shí)的名字，例如：店鋪名稱(chēng)，提交數(shù)據(jù)時(shí)，后臺(tái)用Name來(lái)接收，所以店鋪名稱(chēng)的key就是Name。
然后，我在controller里，創(chuàng)建model:
- (void)creatData
{
BZCreateTableModel *model1 = [BZCreateTableModel new];
model1.cellType = CreateTableTFCell;
model1.title = @"店鋪名稱(chēng)";
model1.placeholder = @"必填/請(qǐng)輸入店鋪名稱(chēng)";
model1.key = @"Name";
model1.textFieldCellSeparatorType = TextFieldCellSeparatorTop;
[self.dataArray addObject:model1];
BZCreateTableModel *model2 = [BZCreateTableModel new];
model2.cellType = CreateTableTFCell;
model2.title = @"手機(jī)號(hào)碼";
model2.placeholder = @"必填/請(qǐng)輸入手機(jī)號(hào)碼";
model2.key = @"Phone";
model2.textFieldShowBtn = YES;
[self.dataArray addObject:model2];
BZCreateTableModel *model3 = [BZCreateTableModel new];
model3.cellType = CreateTableTFCell;
model3.title = @"驗(yàn) 證 碼";
model3.placeholder = @"請(qǐng)輸入手機(jī)短信驗(yàn)證碼";
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位，建議數(shù)字與字母組合";
model5.key = @"Password";
model5.textFieldCellSeparatorType = TextFieldCellSeparatorTop;
[self.dataArray addObject:model5];
BZCreateTableModel *model6 = [BZCreateTableModel new];
model6.cellType = CreateTableTFCell;
model6.title = @"推 薦 人";
model6.placeholder = @"如果沒(méi)有可以不填寫(xiě)";
model6.key = @"Referrer";
model6.textFieldCellSeparatorType = TextFieldCellSeparatorBomtom;
[self.dataArray addObject:model6];
}
這里可以看到，model已經(jīng)指定了各種屬性了，直接在返回cell的方法中就好寫(xiě)好多：
- (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;這個(gè)formDict，其實(shí)就是用來(lái)最后提交數(shù)據(jù)的一個(gè)字典。
cell.createTableModel = model;
cell.formDict = self.formDict;
就是用來(lái)刷新cell數(shù)據(jù)，并且把之前textField的舊值賦值上。
------------------------------------------------華麗的分隔線------------------------------------------------
在cell里面，(這是cell里面的方法)監(jiān)聽(tīng)textField輸入：
監(jiān)聽(tīng)輸入時(shí)，及時(shí)把textField最新的值賦值給formDict，保持formDict里面的值是最新的：
除以之外，如果你想在controller監(jiān)聽(tīng)輸入框輸入，做好把控的話也是可以的，
可以在cell里面為controller添加輸入框監(jiān)聽(tīng)：
然后再cell創(chuàng)建時(shí)，添加監(jiān)聽(tīng)就可以：
[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;
}
最后再提交數(shù)據(jù)到服務(wù)器時(shí)，直接就可以調(diào)用formDict：
#pragma mark --申請(qǐng)入駐方法
- (void)registerEnterAction
{
[BZHTTPClient postUrlString:@"PostResist/" withParam:self.formDict withSuccessBlock:^(id data) {
[self jumpToLoginVCwithIsRegister:YES];
} withMessageBlock:^(id message) {
} withFailedBlock:^(NSError *error) {
}];
}
最后這里的formDict里面就是所有數(shù)據(jù)框值的一個(gè)字典了，直接提交就OK了?。?！
大概就是這么多了，后面這種寫(xiě)法還可以擴(kuò)展成多類(lèi)型cell的，例如：一個(gè)頁(yè)面里有上傳圖片的，多選擇的，多輸入框的多類(lèi)型cell，利用model綁定數(shù)據(jù)是個(gè)很不錯(cuò)的選擇！??！
