一、引言
表单视图是移动开发中十分常用的一种UI方式。在iOS开发中,系统的UITableView可以用来创建表单视图,其界面的渲染与逻辑的处理需要开发者实现许多代理方法。FXForms是一个第三方的表单创建工具,其通过配置的方式来进行表单界面的创建,并且其中为开发者封装好了各种常用类型的表单cell。
FXForms的github地址如下:https://github.com/nicklockwood/FXForms。
二、使用FXForms进行表单视图的创建
FXForms框架中提供了一个FXFormViewController视图控制器类,开发者可以直接编写继承于这个类的ViewController来便捷的创建表单界面,首先,FXForms是通过节点配置的方式来进行表单的创建的,表单中每一个cell都是一个节点,这个节点可以是简单的单节点,也可以是父节点,点击父节点后,会跳转新的视图控制器,父节点中可以进行层层嵌套。对于每一个节点,开发者可以设置一个节点类型,不同的节点类型将展现不同的UI,实现不同的功能。
FXForms中的节点由FXForm协议来进行配置,创建一个简单的表单视图,示例如下:
//视图控制器类部分
@interface ViewController : FXFormViewController
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//节点信息设置
self.formController.form = [MyForm new];
}
@end
//节点类配置
@interface MyForm : NSObject<FXForm>
@property(nonatomic,strong)NSString * email;
@property(nonatomic,strong)NSString * password;
@property(nonatomic,assign)BOOL rememberMe;
@end
@implementation MyForm
@end
上面的MyForm类中只定义了一些属性,并没有进行任何方法的实现,FXForms框架中实现了这样的功能,如果开发者不进行节点信息的配置,则FXForms会自动根据节点配置类中所有的属性来推断节点的类型,如上所示,NSString类型的属性会被自动推断成带文本框的cell,BOOL类型的属性会被自动推断成带UISwitch控件的cell。运行效果如下:
开发者可以为节点配置类中的每一个属性提供一个约定好的方法,在方法中对此属性对应的节点进行配置,这个约定好的方法名需要与属性对应,其格式是使用属性名加上Field,示例如下:
@implementation MyForm
//方法名必须是 属性名+Field 返回为NSDictionary字典 字典中为节点的配置信息
-(NSDictionary *)emailField{
//配置节点的类型 点击后 将弹出时间选择控件
return @{FXFormFieldType:FXFormFieldTypeDate};
}
-(NSDictionary *)passwdField{
//设置节点名称
return @{FXFormFieldTitle:@"名称"};
}
-(NSDictionary *)rememberMeField{
//设置节点头视图名称
return @{FXFormFieldHeader:@"配置"};
}
@end
运行工程,效果如下图所示:
返回的配置字典中可以用来配置的属性定义如下:
//配置此节点的标识符
UIKIT_EXTERN NSString *const FXFormFieldKey;
//配置此节点的类型
UIKIT_EXTERN NSString *const FXFormFieldType;
//指定当前节点属性对应的类 一般不需设置
UIKIT_EXTERN NSString *const FXFormFieldClass;
//设置当前节点对应的cell类
UIKIT_EXTERN NSString *const FXFormFieldCell;
//设置当前节点显示的名称
UIKIT_EXTERN NSString *const FXFormFieldTitle;
//设置当前节点的placeHolder
UIKIT_EXTERN NSString *const FXFormFieldPlaceholder;
//设置节点上默认显示的文字
UIKIT_EXTERN NSString *const FXFormFieldDefaultValue;
//设置选项数组 这个属性的设置 必须配合特定配型的cell使用
UIKIT_EXTERN NSString *const FXFormFieldOptions;
//如果某个节点是一个数组 则FXFormFieldTemplate可以用来设置数组中节点的属性
UIKIT_EXTERN NSString *const FXFormFieldTemplate;
//进行类型转换
UIKIT_EXTERN NSString *const FXFormFieldValueTransformer;
//设置节点的触发方法
UIKIT_EXTERN NSString *const FXFormFieldAction;
//连接StoryboardSegue
UIKIT_EXTERN NSString *const FXFormFieldSegue;
//设置节点头部内容
UIKIT_EXTERN NSString *const FXFormFieldHeader;
//设置节点尾部内容
UIKIT_EXTERN NSString *const FXFormFieldFooter;
//设置是否是内嵌节点 对于父节点或者数组类界定 这个如果设置为@YES 则会在当前界面中展示表单 如果设置为@NO,则会在新的视图控制器中展示
UIKIT_EXTERN NSString *const FXFormFieldInline;
//对于数组类型的节点,设置是否支持排序 设置为@YES则为支持排序
UIKIT_EXTERN NSString *const FXFormFieldSortable;
//设置选中cell后跳转的ViewController
UIKIT_EXTERN NSString *const FXFormFieldViewController;
关于设置节点的类型,FXFormFieldType可以设置的值有如下几种:
//默认的节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeDefault;
//文本标签节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeLabel;
//输入框节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeText;
//长文本输入节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeLongText;
//URL节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeURL;
//Email节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeEmail;
//号码节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypePhone;
//密码框节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypePassword;
//数字节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeNumber;
//只允许输入整数的节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeInteger;
//无符号整数节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeUnsigned;
//浮点节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeFloat;
//BOOL节点类型 默认带UISwitch控件
UIKIT_EXTERN NSString *const FXFormFieldTypeBoolean;
//选项节点类型 默认带对号符号
UIKIT_EXTERN NSString *const FXFormFieldTypeOption;
//日期节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeDate;
//时间节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeTime;
//日期时间节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeDateTime;
//图片节点类型
UIKIT_EXTERN NSString *const FXFormFieldTypeImage;
FXForms中也提供了许多封装好的cell,列举如下:
//默认的cell
@interface FXFormDefaultCell : FXFormBaseCell
@end
//带文本输入框的cell
@interface FXFormTextFieldCell : FXFormBaseCell
@property (nonatomic, readonly) UITextField *textField;
@end
//带文本输入视图的cell
@interface FXFormTextViewCell : FXFormBaseCell
@property (nonatomic, readonly) UITextView *textView;
@end
//带UISwitch控件的cell
@interface FXFormSwitchCell : FXFormBaseCell
@property (nonatomic, readonly) UISwitch *switchControl;
@end
//带UIStepper控件的cell
@interface FXFormStepperCell : FXFormBaseCell
@property (nonatomic, readonly) UIStepper *stepper;
@end
//带UISlider控件的cell
@interface FXFormSliderCell : FXFormBaseCell
@property (nonatomic, readonly) UISlider *slider;
@end
//带日期选择控件的cell
@interface FXFormDatePickerCell : FXFormBaseCell
@property (nonatomic, readonly) UIDatePicker *datePicker;
@end
//带图片选择控件的cell
@interface FXFormImagePickerCell : FXFormBaseCell
@property (nonatomic, readonly) UIImageView *imagePickerView;
@property (nonatomic, readonly) UIImagePickerController *imagePickerController;
@end
//带自定义PickerView的cell
@interface FXFormOptionPickerCell : FXFormBaseCell
@property (nonatomic, readonly) UIPickerView *pickerView;
@end
//带UISegmentedControl控件的cell
@interface FXFormOptionSegmentsCell : FXFormBaseCell
@property (nonatomic, readonly) UISegmentedControl *segmentedControl;
@end
还有一点需要注意,如果是继承与FXFormViewController的视图控制器,其节点设置的action方法要在视图控制器中进行实现。