认识XLForm

2017-10-26 本文已影响0人向日葵的夏天_summer

一认识

XLForm是创建动态表格视图最灵活的第三方库，提供了各种cell样式，比较简单实用；

二基本使用

创建控制器继承自XLFormViewController

创建form表单，添加section（组），添加row（行）

 XLFormDescriptor *form = [XLFormDescriptor formDescriptor];
 XLFormSectionDescriptor *section;
 XLFormRowDescriptor *row;

 section = [XLFormSectionDescriptor formSection];
 [form addFormSection:section];
 
 row = [XLFormRowDescriptor formRowDescriptorWithTag:kBuildName rowType:XLFormRowDescriptorTypeText title:@"楼栋名称"];
 row.required = YES;
 [self customizeFormRowFont:row];
 [section addFormRow:row];

表单赋值，不然表单不显示
```
 self.form = form;
```

三修改基本属性

修改文字颜色，字体大小

以XLFormRowDescriptorTypeText类型的cell为例，默认创建出来是这样的，

 row = [XLFormRowDescriptor formRowDescriptorWithTag:kBuildName rowType:XLFormRowDescriptorTypeText title:@"楼栋名称"];

01.png

假如要修改文字大小和颜色的话，需要这样做：

02.png

文本对齐方式
XLForm中Text类型中的TextField文字默认是左对齐的，要是想满足右对齐的话，需要这样设置：
```
 [row.cellConfigAtConfigure setObject:@(NSTextAlignmentRight) forKey:@"textField.textAlignment"];
```

添加cell的accessoryView

[row.cellConfig setObject:@(UITableViewCellAccessoryDisclosureIndicator) forKey:@"accessoryType"];

那么得到的效果如下：（右边就会有一个小箭头）

03.png

其它类型的cell

数字类型XLFormRowDescriptorTypeInteger，会调起数字键盘：

04.png
XLFormRowDescriptorTypeBooleanSwitch,

05.png

pickerView类型XLFormRowDescriptorTypeSelectorPickerView，

row = [XLFormRowDescriptor formRowDescriptorWithTag:kBuildConstruction rowType:XLFormRowDescriptorTypeSelectorPickerView title:@"建筑结构"];
row.required = YES;
row.selectorOptions =@[[XLFormOptionsObject formOptionsObjectWithValue:@"建筑结构一" displayText: @"建筑结构一"],
                 [XLFormOptionsObject formOptionsObjectWithValue:@"建筑结构二" displayText: @"建筑结构二"]
                 ];
row.value = [XLFormOptionsObject formOptionsObjectWithValue:@"建筑结构一" displayText:@"建筑结构一"];
[row.cellConfig setObject:@(UITableViewCellAccessoryDisclosureIndicator) forKey:@"accessoryType"];

06.png

日期类型XLFormRowDescriptorTypeDate，

 row = [XLFormRowDescriptor formRowDescriptorWithTag:kBuildTime rowType:XLFormRowDescriptorTypeDate title:@"建筑年份"];

row.value = [NSDate date];
[row.cellConfig setObject:@(UITableViewCellAccessoryDisclosureIndicator) forKey:@"accessoryType"];

四自定义Cell

虽然XLForm中提供了很多种类型的cell，但是在实际开发中可能并不是非常满足自己的需求，这时候就需要我们去自定义cell了，例如：

07.png

XLForm中提供了选择器，但是一般情况下都是一个cell中只有一个cell，但是我们的需求是一个cell中展示两个选择器来选择，所以我就整理下，自定义这个cell的整体思路：

首先我创建了一个cell叫做XLFormTwoSelectorCell继承自XLFormBaseCell，然后发现，必须实现3个方法：

load()注册自定义的cell；
```
+(void)load{}
```
configure()配置一些基本cell信息
```
-(void)configure{}
```
update() 更新tableView中显示的值
```
-(void)update{}
```

2.然后我查看了一个cell中只有一个selector的XLFormSelectorCell，是XLForm中的源代码，发现不管是一个selector还是两个selector都只是在点击cell某个位置弹出pickerView而已，所以首先我重写了成为响应者的方法：
我给cell左半部分和有半部分分别加了手势，点击时候成为第一响应者，弹出pickerView，

09.png

08.png

（然后会发现，因为是一个pickerView，所以点右边或者是点击左边每次pickerView并不能对应到当前的row，所以我就子安点击的时候让pickerView滑动到对应的row）

改变cell中左边Label和右边Label的值

10.png

4.整体代码：

#import "XLFormTwoSelectorCell.h"
NSString * const XLFormRowDescriptorCustomSelectorCell = @"XLFormRowDescriptorCustomSelectorCell";

@interface XLFormTwoSelectorCell() <UIPickerViewDelegate, UIPickerViewDataSource>

@property (weak, nonatomic) IBOutlet UILabel *leftTitleLabel;
@property (weak, nonatomic) IBOutlet UILabel *rightTitleLabel;

@property (strong, nonatomic) UIPickerView * pickerView;

@property (weak, nonatomic) IBOutlet UIView *leftView;
@property (weak, nonatomic) IBOutlet UIView *rightView;

@property(assign, nonatomic) NSInteger leftIndex;
@property(assign, nonatomic) NSInteger rightIndex;

//记录点击左边view还是右边view
@property(assign, nonatomic) BOOL isClickRight;

@property(strong, nonatomic) NSMutableDictionary *value;

@end

@implementation XLFormTwoSelectorCell

-(NSMutableDictionary *)value {
if (!_value) {
    _value = [NSMutableDictionary dictionary];
}
return _value;
}

