前言:
对于表单制作,通常我们会使用到iOS中的控件UITableView来进行制定,最终将根据用户写入的数据进行提交会展示。如果工程中不同的业务都需要用表单,那么我们可以用统一的制定样式将表单组件话,这样业务方遵守一定的规则就可以简单的制作出一份表单。 FXForm对于像设置页面或者数据输入页面是一个很好的选择,通过配置model的字段信息,就可以很快地额建立一个表单。下面就简单介绍下它的使用方法,及一些注意事项。
步骤一:创建一个form 如下:
@interface MyForm : NSObject
@property (nonatomic, copy) NSString *email;
@property (nonatomic, copy) NSString *password;
@property (nonatomic, assign) BOOL rememberMe;
@end
FXForm会根据字段类型“NSString”、“BOOL”、字段名称,“email”、“password"自动生成所需类型cell。上面的配置字段依次生成:带有UITextField类型的cell,且输入键盘为email类型,带有UITextField类型的cell,且textfield的secureTextEntry属性自动设置为yes,带有UISwitch控件的cell.对cell上的控件进行操作,会自动将改变过后的值赋值给model的字段(当向UITextField中输入文本,email、password会自动更新)
步骤二:显示一个基本表单(方式一)
展示一个表单有两种方法可以选择,一种是:FXForms提供了一个FXFormViewController,它是UIViewcontroller的子类,你可以通过FXFormViewController建立一个表单:
FXFormViewController *controller = [[FXFormViewController alloc] init]; controller.formController.form = [[MyForm alloc] init];
FXFormViewController自动包含一个UITableView。你也可以自己创建一个tableVIew,负责给它的tableView属性。大多数情况下,你需要让自己的UIViewController继承FXFormViewController,这样你就可以添加表单的创建逻辑和操作。由于FXForm管理的控制器都是以push的形式来实现转场的,所以应当将FXFormViewController(或者它的子类)放置在UIViewController中,但这并不是强制性的,这种情况是为了处理:当一个form包含subForm时,subForm会被压入导航栈,如果没有将form放置在导航中,那么subform就不会被显示。
像UITableViewController一样,FXFormViewController会将tableView设置为控制器的主视图(main view),但这不是强制的,你也可以将tableView设置成main View的subView。 和UITableViewController一样,FXFormViewController实现了UITableViewDelegate协议,如果你的视图控制器继承了FXFormViewController,你可以改写UITableViewDelegate,和UIScrollViewDelegate方法来实现自定义行为.FXFormViewController并不是tableView的直接代理,它是formController的代理,formController是FXFormController的实例。formController才是tableView的代理和数实现,然后将tableView的代理以协议的方式回调给FXFormViewController。
注意:和UITableViewController区别的是,UITableViewDataSource完全由FxFormController来实现,不建议你来改写或者截断tableView的dataSource方法是实现
步骤三:显示一个表单 (方式二)
FXFormViewController是很灵活,但是有时强制使用一个特定基类的UIViewController时,可能不是那么方便。比如:你可能希望用一个通用的UIViewController作为整个工程的视图控制器的基类,或者在一个view中显示表单。 对于前者,你可以将FXFomrViewController作为childViewController,对于后面那种情况却不适用。用FXForm但是不关联FXFormViewController,你可以直接适用FXFormController.用FXFormController来展示表单,你只需设置它的form和tableView属性就行了,余下的formController会自动处理。你也可以选择性的绑定FXFormController的delegate到当前控制器,来处理tableview的一些事件。当用自定义的表单视图控制器,一些交互性的处理,仍然适用(比如键盘的遮挡问题),但是,你需要添加视图的一些其他逻辑,比如在UIViewController的的viewWillAppear方法中,reload tableView
下面是实例代码:
@interface MyFormViewController : UIViewController
@property (nonatomic, strong) IBOutlet UITableViewtableView; @property (nonatomic, strong) FXFormControllerformController;
@end
@implementation MyFormViewController
(void)viewDidLoad { [super viewDidLoad];
//we'll assume that tableView has already been set via a nib or the -loadView method self.formController = [[FXFormController alloc] init]; self.formController.tableView = self.tableView; self.formController.delegate = self; self.formController.form = [[MyForm alloc] init]; }
(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated];
//reload the table [self.tableView reloadData]; }
@end
*步骤四:调整表单展示 FXFomrs的最大的优点是,可以智能的猜测处理减少不必要的工作。但是有时候它不能猜测所有的工作,甚至有时候它会猜错,那我们怎么纠正它呢? 情景一:你可能不需要让所有的properies作为form field显示。你可能需要一个私有property,在form model的内部使用,或者你仅仅是为了调整form field的展示顺序。可以通过改写下列方法来实现:
(NSArray *)fields { return @[@"field1", @"field2", @"field3"]; }
返回的数组坑内包含:字符串、字典。该方法会在每次给formController的form赋值时会被调用。这就意味着你可以动态的配置表单,比如,你可以根据form的其他字段展示和隐藏一些field form。 为了调整form filed的一些展示,你可以通过两种方式进行调整:一种是在form 中添加如下方法:-(NSDictionary *)[name]Field,这里的name就是字段名。例如,如果想配置email的title:
-(NSDictionary *)emalField{ return @{FXFormFieldTitle: @"Email Address"};
} 或者你可以直接通过-fileds方法直接进行配置:
(NSArray *)fields { return @[ @{FXFormFieldKey: @"email", FXFormFieldTitle: @"Email Address"}, ...other fields... ]; }
以上两种方法本质上是一样的
情景二:如果你想配置额外的form filed(比如button、label)但是不关联form的property,你可以在-fileds 方法中进行配置。如果你想在表单末端配置一个button或者label,那么可以使用-extralFileds方法,两种方法作用一样,但是后一种“ leaves in place the default fields inferred from the form class:”
(NSArray *)extraFields { return @[ @{FXFormFieldTitle: @"Extra Field"}, ]; }
情景三:如果你不需要展示-fields中返回的form field字段,想要排除某些form field字段,那么可以使用- (NSArrayy *)excludedFields方法,将不需要展示的字段放进数组中。
(NSArray *)excludedFields { return @[ @"someProperty", @"someOtherProperty", ]; }
情景四:表单分组
对于要分组的表单,你只需要给分组的字段配置“FXFormFieldHeader”或者“FXFormFieldFooter”即可,FXFormFiedlHeader/Footer,可以是一个string,或者是一个UIView对象。
(NSArray *)fields { return @[ @{FXFormFieldKey: @"field1", FXFormFieldHeader: @"Section 1"}, @"field2", @{FXFormFieldKey: @"field3", FXFormFieldHeader: @"Section 2"}, @"field4", ]; }
总结:通过以上四个步骤就可以实现表单定制了。但这还远远不能满足我们的业务需求,比如对于没有提供的表单项样式,我们就需要自定义cell,然后注册自定义cell。那么下面我们通过简单介绍FXFomrField的properties和自定义cell的注册和使用。
static NSString *const FXFormFieldKey = @"key";
注释:form对象字段的名称,如果form对应的字段并没不是一个真正的属性(setter和getter方法的声明),这个key就是getter方法的名字,有些能够看见的field可能不会有key,比如在-fields方法中添加一个button。
static NSString *const FXFormFieldType = @"type";
注释:字段的类型,决定该字段在表单中会如何显示,一个cell,可能会对一个多种type,比如自带UITextField的cell,可能会根据不同的type来显示不同的键盘。type会根据property的声明自动匹配,当然我们也可以改写,比如NSString *email,会匹配成type为email键盘类型,我们也可以直接更改type 为label,那么cell就会显示为label类型的cell而不是自带UITextField类型的cell,线已列举的type类型可以在FXForm文件中查看,当然你也可以自定义任何一个字符串作为一个type,可以绑定自定义的cell。
static NSString *const FXFormFieldClass = @"class";
注释:字段类型,对于原始数据,它会被用来封装成OC对象(比如:数字类型的属性会转换为NSNumber类型,struct类型会转换为NSValue类型),这个转换都是自动进行的,所以很少自己进行设置,在-fields和-extraFields方法中,有时需要用它来精准指定。比如:你添加一个ViewController或者一个subform字段,有时class不能够自动指定,这是就可以通过配置class(class类或者类名)。
static NSString *const FXFormFieldCell = @"cell";
注释:用来展示field的cell,默认情况下该字段不会字段层面指定。FXFormController维护field type和cell class的映射,允许你在form层面改写默认cell和type的映射关系,而不仅仅是字段层面。如果你确实是需要指定一个一次性cell type,你可以进行改写处理。你可以给该cell提供一个class 类型对象或者代表class的name字符串
static NSString *const FXFormFieldTitle = @"title";
注释:这是字段显示的标题,FXForms会自动将驼峰样式转换为标题样式,你可以通过strings file来设置配置tile
static NSString *const FXFormFieldPlaceholder = @"placeholder";
注释:当字段的value值为空时显示的占位值,通常情况下该值为NSString类型,也可以为NSData(data 类型字段),UIImage(image 类型字段)。当用作单选或者多选是,placeHoder会以选项的第一个值作为占位值。
static NSString *const FXFormFieldDefaultValue = @"default";
注释:默认值。当字段的value为nil时,可以配置默认值。通过设置该字段,可以防止用户对value进行置空设置。默认值和占位置的区别在于,默认值是被form存储管理的,一旦设置了默认值,占位值就不会被显示。默认值只能作用于OC类型,尽管“0"是个很有意义的值(对于integer 或者float类型的字段来说),它不会被defultValue所取代。(这里的意思应该是说,OC中对于“O”的转换时无法区分该对象为nil还是该对象经转换为“0”这两种情况);
static NSString *const FXFormFieldOptions = @"options";
注释:对于任何的字段,你可以通过设置属性为NSArray类型,配置options来实现表单的选项处理,这些选项可以是NSString、NSValue等其他OC类型,你也可以提供一个FXFormFieldValueTransformer来控制实际的option value的值和需要显示在列表中的值的映射关系。相对的,你也可以通过实现- (NSString *)fieldDescription来控制自定义对象在列表中的显示。
static NSString *const FXFormFieldTemplate = @"template";
注释:该字段的了性为NSArray 或者 NSOrderSet,允许用户编辑、删除、移动编表单项、默认情况下集合类型中的表单项都是“FXFormFieldTypeText”类型的,当然你也可以改写成其他类型,template中的字段信息的配置和单个字段配置几乎一样。(实际demo中,FXFormController对表单数据源的控制是有问题的,经过移动、删除后,会经常崩溃)
static NSString *const FXFormFieldValueTransformer = @"valueTransformer";
注释:大多数情况下Form本身存储的value值和要显示给用户读取的值可能不一样,我们可以通过valueTransformer进行转换。可以通过提供block或者NSValueTransformer子类对象来处理映射,如果设置了该字段,那么-fieldDescription 方法就不会被调用了。通过设置NSValueTransformer来处理映射,该映射是可以逆向的,也就是说,可以在用户操作输入后经过转换,存储到field value中。
static NSString *const FXFormFieldAction = @"action";
注释:该字段配置是可选的。可以为方法的名字或者方法或者一个block,。当触发控件事件时就会被执行,如果action被制定为aciton,那么target可以通过响应链从cell追溯到appdelegate甚至是window中,直到找到响应。如果你的form是作为subForm,那么你也可以在parent form中对应的viewController中实现该方法。对于不可交互的字段,只有cell被选中时才会执行方法。该方法最多只能传递一个参数(通常是field cell,通过cell,你可以活着field model 和form)
static NSString *const FXFormFieldInline = @"inline";
注释:是否内联。如果字段为其他form,或者提供一个options array.通常会展示在一个viewController中,当点击cell时该viewController会被push到导航栈中。如果设置为"yes",那么这些信息都会展示在当前tableView中。
static NSString *const FXFormFieldViewController = @"controller";
注释:一些字段展示时可能是另一个view controller,当点击cell时就会push到导航栈只中,该字段制定要被push到导航栈中的viewController.
static NSString *const FXFormFieldHeader = @"header";
static NSString *const FXFormFieldFooter = @"footer";
注释:提供cell的header和footer,设置了该字段会影响dataSoure,该字段可以为字符串或者自定义view的实例
static NSString *const FXFormFieldSortable = @"sortable";
注释:字段类型为NSArray或者NSOrderSet时,设置是否可以进行排序(实际demo中进行会有bug)
字段type类型:
static NSString *const FXFormFieldTypeDefault = @"default";
默认类型,如果不指定type的话
static NSString *const FXFormFieldTypeLabel = @"label";
label类型的,自带label控件且不可交互
static NSString *const FXFormFieldTypeText = @"text";
自带UITextfield控件
static NSString *const FXFormFieldTypeLongText = @"longtext";
自带UITextView控件
static NSStringconst FXFormFieldTypeURL = @"url"; static NSStringconst FXFormFieldTypeEmail = @"email"; static NSStringconst FXFormFieldTypePassword = @"password"; static NSStringconst FXFormFieldTypeNumber = @"number"; static NSStringconst FXFormFieldTypeInteger = @"integer"; static NSStringconst FXFormFieldTypeUnsigned = @"unsigned"; static NSString *const FXFormFieldTypeFloat = @"float";
自带UITextField控件,调起键盘配置
static NSString *const FXFormFieldTypeBoolean = @"boolean";
自带UISwitch控件
static NSString *const FXFormFieldTypeOption = @"option";
右侧自带选中"check"图片
static NSStringconst FXFormFieldTypeDate = @"date"; static NSStringconst FXFormFieldTypeTime = @"time"; static NSString *const FXFormFieldTypeDateTime = @"datetime";
自带调起ImagePicker控件
static NSString *const FXFormFieldTypeImage = @"image"
自带UIImage控件
配置cell:
可以通过keyPath来进行设置,例如:
(NSDictionary *)emailField { return @{@"textLabel.color": [UIColor redColor]}; }
(NSDictionary *)nameField { return @{@"textField.autocapitalizationType": @(UITextAutocapitalizationTypeNone)}; }
自定义cell
FXForms已经提供了几种类型的cell,如果你需要添加自定义的cell来满足业务需求。或者替换掉所有的原始cell,你可以注入自定义的cell。
有两种程度的自定义:一种是直接继承FXFormCell,可以通过改写setup,update,didSelectWithTableView:controller等方法来实现自定义。setup方法会在cell创建的时候调用一次,update方法会在field value更新的时候调用。 另一种是继承自定义baseCell,那么需要采用FXFormFieldCell协议。自定义cell必须包含一个FXFormField(封装了filed的配置信息,也提供了获取和设置form value的方法,即设置field.value。)不能直接实例FXFormField,可以通过FXFormController来处理FXFormField。
可以通过以下方法自定义cell. * 可以通过FXFormFieldCell ,配置一个自定义的字段cell * 如果要关联一个type类型,可以通过formController的-registerCellClass:forFieldType:来配置 * 如果要配置指定类字段的cell,即字段是一个自定义的model类型,那么可以通过:-registerCellClass:forFieldClass:进行配置 * 如果要替换整个基类cell,那么可通过registerDefaultFieldCellClass: ,然后通过-registerCellClass:forFieldType: 进行配置。