iOS XLForm速用教程

一 簡(jiǎn)述

XLForm 是最靈活且最強(qiáng)大的創(chuàng)建動(dòng)態(tài)表單的iOS庫撤缴。以下是這個(gè)庫一個(gè)簡(jiǎn)單的結(jié)構(gòu)圖:


最主要的是紅色方框的三個(gè)類:

XLFormRowDescriptor娃循,XLFormSectionDescriptor方援,XLFormDescriptor庄撮。
1.XLFormDescriptor結(jié)構(gòu)和UITablView一樣,有Section师倔,有Row悔叽,它就是為成為UITableView的數(shù)據(jù)源而設(shè)計(jì)的莱衩。
2.XLFormRowDescriptor定義了每行表單的數(shù)據(jù)內(nèi)容,包括行樣式娇澎,標(biāo)題笨蚁,行類型,選擇項(xiàng)內(nèi)容趟庄,標(biāo)簽括细,合法性驗(yàn)證等。
3.XLFormSectionDescriptor是由XLFormRowDescriptor組合而成的戚啥,而XLFormSectionDescriptor最終又組成了XLFormDescriptor奋单。

二 用法

1.創(chuàng)建繼承于XLFormViewController的ViewController。
2.創(chuàng)建表格:

XLFormDescriptor * form;//建立表單猫十,等同于創(chuàng)建uitableview
XLFormSectionDescriptor * section;//建立組  section
XLFormRowDescriptor * row;//建立行相當(dāng)于cell
//先將組添加到表單
//設(shè)置標(biāo)題
form = [XLFormDescriptor formDescriptorWithTitle:@"Add Event"];
section = [XLFormSectionDescriptor formSection];
[form addFormSection:section];
// 添加一個(gè)cell
 row = [XLFormRowDescriptor formRowDescriptorWithTag:@"Title" rowType:XLFormRowDescriptorTypeText];
//設(shè)置placeholder
[row.cellConfigAtConfigure setObject:@"Title" forKey:@"textField.placeholder"];
row.required = YES;
[section addFormRow:row];

3.最后一步:
self.form = form; // 把form對(duì)象賦值給父類的form览濒。不然不顯示表單呆盖。
運(yùn)行工程,簡(jiǎn)單三步一個(gè)簡(jiǎn)單的表單已然出現(xiàn)贷笛。并且XLForm已經(jīng)將你的鍵盤管理的妥妥當(dāng)當(dāng)?shù)挠τ帧T僖膊粨?dān)心遮擋輸入框了??。

三 自定義Cell

   // 內(nèi)部直接賦值  
NSString * const XLFormRowDescriporTypeFloat = @"XLFormRowDescriporTypeFloat";  
  
@interface MKJFloatTextFieldCell () <UITextFieldDelegate>  
  
@end  
  
@implementation MKJFloatTextFieldCell  
  
// 在主表單中注冊(cè)對(duì)應(yīng)的cell以及對(duì)應(yīng)的ID  
+(void)load  
{  
    [XLFormViewController.cellClassesForRowDescriptorTypes setObject:NSStringFromClass([MKJFloatTextFieldCell class]) forKey:XLFormRowDescriporTypeFloat];  
}  
  
// 這個(gè)方法是用來設(shè)置屬性的 必須重寫  類似于初始化的屬性不變的屬性進(jìn)行預(yù)先配置  
- (void)configure  
{  
    [super configure];  
      
    self.selectionStyle = UITableViewCellSelectionStyleNone;  
    self.leftLabel.layer.borderColor = [UIColor yellowColor].CGColor;  
    self.leftLabel.layer.borderWidth = 1.0f;  
    self.textField.delegate = self;  
    self.textField.font = [UIFont boldSystemFontOfSize:16];  
    self.textField.floatingLabel.font = [UIFont boldSystemFontOfSize:11];  
    self.textField.clearButtonMode = UITextFieldViewModeWhileEditing;  
    self.textField.floatingLabelTextColor = [UIColor lightGrayColor];  
    self.textField.floatingLabelActiveTextColor = [UIColor redColor];  
      
}  
// 這個(gè)方法是用來進(jìn)行更新的乏苦,外面給唯一的字段Value設(shè)定值就好了 通過self.rowDescriptor.value的值變化來進(jìn)行更新  
- (void)update  
{  
    [super update];  
    NSDictionary *value = self.rowDescriptor.value;  
    self.leftLabel.text = [value objectForKey:@"left"];  
    self.textField.text = [value objectForKey:@"right"];  
    self.textField.attributedPlaceholder =  
    [[NSAttributedString alloc] initWithString:self.rowDescriptor.title  
                                    attributes:@{NSForegroundColorAttributeName: [UIColor lightGrayColor]}];  
    self.textField.floatingLabel.text = @"快點(diǎn)輸入面積大小";  
}  
有些特定事件丁频,需要在VC里面進(jìn)行判斷更新或者移除或者增加
     // 每個(gè)cell內(nèi)部的參數(shù)屬性更改了就會(huì)調(diào)用這個(gè)方法,我們?cè)俅胃碌脑捑蜁?huì)調(diào)用cell里面update的方法進(jìn)行重繪  
