這篇文章給大家分享的是有關(guān)iOS如何實現(xiàn)自定義表單的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)建站專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、樅陽網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為樅陽等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
前言
最近在開發(fā)一個APP,需要讓用戶填寫數(shù)據(jù),然后上傳到服務(wù)端進行計算并返回結(jié)果在客戶端中展示。其中需要填寫的數(shù)據(jù)項多達十幾項,大部分是必填。所有表單數(shù)據(jù)在一個頁面中實現(xiàn),在APP中這樣的設(shè)計其實挺逆天的,但產(chǎn)品經(jīng)理堅持要這么弄,也只能硬著頭皮寫。頁面的表單數(shù)據(jù)樣式五花八門,下圖是其中幾行截圖
第一、二行的 textfield 其實是一個選擇框,只能從下拉選項中選擇一個。第三個只允許輸入數(shù)字。
頁面由另一個同學(xué)實現(xiàn),表單的數(shù)據(jù)基本都在 cellForRowAtIndexPath 實現(xiàn),結(jié)果是這樣的:
看著這么多的if...else...一下子就凌亂了。讓我怎么接手實現(xiàn)網(wǎng)絡(luò)接口,上傳表單數(shù)據(jù),難道也寫這么多的if...else...?這么實現(xiàn)之后要改其中某行數(shù)據(jù)的話,比如增加或刪除一行表單,就得改N個地方。這樣不僅浪費時間,而且容易出錯,要么改錯了要么沒改全。這樣的代碼后期維護成本太高,只能重寫了。那么問題來了,怎么改?從何開始?
XLForm
XLForm is the most flexible and powerful iOS library to create dynamic table-view forms. Fully compatible with Swift & Obj-C.
XLForm 是最靈活且最強大的創(chuàng)建動態(tài)表單的iOS庫。更多的使用方法可以參考這篇文章:https://www.jb51.net/article/138943.htm
以下是這個庫一個簡單的結(jié)構(gòu)圖:
最主要的是紅色方框的三個類:XLFormRowDescriptor, XLFormSectionDescriptor,XLFormDescriptor。XLFormDescriptor結(jié)構(gòu)和UITablView一樣,有Section,有Row,它就是為成為UITableView的數(shù)據(jù)源而設(shè)計的。XLFormRowDescriptor定義了每行表單的數(shù)據(jù)內(nèi)容,包括行樣式,標(biāo)題,行類型,選擇項內(nèi)容,標(biāo)簽,合法性驗證等。XLFormSectionDescriptor是由XLFormRowDescriptor組合而成的,而XLFormSectionDescriptor最終又組成了XLFormDescriptor。
由于我們要實現(xiàn)的APP表單行樣式更復(fù)雜,有的一行要提交兩項數(shù)據(jù),所以需要對XLFormRowDescriptor做些改動。代碼如下:
@property (strong, nonatomic) NSMutableDictionary *cellConfig; @property (strong, nonatomic) NSDictionary *textFieldConfig; @property (strong, readonly, nonatomic) NSString *rowType; @property (strong, readonly, nonatomic) NSArray *leftOptions; @property (strong, readonly, nonatomic) WWEFormRightSelectorOption *rightOptions; @property (strong, nonatomic) NSString *title; @property (strong, nonatomic) id value; @property (strong, nonatomic) NSString *tag; @property (nonatomic) BOOL required; @property (strong, nonatomic) WWEBaseTableViewCell *tableViewCell; -(id)initWithRowType:(NSString *)rowType title:(NSString *)title leftOptions:(NSArray *)leftOptions rightOptions:(WWEFormRightSelectorOption *)rightOptions; -(WWEFormValidation *)doValidation; @end @interface WWEFormRightSelectorOption : NSObject @property (readonly, nonatomic) NSArray *rightOptions; @property (readonly, nonatomic) NSString *httpParameterKey; @property (readonly, nonatomic) NSString *selectorTitle; @property (nonatomic) NSInteger selectedIndex; +(WWEFormRightSelectorOption *)formRightSelectorOptionWithTitle:(NSString *)title httpParameterKey:(NSString *)httpParameterKey rightOptions:(NSArray *)rightOptions;
這樣,表單數(shù)據(jù)就獨立于UI,TableViewCell是可配置的。通過XLFormRowDescriptor 來配置TableViewCell。只要指定行類型,就給出相應(yīng)的類型的Cell。TableViewController中的Cell是由XLFormRowDescriptor提供的。
- (WWEBaseTableViewCell *)tableViewCell { if (!_tableViewCell) { id cellClass = [self cellClassesForRowDescriptorTypes][self.rowType]; NSAssert(cellClass, @"Not defined XLFormRowDescriptorType: %@", self.rowType ?: @""); _tableViewCell = [[cellClass alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil]; NSAssert([_tableViewCell isKindOfClass:[WWEBaseTableViewCell class]], @"UITableViewCell must extend from WWEBaseTableViewCell"); _tableViewCell.rowDescriptor = self; } return _tableViewCell; }
那么 XLFormRowDescriptor 怎么根據(jù)不同的行給出不同的cell?cell需要繼承同一個父類,這個父類足夠簡單,只有一個WWEFormRowDescriptor屬性,其它需要實現(xiàn)的方法則由WWECellProtocal負(fù)責(zé)。
@class WWEFormRowDescriptor; @interface WWEBaseTableViewCell : UITableViewCell@property (nonatomic, weak) WWEFormRowDescriptor *rowDescriptor; @end
@class WWEFormRowDescriptor; @protocol WWECellProtocal@required @property (nonatomic, weak) WWEFormRowDescriptor *rowDescriptor; -(void)configure; -(void)update; @end
另外,將表單配置數(shù)據(jù)獨立出來,而不是寫死在代碼中。使用plist文件,這樣初始化form時只需讀取這個文件,就完成了cell的配置。后續(xù)如果要改動表單的內(nèi)容,不改動樣式,就只需修改plist文件,而無需改動代碼。
最后TableViewController的代碼就格外簡單了:
這樣上傳表單數(shù)據(jù)就無比輕松了, [self.form localValidationErrors]
驗證數(shù)據(jù)合法性,全部合法的話再調(diào)用 [self.form httpParameters]
就獲取了所有的表單數(shù)據(jù),傳給網(wǎng)絡(luò)接口就大功告成了。
感謝各位的閱讀!關(guān)于“iOS如何實現(xiàn)自定義表單”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!