iOS 快速搭建表单列表方案

前言

写这篇文章,主要是想给大家分享在OC语言中快速实现表单界面,有输入框,有选择框,有默认数据等等,笔者最近做到一个项目,界面几乎都是这类型,纠结了许多种方法,最终选择使用model配合json字典来实现,如图,

多种样式的加载

看到这界面,你们有什么好的想法也可以在评论区说说比较快速的实现方案,好了,我直接说我的方法

1.构建Json 数据

需要什么,搭建什么,因为图中具备左边固定的文本lable,右边有输入框或者箭头或者带请输入的文本lable是吧,所以我们需要一个类型,来加载不一样的Cell,说到这边Cell,笔者这边使用Xib画了一个cell,点h文件如下

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

//表单通用Cell
@interface ATTableCurrencyCell : UITableViewCell
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *rightCons;
@property (weak, nonatomic) IBOutlet UILabel *leftLable;
@property (weak, nonatomic) IBOutlet UIImageView *arrowImage;
@property (weak, nonatomic) IBOutlet UILabel *rightLable;
@property (weak, nonatomic) IBOutlet UITextField *textField;
- (void)setupCellSubView:(int)Type;
@end

NS_ASSUME_NONNULL_END

Cell点m,传入类型,做显示隐藏 以及间距


xib

#import "ATTableCurrencyCell.h"

@implementation ATTableCurrencyCell


-(void)setupCellSubView:(int)Type{
     _leftLable.textColor = k_MainViceTextColor;

    switch (Type) {
        case 1:
            _rightLable.hidden = _leftLable.hidden =  NO;
            _textField.hidden = YES;
            _arrowImage.hidden = YES;
            _rightCons.constant = 0;
            break;
            
        case 2:
            _rightCons.constant = 14;
            _rightLable.hidden = _leftLable.hidden = _arrowImage.hidden =NO;;
            _textField.hidden = YES;
            break;
            
        case 3:
            _rightLable.hidden = _arrowImage.hidden = _rightLable.hidden = YES;
            _textField.hidden = NO;
            break;
            
        default:
            break;
    }
}

@end

好了,以上是Cell的自定义,我们接着说构建json模块:
sectionTitle,对应的section标题(判断section的时候可以用这个字段,做其他判断);
items,对应的indexPatch.row的每一行cell数据(包含左侧标题,以及默认显示文字,以及存储输入或者选择的值property属性,以及type类型,cell加载就是根据这个type来加载的~)
直接上代码吧~

