美文网首页iOS常用
iOS 快速搭建表单列表方案

iOS 快速搭建表单列表方案

作者: 9岁就很6 | 来源:发表于2018-04-05 10:26 被阅读0次

前言

写这篇文章,主要是想给大家分享在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;
}

总结

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

相关文章

  • iOS 快速搭建表单列表方案

    前言 写这篇文章,主要是想给大家分享在OC语言中快速实现表单界面,有输入框,有选择框,有默认数据等等,笔者最近做到...

  • iOS 中关于列表滚动流畅方案的一些探讨

    iOS 中关于列表滚动流畅方案的一些探讨 iOS 中关于列表滚动流畅方案的一些探讨

  • ReactNative

    React Native可伸缩列表封装与快速实现方案 React Native快速封装一个类似qq好友列表的可伸缩...

  • hexo 搭建个人博客

    利用hexo在github上快速搭建个人博客 方案选型 主流的三种博客搭建方案: 我的选择: Git+Github...

  • 样式设置的快速搭建

    前言 查看本文前可先看:UITableView、UICollectionView列表控件的快速搭建[https:/...

  • 收藏整理(持续更新)

    项目搭建 优雅快速的搭建一个IOS项目,让你的项目结构不再混乱!(纯代码) 手把手教你如何搭建iOS项目基本框架 ...

  • 表单 - Forms

    垂直排列表单 一般输入控件都用 .form-group元素包裹起来 水平排列表单 水平排列表单要给表单添加 .fo...

  • 关于H5在安卓ios平台兼容性问题,及解决方案

    ios兼容问题 1.ios 表单元素 有内部阴影 解决方案 2.ios input 调用键盘屏幕上移后,失去焦点不...

  • iOS tableview列表单/多选。

    常用的列表单多选,可以避免滑动带来的复用bug 界面基本布局代码 在swift中,需要使用class修饰词。原因:...

  • 搭建parse-server后端服务之express篇

    之前有纪录过使用docker快速搭建环境的:简单搭建Parse后端服务器但是这个只是一个快速的本地测试学习方案,如...

网友评论

    本文标题:iOS 快速搭建表单列表方案

    本文链接:https://www.haomeiwen.com/subject/pfqkiqtx.html