- (void)formRowDescriptorValueHasChanged:(XLFormRowDescriptor *)formRow oldValue:(id)oldValue newValue:(id)newValue  
{  
    // 咱們這里統(tǒng)一調(diào)用更新  
    [super formRowDescriptorValueHasChanged:formRow oldValue:oldValue newValue:newValue];  
    [self updateFormRow:formRow];  
      
      
    // 以下就是一些典型的tag判斷邑贴,根據(jù)不同的cell,remove 或 update進(jìn)行更改  
//    if ([rowDescriptor.tag isEqualToString:@"first"]){  
//  
//    }  
//    else if ([rowDescriptor.tag isEqualToString:@"second"]){  
//  
//        [self updateFormRow:startDateDescriptor];  
//        [self updateFormRow:endDateDescriptor];  
//    }  
//    else if ([rowDescriptor.tag isEqualToString:@"third"]){  
//          
//            [self updateFormRow:endDateDescriptor];  
//          
//    }  
//    else if ([rowDescriptor.tag isEqualToString:@"這里填寫的就是我們注冊(cè)的ID"]){  
//          
//    }  
      
}  
表單填完了叔磷,無論自定義還是自帶的拢驾,都要搜集填寫的數(shù)據(jù)

1.驗(yàn)證數(shù)據(jù)合法性:[self formValidationErrors];
2.獲取所有數(shù)據(jù):[self formValues];

最后給大家一個(gè)cell樣式的總匯

    #import "XLForm.h"  
// JVFloatLabeledTextField 普通的文本輸入框,自帶浮動(dòng)動(dòng)畫  
NSString *const XLFormRowDescriptorTypeText = @"text";  
// add的時(shí)候展示名字的 JVFloatLabeledTextField  
NSString *const XLFormRowDescriptorTypeName = @"name";  
// 填寫URL的cell  
NSString *const XLFormRowDescriptorTypeURL = @"url";  
NSString *const XLFormRowDescriptorTypeEmail = @"email";  
NSString *const XLFormRowDescriptorTypePassword = @"password";  
NSString *const XLFormRowDescriptorTypeNumber = @"number";  
NSString *const XLFormRowDescriptorTypePhone = @"phone";  
NSString *const XLFormRowDescriptorTypeTwitter = @"twitter";  
NSString *const XLFormRowDescriptorTypeAccount = @"account";  
NSString *const XLFormRowDescriptorTypeInteger = @"integer";  
// 選擇更換頭像圖片的cell  
NSString *const XLFormRowDescriptorTypeImage = @"image";  
NSString *const XLFormRowDescriptorTypeDecimal = @"decimal";  
// JVFloat對(duì)應(yīng)的textView的cell  
NSString *const XLFormRowDescriptorTypeTextView = @"textView";  
NSString *const XLFormRowDescriptorTypeZipCode = @"zipCode";  
// 非常普通的點(diǎn)擊push選擇  
NSString *const XLFormRowDescriptorTypeSelectorPush = @"selectorPush";  
NSString *const XLFormRowDescriptorTypeSelectorPopover = @"selectorPopover";  
NSString *const XLFormRowDescriptorTypeSelectorActionSheet = @"selectorActionSheet";  
NSString *const XLFormRowDescriptorTypeSelectorAlertView = @"selectorAlertView";  
NSString *const XLFormRowDescriptorTypeSelectorPickerView = @"selectorPickerView";  
NSString *const XLFormRowDescriptorTypeSelectorPickerViewInline = @"selectorPickerViewInline";  
NSString *const XLFormRowDescriptorTypeMultipleSelector = @"multipleSelector";  
NSString *const XLFormRowDescriptorTypeMultipleSelectorPopover = @"multipleSelectorPopover";  
NSString *const XLFormRowDescriptorTypeSelectorLeftRight = @"selectorLeftRight";  
// 三段選擇  
NSString *const XLFormRowDescriptorTypeSelectorSegmentedControl = @"selectorSegmentedControl";  
// date 月 日 年  (內(nèi)嵌)  
NSString *const XLFormRowDescriptorTypeDateInline = @"dateInline";  
// 日期picker選擇器內(nèi)嵌 dateTime更詳細(xì)  星期 月 日 小時(shí)  分(內(nèi)嵌)  
NSString *const XLFormRowDescriptorTypeDateTimeInline = @"datetimeInline";  
// date 小時(shí) 分 AM/PM(內(nèi)嵌)  
NSString *const XLFormRowDescriptorTypeTimeInline = @"timeInline";  
// 計(jì)時(shí)器改基,選擇hh mm(內(nèi)嵌)  
NSString *const XLFormRowDescriptorTypeCountDownTimerInline = @"countDownTimerInline";  
// 月 日 年 sheet  
NSString *const XLFormRowDescriptorTypeDate = @"date";  
// 最詳細(xì)的dateTime sheet  
NSString *const XLFormRowDescriptorTypeDateTime = @"datetime";  
// 小時(shí) 分 AM/PM  sheet  
NSString *const XLFormRowDescriptorTypeTime = @"time";  
// 計(jì)時(shí)器  底部彈出來的  
NSString *const XLFormRowDescriptorTypeCountDownTimer = @"countDownTimer";  
// 直接展示一大坨datePicker  
NSString *const XLFormRowDescriptorTypeDatePicker = @"datePicker";  
NSString *const XLFormRowDescriptorTypePicker = @"picker";  
// slider  
NSString *const XLFormRowDescriptorTypeSlider = @"slider";  
// 展示選中打鉤的cell  
NSString *const XLFormRowDescriptorTypeBooleanCheck = @"booleanCheck";  
// 自帶右邊switch開關(guān)   
NSString *const XLFormRowDescriptorTypeBooleanSwitch = @"booleanSwitch";  
// button的cell  各種button位置需求  
NSString *const XLFormRowDescriptorTypeButton = @"button";  
// 簡(jiǎn)單的右側(cè)描述信息的cell  
NSString *const XLFormRowDescriptorTypeInfo = @"info";  
// 展示segment count計(jì)數(shù)  
NSString *const XLFormRowDescriptorTypeStepCounter = @"stepCounter";  