#pragma mark -
#pragma mark - 构建Json

     _localDatas = @[
                        @{
                            @"sectionTitle" : @"",
                            @"items" : @[
                                    @{
                                        @"title" : @"学历",
                                        @"details" : @"请选择",
                                        @"type" : @2,
                                        @"property" : @"education",
                                        },
                                    @{
                                        @"title" : @"擅长技能",
                                        @"details" : @"请选择",
                                        @"type" : @2,
                                        @"property" : @"goodAtskills",
                                        },
                                    @{
                                        @"title" : @"技能证书",
                                        @"details" : @"请选择",
                                        @"type" : @2,
                                        @"property" : @"skill"
                                        },
                                    @{
                                        @"title" : @"工作所在地",
                                        @"details" : @"请选择",
                                        @"type" : @2,
                                        @"property" : @"guideNum"
                                        },
                                    @{
                                        @"title" : @"期望工作城市",
                                        @"details" : @"请选择",
                                        @"type" : @2,
                                        @"property" : @"native",
                                        },
                                    ]
                            },
                        @{
                            @"sectionTitle" : @"",
                            @"items" : @[
                                    @{
                                        @"title" : @"联系电话",
                                        @"details" : @"请输入联系电话",
                                        @"type" : @3,
                                        @"property" : @"phone",
                                        @"maxLenth":@12,  //字数限制
                                        },
                                    @{
                                        @"title" : @"当前薪资",
                                        @"details" : @"请输入当前报酬",
                                        @"type" : @3,
                                        @"property" : @"currentSalary",
                                        @"maxLenth":@12,  //字数限制
                                        },
                                    @{
                                        @"title" : @"期望薪资",
                                        @"details" : @"请输入当前报酬",
                                        @"type" : @3,
                                        @"property" : @"salaryExpectation",
                                        @"maxLenth":@12,  //字数限制
                                        },
                                    @{
                                        @"title" : @"当前岗位",
                                        @"details" : @"请输入当前岗位",
                                        @"type" : @3,
                                        @"property" : @"currentPosition",
                                        @"maxLenth":@12,  //字数限制
                                        },
                                    @{
                                        @"title" : @"期望行业",
                                        @"details" : @"请输入期望行业",
                                        @"type" : @3,
                                        @"property" : @"desiredIndustry",
                                        @"maxLenth":@12,  //字数限制
                                        },
                                    @{
                                        @"title" : @"期望岗位",
                                        @"details" : @"请输入期望岗位",
                                        @"type" : @3,
                                        @"property" : @"desiredPosition",
                                        @"maxLenth":@12,  //字数限制
                                        
                                        },
                                    @{
                                        @"title" : @"工作年限",
                                        @"details" : @"请输入工作年限",
                                        @"type" : @3,
                                        @"property" : @"workingLive",
                                        @"textFiledText":@"",
                                        },
                                    ]
                            },
                        @{
                            @"sectionTitle" : @"工作经历",
                            @"items" : @[
                                    @{
                                        @"title" : @"",
                                        @"details" : @"请输入你的工作经历,如2018年3月-2019年3月在博尔克公司担任经纪人职位",
                                        @"type" : @4,
                                        @"property" : @"workExperience"
                                        }
                                    ]
                            },
                        @{
                            @"sectionTitle" : @"教育经历",
                            @"items" : @[
                                    @{
                                        @"title" : @"",
                                        @"details" : @"请输入你的教育经历,如2018年3月-2019年3月厦门大学就读",
                                        @"type" : @4,
                                        @"property" : @"educationExperience"
                                        }
                                    ]
                            },
                        @{
                            @"sectionTitle" : @"项目经历",
                            @"items" : @[
                                    @{
                                        @"title" : @"",
                                        @"details" : @"请输入你的项目经历,如2018年3月-2019年3月在博尔克公司负责开发",
                                        @"type" : @4,
                                        @"property" : @"projectExperience"
                                        }
                                    ]
                            },
                        
                        ];
        _enterprenModel = [ATEntrepreneurData new];
    }

2.使用

