前言
對于iOS復(fù)雜表單, 簡單分三種思路.
- 使用 XLForm 等三方框架, 構(gòu)造復(fù)雜表單.
- 使用WebView加載H5構(gòu)造復(fù)雜表單.
- 自定義表單, 將表單分類, 單行輸入, 文本輸入, 單項選擇, 多項選擇等等. 使用工廠模式, 創(chuàng)建各種cell, 設(shè)計model對應(yīng)表單每一行數(shù)據(jù).
一 使用XLForm構(gòu)造表單
效果圖.gif
XLForm 封裝了強(qiáng)大的表單結(jié)構(gòu), 支持常用類型, 也支持自定義類型.
基本使用方式為
0--創(chuàng)建 ViewController 繼承于 XLFormViewController
1--設(shè)置表單Form對象 XLFormDescriptor
2--設(shè)置表單Section對象 XLFormSectionDescriptor
3--設(shè)置表單Row對象 XLFormRowDescriptor
4--將 Row對象 添加到 Section對象 中, 將 Section對象 添加到 Form對象 中
#pragma mark - 表單屬性設(shè)置
-(XLFormRowDescriptor *)setupRowData:(NSDictionary *)selectorDic withXLFormSection:(XLFormSectionDescriptor *)section{
// Tag : row的標(biāo)簽, 用于查找區(qū)分row
// Type : row的類型, 框架提供一些, 也支持自定義
// Title : row的標(biāo)題
XLFormRowDescriptor *row = [XLFormRowDescriptor formRowDescriptorWithTag:selectorDic[@"tag"] rowType:selectorDic[@"type"] title:selectorDic[@"title"]];
// 將row對象 添加到 section中
[section addFormRow:row];
// 通過 KVC 設(shè)置一些通用屬性
[row.cellConfig setObject:[UIFont systemFontOfSize:14] forKey:@"textLabel.font"];
[row.cellConfig setObject:[UIColor blackColor] forKey:@"textLabel.textColor"];
[row.cellConfig setObject:[UIFont systemFontOfSize:14] forKey:@"detailTextLabel.font"];
[row.cellConfig setObject:[UIColor lightGrayColor] forKey:@"detailTextLabel.textColor"];
return row;
}
#pragma mark - 表單設(shè)置
- (void)initializeForm{
/** 表單(數(shù)據(jù)) */
XLFormDescriptor * form = [XLFormDescriptor formDescriptor];
// 表單Section對象
XLFormSectionDescriptor *section;
// 表單Row對象
XLFormRowDescriptor *row;
// 臨時記錄Row對象
XLFormRowDescriptor *tempRow;
/** 第一個Section */
section = [XLFormSectionDescriptor formSection];
[form addFormSection:section];
// 文字輸入
row = [self setupRowData:@{@"tag" : @"BT", @"type": XLFormRowDescriptorTypeText, @"title" : @"標(biāo)題"} withXLFormSection:section];
[row.cellConfig setObject:@(NSTextAlignmentRight) forKey:@"textField.textAlignment"];
[row.cellConfig setObject:[UIColor lightGrayColor] forKey:@"textField.textColor"];
[row.cellConfig setObject:[UIFont systemFontOfSize:14] forKey:@"textField.font"];
[row.cellConfig setObject:@"請輸入文字" forKey:@"textField.placeholder"];
// 文本輸入
row = [self setupRowData:@{@"tag" : @"WZMS", @"type": XLFormRowDescriptorTypeTextView, @"title" : @"文字描述"} withXLFormSection:section];
[row.cellConfig setObject:[UIFont systemFontOfSize:14] forKey:@"textView.font"];
[row.cellConfig setObject:[UIColor lightGrayColor] forKey:@"textView.textColor"];
// PickerView選擇
row = [self setupRowData:@{@"tag" : @"LX", @"type": XLFormRowDescriptorTypeSelectorPickerView, @"title" : @"類型"} withXLFormSection:section];
row.selectorOptions = @[[XLFormOptionsObject formOptionsObjectWithValue:@"LX1" displayText:@"類型1"],
[XLFormOptionsObject formOptionsObjectWithValue:@"LX2" displayText:@"類型2"],
];
// value : 設(shè)置初始值 (初始值需要是選擇器數(shù)據(jù)源中的值)
row.value = [XLFormOptionsObject formOptionsObjectWithValue:@"LX2" displayText:@"類型2"];
tempRow = row;
// 數(shù)值輸入
row = [self setupRowData:@{@"tag" : @"Num", @"type": XLFormRowDescriptorTypeDecimal, @"title" : @"數(shù)值"} withXLFormSection:section];
[row.cellConfig setObject:@(NSTextAlignmentRight) forKey:@"textField.textAlignment"];
[row.cellConfig setObject:[UIColor lightGrayColor] forKey:@"textField.textColor"];
[row.cellConfig setObject:[UIFont systemFontOfSize:14] forKey:@"textField.font"];
[row.cellConfig setObject:@"請輸入數(shù)值" forKey:@"textField.placeholder"];
[row.cellConfig setObject:@(UITextFieldViewModeAlways) forKey:@"textField.rightViewMode"];
[row.cellConfig setObject:[self inputUnitWithText:@" 美元"] forKey:@"textField.rightView"];
// 開關(guān)
row = [self setupRowData:@{@"tag" : @"SFXS", @"type": XLFormRowDescriptorTypeBooleanSwitch, @"title" : @"是否顯示"} withXLFormSection:section];
row.value = @1;
tempRow.hidden = [NSString stringWithFormat:@"$%@==0", @"SFXS"];
/** 第二個Section */
section = [XLFormSectionDescriptor formSection];
[form addFormSection:section];
// 自定義cell
row = [self setupRowData:@{@"tag" : @"XZ", @"type": FormRowDescriptorTypeChoose, @"title" : @"選擇"} withXLFormSection:section];
row.value = @[@{@"value" : @"XZ-1",
@"select": @"0",
@"name" : @"選項1"}.mutableCopy,
@{@"value" : @"XZ-2",
@"select": @"0",
@"name" : @"選項2"}.mutableCopy,
@{@"value" : @"XZ-3",
@"select": @"0",
@"name" : @"選項3"}.mutableCopy,
@{@"value" : @"XZ-4",
@"select": @"0",
@"name" : @"選項4"}.mutableCopy,
@{@"value" : @"XZ-5",
@"select": @"0",
@"name" : @"選項5"}.mutableCopy,
];
//PickerView 三級選擇 (自定義)
row = [self setupRowData:@{@"tag" : @"SJXZ", @"type": CFormRowDescriptorTypeThirdType, @"title" : @"三級選擇"} withXLFormSection:section];
row.selectorOptions = @[
@[[XLFormOptionsObject formOptionsObjectWithValue:@"XZ1-1" displayText:@"一級1"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ1-2" displayText:@"一級2"],
],
@[[XLFormOptionsObject formOptionsObjectWithValue:@"XZ2-1" displayText:@"二級1"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ2-2" displayText:@"二級2"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ2-3" displayText:@"二級3"],
],
@[[XLFormOptionsObject formOptionsObjectWithValue:@"XZ3-1" displayText:@"三級1"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ3-2" displayText:@"三級2"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ3-3" displayText:@"三級3"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ3-4" displayText:@"三級4"],
]
];
row.value = @[
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ1-1" displayText:@"一級1"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ2-2" displayText:@"二級2"],
[XLFormOptionsObject formOptionsObjectWithValue:@"XZ3-3" displayText:@"三級3"],
].mutableCopy;
self.form = form;
}
#pragma mark - XLFormDescriptorDelegate 表單協(xié)議, 可實現(xiàn)表單聯(lián)動
-(void)formRowDescriptorValueHasChanged:(XLFormRowDescriptor *)rowDescriptor oldValue:(id)oldValue newValue:(id)newValue{
[super formRowDescriptorValueHasChanged:rowDescriptor oldValue:oldValue newValue:newValue];
if ([rowDescriptor.tag isEqualToString:@"LX"]) {
XLFormOptionsObject *object = rowDescriptor.value;
XLFormRowDescriptor *numDateDescriptor = [self.form formRowWithTag:@"Num"];
if ([object.formDisplayText isEqualToString:@"類型1"]) {
[numDateDescriptor.cellConfig setObject:[self inputUnitWithText:@" 英鎊"] forKey:@"textField.rightView"];
}else{
[numDateDescriptor.cellConfig setObject:[self inputUnitWithText:@" 美元"] forKey:@"textField.rightView"];
}
[self updateFormRow:numDateDescriptor];
}
}
自定義Cell中, 需要實現(xiàn)三個方法
1.load （注冊自定義cell）
2.configure （初始化配置 相對于init方法）
3.update （更新數(shù)據(jù) 相當(dāng)于重寫model的setter方法）
最終數(shù)據(jù)通過 self.rowDescriptor.value 存儲
#pragma mark - 自定義cell (舉例CFormChooseCell, 其他請自看demo)
#import "CFormChooseCell.h"
#define Scale [UIScreen mainScreen].bounds.size.width/375.0f
#define Width [UIScreen mainScreen].bounds.size.width
NSString *const FormRowDescriptorTypeChoose = @"FormRowDescriptorTypeChoose";
@interface CFormChooseCell ()
@property (nonatomic, strong) NSMutableArray *btnArr;
@end
@implementation CFormChooseCell
+(void)load{
[XLFormViewController.cellClassesForRowDescriptorTypes setObject:[CFormChooseCell class] forKey:FormRowDescriptorTypeChoose];
}
-(void)configure{
[super configure];
self.selectionStyle = UITableViewCellSelectionStyleNone;
self.accessoryType = UITableViewCellAccessoryNone;
self.btnArr = [NSMutableArray array];
CGFloat gap = 15 * Scale;
CGFloat btnWidth = 50 * Scale;
CGFloat spacing = (Width - gap * 2 - btnWidth * 5) / 4 ? (Width - gap * 2 - btnWidth * 5) / 4 : 0;
for (int i = 0; i < 5; i++) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
btn.titleLabel.font = [UIFont systemFontOfSize:12];
btn.tag = 200 + i;
btn.backgroundColor = [UIColor lightGrayColor];
[btn addTarget:self action:@selector(clickBtn:) forControlEvents:UIControlEventTouchUpInside];
[self.contentView addSubview:btn];
btn.frame = CGRectMake(gap + (btnWidth + spacing) * i, 35 * Scale, btnWidth, 20 * Scale);
[self.btnArr addObject:btn];
}
}
- (void)update
{
[super update];
self.textLabel.text = self.rowDescriptor.title;
for (int i = 0; i< [self.btnArr count]; i++) {
UIButton *btn = self.btnArr[i];
if (i < [self.rowDescriptor.value count]) {
NSMutableDictionary *dic = [self.rowDescriptor.value objectAtIndex:i];
[btn setTitle:dic[@"name"] forState:UIControlStateNormal];
if ([dic[@"select"] integerValue] == 1) {
btn.selected = YES;
btn.backgroundColor = [UIColor cyanColor];
}else{
btn.selected = NO;
btn.backgroundColor = [UIColor lightGrayColor];
}
}
}
}
-(void)clickBtn:(UIButton *)btn{
btn.selected = !btn.selected;
[self handleSelectedButton:btn];
}
-(void)handleSelectedButton:(UIButton *)btn{
NSInteger selectNum = btn.tag - 200;
if (btn.selected) {
btn.backgroundColor = [UIColor cyanColor];
if (selectNum < [self.rowDescriptor.value count]) {
NSMutableDictionary *dic = [self.rowDescriptor.value objectAtIndex:selectNum];
dic[@"select"] = @"1";
}
}else{
btn.backgroundColor = [UIColor lightGrayColor];
if (selectNum < [self.rowDescriptor.value count]) {
NSMutableDictionary *dic = [self.rowDescriptor.value objectAtIndex:selectNum];
dic[@"select"] = @"0";
}
}
}
-(void)layoutSubviews{
[super layoutSubviews];
CGRect tempFrame = self.textLabel.frame;
tempFrame.origin.y = 8;
self.textLabel.frame = tempFrame;
}
// 該方法可以設(shè)置行高
+(CGFloat)formDescriptorCellHeightForRowDescriptor:(XLFormRowDescriptor *)rowDescriptor {
return 70 * Scale;
}
二 WebView加載H5構(gòu)造表單
XIUDeveloper的 iOS復(fù)雜表單 使用WebView加載H5 構(gòu)造表單, 挺好的思路, 也提供了完整代碼, 作者不再贅述.
三 自定義復(fù)雜表單
ios復(fù)雜表單怎么做 討論中 也提供了如下思路, 具體實現(xiàn)就因人而異了, 作者不再贅述.
思路.png
鏈接
以上 !
