iOS中表單視圖第三方控件——FXForms

iOS中表單視圖第三方控件——FXForms

1、引言

        表單視圖是移動開發中十分經常使用的一種UI方式。在iOS開發中，系統的UITableView能夠用來建立表單視圖，其界面的渲染與邏輯的處理須要開發者實現許多代理方法。FXForms是一個第三方的表單建立工具，其經過配置的方式來進行表單界面的建立，而且其中爲開發者封裝好了各類經常使用類型的表單cell。

        FXForms的github地址以下：https://github.com/nicklockwood/FXForms。

2、使用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方法要在視圖控制器中進行實現。

3、經過協議方法來進行節點配置

        上面演示的建立表格視圖的方式是在節點配置類中建立屬性，分別配置屬性的節點信息來建立每個cell，開發者也能夠不建立屬性，或者建立屬性可是不以屬性爲節點來進行cell配置，使用FXFrom協議的方法，也能夠完成節點的建立和配置，示例以下：

@interface MyForm : NSObject<FXForm>
@end
@implementation MyForm
//建立與配置節點
- (NSArray *)fields
{
    return @[
             //這裏面配置字典的方法和屬性字典的配置方法一一致
             @{FXFormFieldKey: @"email", FXFormFieldTitle: @"email"},
             @{FXFormFieldKey: @"phone", FXFormFieldTitle: @"phone"},
             @{FXFormFieldKey: @"address", FXFormFieldTitle: @"address"},
             @{FXFormFieldKey: @"name", FXFormFieldTitle: @"name"}
             ];
}

@end

效果以下：

-(NSArray *)fields方法是FXForm協議中的一個方法，在這個方法中，能夠直接進行節點的建立和配置，FXForm協議中還提供了兩個方法，意義以下：

//這個方法用於配置額外的節點，若是須要某些節點不對應任何屬性，能夠在這個方法中配置
- (NSArray *)extraFields;
//這個方法須要返回一個字符串數組，若是須要某些屬性不對應節點，即有屬性的存在，可是不生成cell，能夠將屬性名傳入返回
- (NSArray *)excludedFields;

        節點也能夠進行復合，例如能夠將一個節點配置類做爲屬性設置給另外一個節點配置類，示例以下：

//子節點信息配置類
@interface SubForm : NSObject<FXForm>
@property(nonatomic,assign)NSInteger age;
@property(nonatomic,assign)NSDate * date;
@end
@implementation SubForm
@end

//父節點信息配置類
@interface MyForm : NSObject<FXForm>
@property(nonatomic,strong)NSString * email;
@property(nonatomic,strong)NSString * passwd;
@property(nonatomic,assign)BOOL rememberMe;
//其中有屬性爲子節點
@property(nonatomic,strong)SubForm * subForm;
@end
@implementation MyForm
@end

子節點會被默認包裝在新的視圖控制器中，也能夠設置FXFormFieldInline爲@YES來使其複合進當前視圖控制器，效果以下：

              

4、關於自定義視圖控制器

        若是開發者的視圖控制器並非繼承於FXFormViewController，也可使用FXForms來快捷的建立表單視圖，開發者自定義的視圖控制器須要遵照FXFormControllerDelegate協議，示例以下:

@interface ViewController : UIViewController<FXFormControllerDelegate>
//系統的tableView
@property(nonatomic,strong)UITableView * tableView;
//FX表單控制器
@property(nonatomic,strong)FXFormController * formController;
@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStyleGrouped];
    self.formController = [[FXFormController alloc] init];
    self.formController.tableView = self.tableView;
    self.formController.delegate = self;
    self.formController.form = [[MyForm alloc] init];
    self.formController.form = [MyForm new];
    [self.view addSubview:self.tableView];
}
@end

上面的代碼極大了簡化了ViewController中的代碼量。

5、對Cell進行屬性設置

        在進行節點屬性字典的配置時，能夠經過訪問屬性路徑的方式來對cell的屬性進行一些配置，例如：

-(NSDictionary *)passwdField{
    return @{@"textLabel.textColor":[UIColor redColor]};
}

 

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592