在iOS開發(fā)中授帕，開發(fā)"表單"界面，字段稍微多一點(diǎn)的一般都用UITableView來做浮梢，而XLForm就是這樣一個框架跛十，它是創(chuàng)建動態(tài)表格視圖最牛逼的iOS庫， 用它實現(xiàn)表單功能秕硝，非常簡單芥映，省心省力。但是很可惜，搜索了很多文章都只是翻譯官方文檔奈偏，很多人在使用該庫的時候可能都被官方文檔帶走遠(yuǎn)了坞嘀，不知道如何具體使用。正好最近也要用到這個庫霎苗，所以寫個入門使用文章供大家參考姆吭。
一、 導(dǎo)入項目
使用CocoaPods或者手動導(dǎo)入庫文件唁盏，本人選擇直接導(dǎo)入項目源文件的方式内狸。
導(dǎo)入項目.png
二、改造表單ViewController
讓ViewController繼承自XLFormViewController,并重寫下面的兩個方法
@interface OneViewController : XLFormViewController
@end
@implementation OneViewController
- (instancetype)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self){
[self initializeForm];
}
return self;
}
- (id)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if (self){
[self initializeForm];
}
return self;
}
@end
三厘擂、構(gòu)造表單
- (void)initializeForm {
// 設(shè)置是否顯示Cell之間分界線
//self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
// 設(shè)置Section的高度
self.tableView.sectionHeaderHeight = 30;
XLFormDescriptor * form;//form昆淡，一個表單只有一個
XLFormSectionDescriptor * section;//section，一個表單可能有多個
XLFormRowDescriptor * row; //row刽严，每個section可能有多個row
// Form
form = [XLFormDescriptor formDescriptor];
// First section
section = [XLFormSectionDescriptor formSection];
section.title = @"用戶";
[form addFormSection:section];
// 普通文本
row = [XLFormRowDescriptor formRowDescriptorWithTag:@"username" rowType:XLFormRowDescriptorTypeText];
// 設(shè)置placeholder
[row.cellConfig setObject:@"用戶名" forKey:@"textField.placeholder"];
// 設(shè)置文本顏色
[row.cellConfig setObject:[UIColor redColor] forKey:@"textField.textColor"];
[section addFormRow:row];
// 密碼
row = [XLFormRowDescriptor formRowDescriptorWithTag:@"password" rowType:XLFormRowDescriptorTypePassword];
// 設(shè)置placeholder的顏色
NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:@"密碼" attributes:
@{NSForegroundColorAttributeName:[UIColor greenColor],
}];
[row.cellConfig setObject:attrString forKey:@"textField.attributedPlaceholder"];
[section addFormRow:row];
// Second Section
section = [XLFormSectionDescriptor formSection];
section.title = @"日期";
[form addFormSection:section];
// 日期選擇器
row = [XLFormRowDescriptor formRowDescriptorWithTag:@"birthday" rowType:XLFormRowDescriptorTypeDate title:@"出生日期"];
row.value = [NSDate dateWithTimeIntervalSinceNow:60*60*24];
[section addFormRow:row];
// Third Section
section = [XLFormSectionDescriptor formSection];
section.title = @"頭像";
[form addFormSection:section];
// 圖片選擇
row = [XLFormRowDescriptor formRowDescriptorWithTag:@"userpic" rowType:XLFormRowDescriptorTypeImage];
[section addFormRow:row];
// Fourth Section
section = [XLFormSectionDescriptor formSection];
section.title = @"選擇器";
[form addFormSection:section];
// 選擇器
row = [XLFormRowDescriptor formRowDescriptorWithTag:@"sex" rowType:XLFormRowDescriptorTypeSelectorPush];
row.noValueDisplayText = @"暫無";
row.selectorTitle = @"性別選擇";
row.selectorOptions = @[@"男",@"女",@"其他"];
row.title = @"性別";
[row.cellConfigForSelector setObject:[UIColor redColor] forKey:@"textLabel.textColor"];
[row.cellConfigForSelector setObject:[UIColor greenColor] forKey:@"detailTextLabel.textColor"];
[section addFormRow:row];
// Fifth Section
section = [XLFormSectionDescriptor formSection];
section.title = @"加固";
[form addFormSection:section];
// 開關(guān)
row = [XLFormRowDescriptor formRowDescriptorWithTag:@"enforce" rowType:XLFormRowDescriptorTypeBooleanSwitch title:@"加固"];
[section addFormRow:row];
// Sixth Section
section = [XLFormSectionDescriptor formSection];
[form addFormSection:section];
// 按鈕
row = [XLFormRowDescriptor formRowDescriptorWithTag:@"conform" rowType:XLFormRowDescriptorTypeButton];
row.title = @"確定";
[section addFormRow:row];
self.form = form;
}
-(void)didSelectFormRow:(XLFormRowDescriptor *)formRow{
// 判斷是不是點(diǎn)擊了確定按鈕
if([formRow.tag isEqualToString:@"conform"] && formRow.rowType == XLFormRowDescriptorTypeButton){
//獲取表單所有到的值
NSDictionary *values = [self formValues];
NSLog(@"%@", values);
}
[super didSelectFormRow:formRow];
}
//重寫改該方法 上面的方法就不會調(diào)用了
//-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//
// NSLog(@"%s", __func__);
//
//}
@end
四昂灵、效果圖
效果圖.png
五、總結(jié)
前面兩步是官方文檔中可以找到的舞萄，也很簡單眨补，關(guān)鍵在于initializeForm方法中具體構(gòu)造表單的過程，這里有必要強(qiáng)調(diào)幾點(diǎn)：
-
XLFormViewController實現(xiàn)了UITableViewDataSource, UITableViewDelegate倒脓，并且持有一個UITableView撑螺，這個從該類的聲明可以看出來，所以UITableView 崎弃、UITableViewDataSource, UITableViewDelegate中的方法都可以正常使用甘晤。
@interface XLFormViewController : UIViewController<UITableViewDataSource, UITableViewDelegate, XLFormDescriptorDelegate, UITextFieldDelegate, UITextViewDelegate, XLFormViewControllerDelegate>
-
XLForm將表單抽象為Form，Section饲做，Row三個層次线婚，分別對應(yīng)三個類
XLFormDescriptor * form;//form，一個表單只有一個
XLFormSectionDescriptor * section;//section盆均，一個表單可能有多個
XLFormRowDescriptor * row; //row塞弊，每個section可能有多個row
每個表單中的具體信息最后都落腳到
XLFormRowDescriptor中，通過它可以配置不同樣式的表單項泪姨，通過構(gòu)造函數(shù)的rowType指定具體的表單類型游沿，該框架提供了非常豐富的rowType，具體可以參考官方文檔說明驴娃。更細(xì)化配置表單項就需要借助于
XLFormRowDescriptor中的屬性進(jìn)行配置奏候，常用的有
@property (nonatomic, readonly, nonnull) NSMutableDictionary * cellConfig;
@property (nonatomic, readonly, nonnull) NSMutableDictionary * cellConfigForSelector;
這個配置的時候，往往有同學(xué)不知道具體如何才能設(shè)置屬性唇敞，比如怎么設(shè)置表單輸入框的placeholder?更進(jìn)一步如何設(shè)置placeholder 的顏色蔗草。其實它用到了KVC咒彤，因為它們兩個都是UITextField類中的屬性，那么直接進(jìn)入UITextField查找咒精，發(fā)現(xiàn)如下信息:
@property(nullable, nonatomic,copy) NSString *placeholder;
@property(nullable, nonatomic,copy) NSAttributedString *attributedPlaceholder NS_AVAILABLE_IOS(6_0);
那么設(shè)置起來就是
[row.cellConfig setObject:@"用戶名" forKey:@"textField.placeholder"];
[row.cellConfig setObject:attrString forKey:@"textField.attributedPlaceholder"];
注意這里的key的寫法镶柱，就是KVC的寫法。其他的屬性依此類推模叙。
- 如何獲取設(shè)置好的表單的值歇拆？其實非常簡單，該框架提供一個方法
formValues范咨，它的返回類型是一個NSDictionary故觅，其中key就是XLFormRowDescriptor設(shè)置時的Tag∏。可以直接在控制器中調(diào)用該方法獲取表單值输吏，上面的效果圖設(shè)置后的表單信息如下：
表單信息.png
