iOS開發之XLForm的使用

時間 2019-11-16

標籤 ios 開發 xlform 使用欄目 iOS 简体版

原文原文鏈接

在iOS開發中，開發"表單"界面，字段稍微多一點的通常都用UITableView來作，而XLForm就是這樣一個框架，它是建立動態表格視圖最牛逼的iOS庫，用它實現表單功能，很是簡單，省心省力。可是很惋惜，搜索了不少文章都只是翻譯官方文檔，不少人在使用該庫的時候可能都被官方文檔帶走遠了，不知道如何具體使用。正好最近也要用到這個庫，因此寫個入門使用文章供你們參考。bash

1、導入項目

使用CocoaPods或者手動導入庫文件，本人選擇直接導入項目源文件的方式。框架

2、改造表單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

複製代碼

3、構造表單

- (void)initializeForm {
    
    // 設置是否顯示Cell之間分界線
    //self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    // 設置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];
    // 設置placeholder
    [row.cellConfig setObject:@"用戶名" forKey:@"textField.placeholder"];
    // 設置文本顏色
    [row.cellConfig setObject:[UIColor redColor] forKey:@"textField.textColor"];
    [section addFormRow:row];
    // 密碼
    row = [XLFormRowDescriptor formRowDescriptorWithTag:@"password" rowType:XLFormRowDescriptorTypePassword];
    // 設置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];
    // 開關
    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{

    // 判斷是否是點擊了肯定按鈕
    if([formRow.tag isEqualToString:@"conform"] && formRow.rowType == XLFormRowDescriptorTypeButton){

        //獲取表單全部到的值
        NSDictionary *values =  [self formValues];

        NSLog(@"%@", values);

    }
    
    [super didSelectFormRow:formRow];

}

//重寫改該方法 上面的方法就不會調用了
//-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
//
// NSLog(@"%s", __func__);
//
//}


@end

複製代碼

4、效果圖

5、總結

前面兩步是官方文檔中能夠找到的，也很簡單，關鍵在於initializeForm方法中具體構造表單的過程，這裏有必要強調幾點：ui

XLFormViewController實現了UITableViewDataSource, UITableViewDelegate，而且持有一個UITableView，這個從該類的聲明能夠看出來，因此UITableView 、UITableViewDataSource, UITableViewDelegate中的方法均可以正常使用。

@interface XLFormViewController : UIViewController<UITableViewDataSource, UITableViewDelegate, XLFormDescriptorDelegate, UITextFieldDelegate, UITextViewDelegate, XLFormViewControllerDelegate>
複製代碼

XLForm將表單抽象爲Form，Section，Row三個層次，分別對應三個類

XLFormDescriptor * form;//form，一個表單只有一個
XLFormSectionDescriptor * section;//section，一個表單可能有多個
XLFormRowDescriptor * row; //row，每一個section可能有多個row
複製代碼

每一個表單中的具體信息最後都落腳到XLFormRowDescriptor中，經過它能夠配置不一樣樣式的表單項，經過構造函數的rowType指定具體的表單類型，該框架提供了很是豐富的rowType，具體能夠參考官方文檔說明。atom
更細化配置表單項就須要藉助於XLFormRowDescriptor中的屬性進行配置，經常使用的有spa

@property (nonatomic, readonly, nonnull) NSMutableDictionary * cellConfig;
@property (nonatomic, readonly, nonnull) NSMutableDictionary * cellConfigForSelector;
複製代碼

這個配置的時候，每每有同窗不知道具體如何才能設置屬性，好比怎麼設置表單輸入框的placeholder?更進一步如何設置placeholder 的顏色。其實它用到了KVC，由於它們兩個都是UITextField類中的屬性，那麼直接進入UITextField查找，發現以下信息:翻譯

@property(nullable, nonatomic,copy)   NSString               *placeholder;   
@property(nullable, nonatomic,copy)   NSAttributedString     *attributedPlaceholder NS_AVAILABLE_IOS(6_0); 
複製代碼

那麼設置起來就是code

[row.cellConfig setObject:@"用戶名" forKey:@"textField.placeholder"];
 [row.cellConfig setObject:attrString forKey:@"textField.attributedPlaceholder"];
複製代碼

注意這裏的key的寫法，就是KVC的寫法。其餘的屬性依此類推。orm