-(UIPickerView *)pickerView
{
if (!_pickerView) {
    _pickerView = [[UIPickerView alloc] init];
    _pickerView.delegate = self;
    _pickerView.dataSource = self;
    [_pickerView selectRow:[self selectedIndex] inComponent:0 animated:NO];
}
return _pickerView;
}

-(UIView *)inputView {

if ([self.rowDescriptor.rowType isEqualToString:XLFormRowDescriptorCustomSelectorCell]){
    return self.pickerView;
}
return [super inputView];
}

-(void)awakeFromNib {
[super awakeFromNib];

UITapGestureRecognizer *tapLeft = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapLeft)];
[self.leftView addGestureRecognizer:tapLeft];

UITapGestureRecognizer *tapRight = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapRight)];
[self.rightView addGestureRecognizer:tapRight];
}

-(void)tapLeft {

self.isClickRight = NO;
[self.pickerView selectRow:self.leftIndex inComponent:0 animated:NO];
[self becomeFirstResponder];
}

-(void)tapRight {

self.isClickRight = YES;
[self.pickerView selectRow:self.rightIndex inComponent:0 animated:NO];
[self becomeFirstResponder];
}

-(BOOL)formDescriptorCellCanBecomeFirstResponder
{
  return (!self.rowDescriptor.isDisabled && ([self.rowDescriptor.rowType isEqualToString:XLFormRowDescriptorCustomSelectorCell]));
}

//点击cell的时候不让弹出pickerView
-(BOOL)formDescriptorCellBecomeFirstResponder
{
    return NO;
}

-(void)formDescriptorCellDidSelectedWithFormController:  (XLFormViewController *)controller
{

if (self.rowDescriptor.action.formBlock){
    self.rowDescriptor.action.formBlock(self.rowDescriptor);
}

 if ([self.rowDescriptor.rowType isEqualToString:XLFormRowDescriptorCustomSelectorCell]){
        [controller.tableView selectRowAtIndexPath:nil animated:YES scrollPosition:UITableViewScrollPositionNone];
    }
}

- (BOOL)canBecomeFirstResponder
{
if ([self.rowDescriptor.rowType isEqualToString:XLFormRowDescriptorCustomSelectorCell]){
    return YES;
}
return [super canBecomeFirstResponder];
}

+(void)load {
[XLFormViewController.cellClassesForRowDescriptorTypes setObject:NSStringFromClass([XLFormTwoSelectorCell class]) forKey:XLFormRowDescriptorCustomSelectorCell];
}

-(void)configure
{
[super configure];
self.selectionStyle = UITableViewCellSelectionStyleNone;
}

//点击完成
-(void)update
{
[super update];
self.editingAccessoryType = self.accessoryType;

if (self.rowDescriptor.value) {
    NSDictionary *dict = self.rowDescriptor.value;
    self.leftTitleLabel.text = dict[@(0)];
    self.rightTitleLabel.text = dict[@(1)];
}
}

-(NSString *)valueDisplayText {
if (self.rowDescriptor.selectorOptions) {
    NSArray *array = self.rowDescriptor.selectorOptions[self.isClickRight][@"values"];
    NSInteger row = [self.pickerView selectedRowInComponent:0];
    return array[row];
}
return nil;
}

-(void)highlight
{
[super highlight];
if (self.isClickRight) {
    self.rightTitleLabel.textColor = self.tintColor;
}else {
    self.leftTitleLabel.textColor = self.tintColor;
}
}

-(void)unhighlight {

[super unhighlight];
if (self.isClickRight) {
    self.rightTitleLabel.textColor = [UIColor colorWithHexString:@"#222222"];
}else {
    self.leftTitleLabel.textColor = [UIColor colorWithHexString:@"#222222"];
}
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
if (self.rowDescriptor.valueTransformer){
    NSAssert([self.rowDescriptor.valueTransformer isSubclassOfClass:[NSValueTransformer class]], @"valueTransformer is not a subclass of NSValueTransformer");
    NSValueTransformer * valueTransformer = [self.rowDescriptor.valueTransformer new];
    NSString * tranformedValue = [valueTransformer transformedValue:[[self.rowDescriptor.selectorOptions objectAtIndex:row] valueData]];
    if (tranformedValue){
        return tranformedValue;
    }
}
NSArray *array = self.rowDescriptor.selectorOptions[self.isClickRight][@"values"];
return array[row];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
if ([self.rowDescriptor.rowType isEqualToString:XLFormRowDescriptorCustomSelectorCell]){
    NSArray *array = self.rowDescriptor.selectorOptions[self.isClickRight][@"values"];
    if (self.isClickRight) {
        self.rightTitleLabel.text = array[row];
        self.rightIndex = row;
        
        self.value[@(1)] = array[row];
    }else {
        self.leftTitleLabel.text = array[row];
        self.leftIndex = row;
        self.value[@(0)] = array[row];

    }
    self.rowDescriptor.value = self.value;
    [self setNeedsLayout];
}
}

#pragma mark - UIPickerViewDataSource

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
return 1;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
NSArray *array = self.rowDescriptor.selectorOptions[self.isClickRight][@"values"];
return array.count;
}


#pragma mark - Helpers

-(NSInteger)selectedIndex
{
if (self.rowDescriptor.selectorOptions) {
    NSArray *array = self.rowDescriptor.selectorOptions[self.isClickRight][@"values"];
    return array.count;
}
return -1;
}
@end

认识XLForm

一认识

二基本使用

三修改基本属性

四自定义Cell

猜你喜欢

热点阅读

认识XLForm

一 认识

二 基本使用

三 修改基本属性

四 自定义Cell

猜你喜欢

热点阅读

一认识

二基本使用

三修改基本属性

四自定义Cell