前言
对于iOS复杂表单, 简单分三种思路.
-
- 使用 XLForm 等三方框架, 构造复杂表单.
-
- 使用WebView加载H5构造复杂表单.
-
- 自定义表单, 将表单分类, 单行输入, 文本输入, 单项选择, 多项选择等等. 使用工厂模式, 创建各种cell, 设计model对应表单每一行数据.
一 使用XLForm构造表单
效果图.gif
XLForm 封装了强大的表单结构, 支持常用类型, 也支持自定义类型.
基本使用方式为
0--创建 ViewController 继承于 XLFormViewController
1--设置表单Form对象 XLFormDescriptor
2--设置表单Section对象 XLFormSectionDescriptor
3--设置表单Row对象 XLFormRowDescriptor
4--将 Row对象 添加到 Section对象 中, 将 Section对象 添加到 Form对象 中
#pragma mark - 表单属性设置
-(XLFormRowDescriptor *)setupRowData:(NSDictionary *)selectorDic withXLFormSection:(XLFormSectionDescriptor *)section{
// Tag : row的标签, 用于查找区分row
// Type : row的类型, 框架提供一些, 也支持自定义
// Title : row的标题
XLFormRowDescriptor *row = [XLFormRowDescriptor formRowDescriptorWithTag:selectorDic[@"tag"] rowType:selectorDic[@"type"] title:selectorDic[@"title"]];
// 将row对象 添加到 section中
[section addFormRow:row];
// 通过 KVC 设置一些通用属性
[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 - 表单设置
- (void)initializeForm{
/** 表单(数据) */
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" : @"标题"} 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 : 设置初始值 (初始值需要是选择器数据源中的值)
row.value = [XLFormOptionsObject formOptionsObjectWithValue:@"LX2" displayText:@"类型2"];
tempRow = row;
// 数值输入
row = [self setupRowData:@{@"tag" : @"Num", @"type": XLFormRowDescriptorTypeDecimal, @"title" : @"数值"} 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.cellConfig setObject:@(UITextFieldViewModeAlways) forKey:@"textField.rightViewMode"];
[row.cellConfig setObject:[self inputUnitWithText:@" 美元"] forKey:@"textField.rightView"];
// 开关
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 表单协议, 可实现表单联动
-(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中, 需要实现三个方法
1.load （注册自定义cell）
2.configure （初始化配置 相对于init方法）
3.update （更新数据 相当于重写model的setter方法）
最终数据通过 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;
}
// 该方法可以设置行高
+(CGFloat)formDescriptorCellHeightForRowDescriptor:(XLFormRowDescriptor *)rowDescriptor {
return 70 * Scale;
}
二 WebView加载H5构造表单
XIUDeveloper的 iOS复杂表单 使用WebView加载H5 构造表单, 挺好的思路, 也提供了完整代码, 作者不再赘述.
三 自定义复杂表单
ios复杂表单怎么做 讨论中 也提供了如下思路, 具体实现就因人而异了, 作者不再赘述.
思路.png
链接
作者demo
参考链接
以上 !