//返回多少个区
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
    return [_localDatas count];
}
//返回一个区多少行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSArray *items = _localDatas[section][@"items"];
    return items.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    NSArray *items = _localDatas[indexPath.section][@"items"];
    NSDictionary *dataDict = items[indexPath.row];
    int  type = [dataDict[@"type"] intValue];
    NSString *title = dataDict[@"title"];
    NSString *details = dataDict[@"details"];
    NSString *property = dataDict[@"property"];
    
    if (type == 4) {
    //只有一个输入框的cell
        ATTableInputBoxCell *cell = [tableView dequeueReusableCellWithIdentifier:cellName];
        cell.textView.wzb_placeholder = details;
        cell.textView.delegate = self;
        cell.textView.text = [_enterprenModel valueForKey:property];
        return cell;
    }else{
     //其他根据type来做处理的cell
        ATTableCurrencyCell *cell = [tableView dequeueReusableCellWithIdentifier:k_GeneralCell];
        cell.selectionStyle = UITableViewCellSelectionStyleNone;
        [cell setupCellSubView:type];
        cell.leftLable.text = title; //标题
        cell.rightLable.text = details; //默认右边文本(请选择)
        cell.textField.placeholder = details; //输入框占位文字
        [cell.textField addTarget:self action:@selector(actionEditChanged:) forControlEvents:UIControlEventEditingChanged];//输入框监听
        
     //取出model的属性,存在值即赋值,不存在即取默认文本details
        NSString *prper =  [_enterprenModel valueForKey:property];
        if (type == 3) {
            cell.textField.text  =  [_enterprenModel valueForKey:property];
        }else{
            cell.rightLable.text = prper.length > 0 ? prper : details;
            cell.rightLable.textColor = [cell.rightLable.text isEqualToString:@"请选择"] ? k_MainViceTextColor :k_MainTitleColor;
        }
        return cell;
    }
}
//根据sectionTitle 字段返回是否需要标题
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    UIView *headView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 47)];
    headView.backgroundColor = k_VcBgColor;
    NSString *title = _localDatas[section][@"sectionTitle"];
    if (!kStringIsEmpty(title)) {
        UILabel *headLable = [SWKit labelWithText:title fontSize:k_48 textColor:k_MainTitleColor textAlignment:0 frame:CGRectMake(14, 0, 100, 20)];
        [headView addSubview:headLable];
        headLable.centerY = headView.centerY;
    }
 
    if (section == 0) {
        return nil ;
    }
    return !kStringIsEmpty(title) ? headView :[UIView new];
}
//根据sectionTitle 字段返回区头高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
    if (section == 0) {
        return 0.01 ;
    }
    NSString *title = _localDatas[section][@"sectionTitle"];
    return !kStringIsEmpty(title) ? 47.f : 12.f;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    return 0.01;
}
//根据type 字段返回cell的高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSArray *items = _localDatas[indexPath.section][@"items"];
    NSDictionary *dataDict = items[indexPath.row];
    int  type = [dataDict[@"type"] intValue];
    if (type == 4) {
        return 80;
    }else{
        return kTableViewCellNomolHeigh;
    }
}

存储model值

    1. 输入框([_enterprenModel setValue:textStr forKey:property];方法即可)
    1. 回调直接设置 _enterprenModel.property = @"值" ;
- (void)actionEditChanged:(UITextField *)textField
{
    UITableViewCell *cell = (UITableViewCell *)textField.superview.superview;
    NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];
    NSArray *items = _localDatas[indexPath.section][@"items"];
    NSDictionary *dataDict = items[indexPath.row];
    NSString *property = dataDict[@"property"];
    NSString *title = dataDict[@"title"];
    NSNumber *maxNum = dataDict[@"maxLenth"];
    if (maxNum && textStr.length > maxNum.integerValue) {
   //使用json里面的maxLenth 字段来判断最大输入,截取
        textStr = [textStr substringToIndex:maxNum.integerValue];
        textField.text = textStr;
        [SVProgressHUD showErrorWithStatus:[NSString stringWithFormat:@"%@最多只能输入%ld个字符哦",title,maxNum.integerValue]];
    }
//储存propert
    [_enterprenModel setValue:textStr forKey:property];
}

3 配合YYKit 的modelToJSONObject 把属性传递给后端

#pragma mark -
#pragma mark - 提交信息
- (void)compAction{
    
    NSDictionary  *parmks = [_enterprenModel modelToJSONObject];
    SWLog(@"===%@",parmks);
     if (![_enterprenModel isEntrepreneurValid]) {
         return;
     }
}




//model 的对象方法,拿来判断属性是否都完成
- (BOOL)isEntrepreneurValid{
    if ([_education length] == 0 ||
        [_skill length] == 0||
        [_individual length] == 0||
        [_ndividualLicense length] == 0||
        [_currentRemuneration length] == 0 ||
        [_expectedReward length] == 0||
        [_wordLocation length] == 0||
        [_expectedWorkCity length] == 0||
        [_workingLive length] == 0 ||
        [_phone length] == 0||
        [_workExperience length] == 0||
        [_educationExperience length]==0||
        [_projectExperience length] == 0){
        [SVProgressHUD showErrorWithStatus:@"请先完善信息"];
        return NO;
    }
        //其他判断
        return YES;
}

总结

不知道这种方案是否满足你的需求,如果觉得文章对你有帮助,给点支持!谢谢,如有更好的方案,请留言~✨

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

推荐阅读更多精彩内容