如何使用JTForm
JTForm是一个能简单快速的搭建流畅复杂表单的库，灵感来自于XLForm与Texture。JTForm能帮助你像html一样创建表单。不同于XLForm是一个UIViewController的子类，JTForm是UIView的子类，也就是说，你可以像使用UIView一样使用JTForm，应用范围更广，更方便。JTForm也可以用来创建列表，而不仅仅是表单。
JTForm使用Texture完成视图的布局与加载，所以集成了Texture的优点：异步渲染，极度流畅。使用JTForm，你可以忘记许多原生控件时需要注意的东西：高度设置，单元行复用等。为了避免ASTableNode重载时图片闪烁的问题，自定义了JTNetworkImageNode代替ASNetworkImageNode。
下面是demo运行在公司老旧设备5s的截图，可以看到fps基本保持在60左右。
fps基本保持在60
text输入表单 安装
- 使用cocoapods：
pod 'JTForm', '~> 0.0.1'
- 如果库自带的单元行满足不了需求，需要自定义单元行的时候，需要了解Texture的相关知识。
- 如果你的项目中有类似
?IQKeyboardManager的第三方，请在使用JTForm的时候禁用他们，不然会跟库的键盘弹起相冲突。如果你想禁用JTForm的键盘弹起，你可以设置JTForm的属性showInputAccessoryView为NO - 目前该库依赖于
SDWebImage(4.4.6),Texture(2.8)，使用cocoapods安装时，如果与本地的版本发生冲突，请手动添加该库，或者升级依赖库
简单的表单1 下面是构建该表单一部分的代码以及注释
// 构建表描述
JTFormDescriptor *formDescriptor = [JTFormDescriptor formDescriptor];
// 是否在必填行的title前面添加一个红色的*
formDescriptor.addAsteriskToRequiredRowsTitle = YES;
JTSectionDescriptor *section = nil;
JTRowDescriptor *row = nil;
#pragma mark - float text
// 创建节描述
section = [JTSectionDescriptor formSection];
// 为section创建header title，目前需要手动输入header view的height
section.headerAttributedString = [NSAttributedString attributedStringWithString:@"float text" font:nil color:nil firstWordColor:nil];
// 目前需要手动输入header view的height，不然是默认值，可能会出现排版显示问题
section.headerHeight = 30.;
// 将节描述添加到表描述中
[formDescriptor addFormSection:section];
// 创建行描述，rowType为必填项，创建单元行时根据rowType来选择创建不同的单元行
row = [JTRowDescriptor formRowDescriptorWithTag:JTFormRowTypeFloatText rowType:JTFormRowTypeFloatText title:@"测试"];
// 是否必填
row.required = YES;
// 将行描述添加到表描述中
[section addFormRow:row];
#pragma mark - formatterrow = [JTRowDescriptor formRowDescriptorWithTag:@"20" rowType:JTFormRowTypeNumber title:@"百分比"];
NSNumberFormatter *numberFormatter = [NSNumberFormatter new];
numberFormatter.numberStyle = NSNumberFormatterPercentStyle;
// 添加valueFormatter，是NSFormatter的子类，能将value转换成不同的文本。常用的有nsdateformatter
// 这里valueFormatter的作用是将数字转换成百分数，例如10->1000%
row.valueFormatter = numberFormatter;
row.value = https://www.it610.com/article/@(100);
row.required = YES;
// 在title前面添加图片
row.image = [UIImage imageNamed:@"jt_money"];
[section addFormRow:row];
row = [JTRowDescriptor formRowDescriptorWithTag:@"21" rowType:JTFormRowTypeNumber title:@"人民币"];
NSNumberFormatter *numberFormatter1 = [NSNumberFormatter new];
numberFormatter1.numberStyle = NSNumberFormatterCurrencyStyle;
// 这里valueFormatter的作用是将数字转换成货币，例如10->￥10
row.valueFormatter = numberFormatter1;
row.value = https://www.it610.com/article/@(100);
row.required = YES;
row.image = [UIImage imageNamed:@"jt_money"];
[section addFormRow:row];
#pragma mark - common
row = [JTRowDescriptor formRowDescriptorWithTag:JTFormRowTypeName rowType:JTFormRowTypeName title:@"JTFormRowTypeName"];
// 占位符
row.placeHolder = @"请输入姓名...";
// 赋值
row.value = https://www.it610.com/article/@"djdjd";
row.required = YES;
[section addFormRow:row];
// 创建JTForm，formDescriptor不能为空
JTForm *form = [[JTForm alloc] initWithFormDescriptor:formDescriptor];
form.frame = CGRectMake(0, 0, kJTScreenWidth, kJTScreenHeight-64.);
[self.view addSubview:form];
self.form = form;
行描述 JTRowDescriptor
行描述
JTRowDescriptor是单元行的数据源，我们通过修改行描述来控制着单元行的行为，例如：是否显示，是否可编辑，高度。下面是JTRowDescriptor的主要属性和常用方法
configMode 配置模型。
- titleColor：标题颜色
- contentColor：详情颜色
- placeHolderColor：占位符颜色
- disabledTitleColor：禁用时标题颜色
- disabledContentColor：禁用时详情颜色
- bgColor：控件背景颜色
- titleFont：标题字体
- contentFont：详情字体
- placeHlderFont：占位符字体
- disabledTitleFont：禁用时标题字体
- disabledContentFont：禁用时详情字体
JTSectionDescriptor和JTFormDescriptor同样具有这些属性，作用也类似。优先级JTRowDescriptor > JTSectionDescriptor > JTFormDescriptorimage & imageUrl 用于加载图片，样式类似于UITableViewCell的imageView。image应用于静态图片，imageUrl用于加载网络图片。
rowType 创建表单时，根据
rowType来创建不同类型的单元行。目前库自带的rowType都已经添加到了[JTForm cellClassesForRowTypes]字典中，其中rowType为key，单元行类型Class为value。在创建时单元行时，你就可以通过字典根据rowType得到相应单元行的Class。所以当你自定义单元行时，你需要在
+ (void)load中，将相应的rowType以及对应的Class添加到[JTForm cellClassesForRowTypes]字典中。tag nullable，若不为空，表单将其添加到字典中，其中key为tag，value为
JTRowDescriptor实例。所以如果创建表单时有多个行描述tag值一样的话，字典中将只会保存最后添加进去的JTRowDescriptor。你可以在表单中，根据tag值找到相对应的行描述。且在获取整个表单值的时候也会派上用场。
height 该属性控制着单元行高度。默认值为
JTFormUnspecifiedCellHeight，即不指定高度(自动调节高度)。单元行高度的优先级：
- JTRowDescriptor的height属性
- JTBaseCellDelegate的方法
+ (CGFloat)formCellHeightForRowDescriptor:(JTRowDescriptor *)row; - 自动调节高度
- (JTBaseCell *)cellInForm;
得到当前的单元行cell，然后用[cell.button addTarget:self action:action forControlEvents:UIControlEvents]添加响应事件。hidden & disabled hidden：bool值，控制隐藏或者显示当前单元行
disabled：bool值，控制当前单元行是否接受响应事件
JTSectionDescriptor和JTFormDescriptor同样具有这些属性，作用也类似。优先级JTRowDescriptor > JTSectionDescriptor > JTFormDescriptorcellConfigAfterUpdate & cellConfigWhenDisabled & cellConfigAtConfigure & cellDataDictionary
- cellConfigAfterUpdate：配置cell，在‘update’方法后使用
- cellConfigWhenDisabled：配置cell，当'update'方法后，且disabled属性为Yes时被使用
- cellConfigAtConfigure：配置cell，当cell调用config之后，update方法之前调用
- cellDataDictionary：预留，你可以选择使用时机
- valueFormatter：文本格式转换，可以将数据格式化为一种易读的格式。‘NSFormatter’是一个抽象类，我们只使用它的子类，类似'NSDateFormatter'和‘NSNumberFormatter’
- placeHolder：占位符，当value为空时显示该内容
- maxNumberOfCharacters：文本类单元行能输入最大字符数
-
- (nullable NSString *)displayContentValue;:在未编辑状态时，详情的显示内容 -
- (nullable NSString *)editTextValue;：在编辑状态时，详情的显示内容
- (void)addValidator:(nonnull id)validator;
添加一个或多个验证器，验证器的作用是对单元行的值进行验证，来判断是否符合你的要求，例如：身份证格式，密码的复杂程度，字数长度等。当然，除了库自带的验证器外，你可以自定义自己的验证器，注意需要实现代理
JTFormValidateProtocol。单元行类型
文本类
- JTFormRowTypeFloatText
- JTFormRowTypeText
- JTFormRowTypeName
- JTFormRowTypeEmail
- JTFormRowTypeNumber
- JTFormRowTypeInteger
- JTFormRowTypeDecimal
- JTFormRowTypePassword
- JTFormRowTypePhone
- JTFormRowTypeURL
- JTFormRowTypeTextView
- JTFormRowTypeInfo
JTFormRowTypeTextView和JTFormRowTypeInfo是textview，而其它几种是textfield。text select类
- JTFormRowTypePushSelect
- JTFormRowTypeMultipleSelect
- JTFormRowTypeSheetSelect
- JTFormRowTypeAlertSelect
- JTFormRowTypePickerSelect
选择项通常会拥有一个展示文本，一个是代表value的id。例如你在选择汽车型号的时候，展示给你的是不同汽车的型号的文本，当你选中之后传给后台的是代表该型号的文本。
在选择类的单元行中，我们使用的选择项类型是
JTOptionObject，主要由两个属性formDisplayText和formValue，含义顾名思义。选择项可以通过selectorOptions赋值得到，在单元行选中之后，单元行的value也是JTOptionObject类型(单选)或者为NSArray * 类型(多选)，你可以使用NSObject类目方法- (id)cellValue;
得到value。date类
- JTFormRowTypeDate
- JTFormRowTypeTime
- JTFormRowTypeDateTime
- JTFormRowTypeCountDownTimer
- JTFormRowTypeDateInline
JTFormRowTypeDateInline，其余集中的区别只是UIDatePicker中timeStyle和timeStyle的区别。JTFormRowTypeDateInline的效果如下：
文章图片
JTFormRowTypeDateInline 其它
- JTFormRowTypeSwitch
- JTFormRowTypeCheck
- JTFormRowTypeStepCounter
- JTFormRowTypeSegmentedControl
- JTFormRowTypeSlider
JTBaseCell
单元行的基类，如果你需要自定义单元行的话需要继承它。
JTBaseCell里面的属性和方法都比较简单，需要注意的是JTBaseCellDelegate，下面来我来说明一下它的几个方法：config required。初始化控件，在这个方法里只需要创建需要的控件，但不需要为控件添加内容，因为这个时候并没有添加进去数据源
JTRowDescriptor。在生命周期内该方法只会被调用一次，除非调用JTRowDescriptor的方法reloadCell，该方法会重新创建单元行。子类中实现时需要调用
[super config]update required。更新视图内容，在生命周期中会被多次调用。在这个方法中，我们可以为已经创建好的内容添加内容。
子类中实现时需要调用
[super update]其它
剩下的几个方法都是@optional
+ (CGFloat)formCellHeightForRowDescriptor:(JTRowDescriptor *)row
- (BOOL)formCellCanBecomeFirstResponder
- (BOOL)formCellBecomeFirstResponder
- (BOOL)formCellResignFirstResponder
- (void)formCellDidSelected
- (NSString *)formDescriptorHttpParameterName
JTFormDescriptor的方法httpParameters返回的表单字典中，key为该参数名称，value为JTRowDescriptor的value。- (void)formCellHighlight
- (void)formCellUnhighlight
自定义单元行
以demo中我自定义的单元行
IGCell为例。+ (void)load 首先，你需要一个rowType来代表该行。然后在
+ (void)load方法中[[JTForm cellClassesForRowTypes] setObject:self forKey:JTFormRowTypeIGCell];
将rowType与单元行关联起来。config
- (void)config
{
[super config];
// 你的代码
}
在这里你可以创建好控件，但不需要为控件添加内容。注意需要调用
[super config];
。update
- (void)update
{
[super update];
// 你的代码
}
在这个方法中，我们可以为已经创建好的内容添加内容。。注意需要调用
[super update];
layoutSpecThatFits
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize。在这个方法中，你需要创建好布局。对此，你需要额外学习Texture(原AsyncDisplayKit)的布局系统。表单行为控制
hidden 当表单完成之后，你可以通过改变
JTRowDescriptor,JTSectionDescriptor,JTFormDescriptor hidden的值来隐藏或者显示相应的单元行，单元节，表单。disabled 你可以通过改变
JTRowDescriptor,JTSectionDescriptor,JTFormDescriptor disabled的值来决定相应的单元行，单元节，表单是否可以被编辑。delete row
JTSectionDescriptor *section = [JTSectionDescriptor formSection];
section.sectionOptions = JTFormSectionOptionCanDelete;
你可以这样创建节描述，就可以让单元节具有删除单元行功能。
FAQ
如何给section自定义 header/footer 你也可以通过设置
JTSectionDescriptor的headerHieght和headerView或者footerHieght和footerView属性来自定义header/footer。目前需要手动设置高度...如何拿到表单的值 你可以通过
JTForm的- (NSDictionary *)formValues获取表单值。如果设置了验证器或者有必填项，可以先调用- (NSArray *)formValidationErrors 来获取错误集合，再获取表单值进行其它操作。如何给日期行设置最大，最小日期 【如何使用JTForm】你可以通过下面的代码这样设置，虽然丑陋，但是能用...
[row.cellConfigAtConfigure setObject:[NSDate date] forKey:@"minimumDate"];
[row.cellConfigAtConfigure setObject:[NSDate dateWithTimeIntervalSinceNow:(60*60*24*3)] forKey:@"maximumDate"];
如何改变cell的高度 单元行高度的优先级：
- JTRowDescriptor的height属性
- JTBaseCellDelegate的方法
+ (CGFloat)formCellHeightForRowDescriptor:(JTRowDescriptor *)row; - 根据布局来生成高度
JTFormRowTypeDateInline的内联行，就意味着你需要自定义两种单元行。拿JTFormRowTypeDateInline举个例子，A：JTFormDateCell，B：JTFormDateInlineCell。当你选中A时，B显示出来，再选中A，B消失。- 首先，创建两种单元行A, B
- B在
load方法中，还需要额外添加[[JTForm inlineRowTypesForRowTypes] setObject: A.rowType forKey:B.rowType] - 剩下的操作为以下代码，你可以照着写。这里简单说明以下，当你选择A时，会调用
formCellCanBecomeFirstResponder和formCellBecomeFirstResponder方法。随后调用canBecomeFirstResponder和becomeFirstResponder，注意这里必须调用super的方法，不然当前单元行无法成为第一响应者。在becomeFirstResponder中，我们创建B，并且添加到A后面。
- (BOOL)formCellCanBecomeFirstResponder
{
return [self canBecomeFirstResponder];
}- (BOOL)formCellBecomeFirstResponder
{
if ([self isFirstResponder]) {
return [self resignFirstResponder];
}
return [self becomeFirstResponder];
}- (BOOL)canBecomeFirstResponder
{
[super canBecomeFirstResponder];
return !self.rowDescriptor.disabled;
}- (BOOL)becomeFirstResponder
{
[super becomeFirstResponder];
NSIndexPath *currentIndexPath = [self.rowDescriptor.sectionDescriptor.formDescriptor indexPathForRowDescriptor:self.rowDescriptor];
JTSectionDescriptor *section = [self.rowDescriptor.sectionDescriptor.formDescriptor.formSections objectAtIndex:currentIndexPath.section];
JTRowDescriptor *inlineRow = [JTRowDescriptor formRowDescriptorWithTag:nil rowType:JTFormRowTypeInlineDatePicker title:nil];
JTFormDateInlineCell *inlineCell = (JTFormDateInlineCell *)[inlineRow cellInForm];
NSAssert([inlineCell conformsToProtocol:@protocol(JTFormInlineCellDelegate)], @"inline cell must conform to protocol 'JTFormInlineCellDelegate'");
inlineCell.connectedRowDescriptor = self.rowDescriptor;
[section addFormRow:inlineRow afterRow:self.rowDescriptor];
[self.findForm ensureRowIsVisible:inlineRow];
BOOL result = [super becomeFirstResponder];
if (result) {
[self.findForm beginEditing:self.rowDescriptor];
}
return result;
}- (BOOL)canResignFirstResponder
{
BOOL result = [super canResignFirstResponder];
return result;
}- (BOOL)resignFirstResponder
{
BOOL result = [super resignFirstResponder];
if ([self.rowDescriptor.rowType isEqualToString:JTFormRowTypeDateInline]) {
NSIndexPath *currentIndexPath = [self.rowDescriptor.sectionDescriptor.formDescriptor indexPathForRowDescriptor:self.rowDescriptor];
NSIndexPath *nextRowPath = [NSIndexPath indexPathForRow:currentIndexPath.row + 1 inSection:currentIndexPath.section];
JTRowDescriptor *inlineRow = [self.rowDescriptor.sectionDescriptor.formDescriptor formRowAtIndex:nextRowPath];
if ([inlineRow.rowType isEqualToString:JTFormRowTypeInlineDatePicker]) {
[self.rowDescriptor.sectionDescriptor removeFormRow:inlineRow];
}
}
return result;
}
推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 由浅入深理解AOP
- 如何寻找情感问答App的分析切入点
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树