iOS 复杂表单使用XLForm实现, 及其他方法简介

前言

对于iOS复杂表单, 简单分三种思路.

1. 使用 XLForm 等三方框架, 构造复杂表单.
1. 使用WebView加载H5构造复杂表单.
1. 自定义表单, 将表单分类, 单行输入, 文本输入, 单项选择, 多项选择等等. 使用工厂模式, 创建各种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

参考链接

以上 !

最后编辑于：2018.09.11 11:23:54

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

iOS 复杂表单 使用XLForm实现, 及其他方法简介

前言

一 使用XLForm构造表单

二 WebView加载H5构造表单

三 自定义复杂表单

链接

推荐阅读更多精彩内容

iOS 复杂表单使用XLForm实现, 及其他方法简介

一使用XLForm构造表单

三自定义复杂表单