傳送門 XLForm GitHub

福利

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末繁疤,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子秕狰,更是在濱河造成了極大的恐慌稠腊,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸣哀,死亡現(xiàn)場(chǎng)離奇詭異架忌,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)我衬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門叹放,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人挠羔,你說我怎么就攤上這事井仰。” “怎么了破加?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵俱恶,是天一觀的道長。 經(jīng)常有香客問我范舀,道長合是,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任尿背,我火速辦了婚禮端仰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘田藐。我一直安慰自己荔烧,他們只是感情好吱七,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鹤竭,像睡著了一般踊餐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上臀稚,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天吝岭,我揣著相機(jī)與錄音,去河邊找鬼吧寺。 笑死窜管,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的稚机。 我是一名探鬼主播幕帆,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼赖条!你這毒婦竟也來了失乾?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤纬乍,失蹤者是張志新(化名)和其女友劉穎碱茁,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仿贬,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡纽竣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了茧泪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片退个。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖调炬,靈堂內(nèi)的尸體忽然破棺而出语盈,到底是詐尸還是另有隱情,我是刑警寧澤缰泡,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布刀荒,位于F島的核電站,受9級(jí)特大地震影響棘钞,放射性物質(zhì)發(fā)生泄漏缠借。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一宜猜、第九天 我趴在偏房一處隱蔽的房頂上張望泼返。 院中可真熱鬧,春花似錦姨拥、人聲如沸绅喉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柴罐。三九已至徽缚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間革屠,已是汗流浹背凿试。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留似芝,地道東北人那婉。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像党瓮,于是被迫代替她去往敵國和親吧恃。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • HTML表單 在HTML中麻诀,表單是 ... 之間元素的集合,它們?cè)试S訪問者輸入文本傲醉、選擇選項(xiàng)蝇闭、操作對(duì)象等等,然后將...
    蘭山小亭閱讀 3,419評(píng)論 2 14
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫硬毕、插件呻引、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,126評(píng)論 4 61
  • 今天復(fù)習(xí)了元學(xué)習(xí)的第二課,并對(duì)知識(shí)點(diǎn)進(jìn)行了整理吐咳,發(fā)現(xiàn)了好多新的和已經(jīng)忘記了的知識(shí)逻悠。 先說新手進(jìn)行學(xué)習(xí)的正確步驟: ...
    妄_念閱讀 144評(píng)論 0 1
  • 曾經(jīng)喜歡初夏,因?yàn)殛柟夂軠嘏录埂H缃褡類鄢跸耐耍驗(yàn)槟抢镉心恪? 去年的這個(gè)時(shí)候,我應(yīng)該還在一遍一遍數(shù)著那封情書...
    木椋閱讀 958評(píng)論 0 1
  • 最近被熱播劇《三生三世十里桃花》刷屏了沪羔,好不容易等著素素跳了誅仙臺(tái)饥伊,但是卻開學(xué)了。那么如何有逼格的追劇蔫饰,就看看《三...
    那個(gè)誰513閱讀 383評(píng)論 0 0