iOS中表单视图第三方控件——FXForms(一)

简介: iOS中表单视图第三方控件——FXForms

一、引言


       表单视图是移动开发中十分常用的一种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。运行效果如下:


image.png


开发者可以为节点配置类中的每一个属性提供一个约定好的方法,在方法中对此属性对应的节点进行配置,这个约定好的方法名需要与属性对应,其格式是使用属性名加上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方法要在视图控制器中进行实现。

目录
相关文章
|
iOS开发
iOS 多个滚动控件嵌套Demo
iOS 多个滚动控件嵌套Demo
69 0
|
iOS开发
iOS 常用的 上下左右 拉刷新控件
iOS 常用的 上下左右 拉刷新控件
99 0
|
iOS开发
iOS短信验证码控件,自动输入回调两次解决办法
iOS短信验证码控件,自动输入回调两次解决办法
452 0
|
iOS开发
IOS的UITableView控件简单使用
IOS的UITableView控件简单使用
154 0
|
iOS开发
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
147 0
iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
|
安全 iOS开发
iOS小技能:下拉刷新控件的适配
1. 下拉顶部背景色设置: 往tableView的父控件添加拉伸背景视图 2. present 半屏适配 iOS13 modalPresentationStyle属性默认不是全屏样式`UIModalPresentationFullScreen`,而是半屏样式,需要根据需求手动设置。 present 半屏,会导致列表下拉刷新失效。
202 0
iOS小技能:下拉刷新控件的适配
|
iOS开发
iOS小技能:自动布局实现兄弟控件N等分且宽高比例是1:N(xib 上实现)
本文为 iOS视图约束专题的第三篇:xib上使用自动布局教程
178 0
|
存储 前端开发 程序员
iOS开发:实现点击常用控件弹出地区选择框(万能方法)
在iOS开发中会遇到一些选择选项的需求,而且点击一个控件弹出一个选择框,选择之后展示到前端,然后再把选择的内容传给后台或者做本地存储。这个需求对于大多数开发者来说可以为小儿科,但是作为一个爱记录的程序猿来说相当可贵,所以还是那句话,只分享给有缘人,大牛可以飘过,不喜勿喷请走开。
435 0
iOS开发:实现点击常用控件弹出地区选择框(万能方法)
|
数据可视化 程序员 iOS开发
iOS开发:用XIB拖控件关联时报错:“Could not insert new outlet connection…”解决方法
在iOS开发过程中,尤其是iOS开发初期,会遇到各种各样的错误,有些错误是开发者的不熟悉或者疏忽大意造成的,还有些是无厘头的错误,可以通过重启Xcode或者重启电脑就可解决。
264 0
iOS开发:用XIB拖控件关联时报错:“Could not insert new outlet connection…”解决方法
|
iOS开发
iOS开发-加在透明视图上的控件会透明
iOS开发-加在透明视图上的控件会透明
137 0