LMForm - iOS表单配置框架

栏目: IOS · 发布时间: 5年前

内容简介:通常,将一个页面需要编辑/录入多项信息的页面称为LMForm 是基于MVVM轻量级表单配置框架,把数据和事件整合为一个model,实现cell与model的绑定,只需操作model便可配置表单。项目地址:在 Podfile 中进行如下导入:

通常,将一个页面需要编辑/录入多项信息的页面称为 表单 。iOS 实现表单大多数基于TableView,麻烦的是需要在 UITableViewDataSource 或者 UITableViewDelegate 的代理方法中写很多 if-else ,与cell耦合严重,不易获取用户已编辑的数据。如果表单页面的配置数据从服务端返回,不易实现。

1. 介绍

LMForm 是基于MVVM轻量级表单配置框架,把数据和事件整合为一个model,实现cell与model的绑定,只需操作model便可配置表单。项目地址: github.com/MaricleZhan…

2. 功能

  1. 支持动态配置model来实现表单。
  2. 支持配置文本、输入框、选择器、日期选择、地址选择等。
  3. 支持快速提取数据。
  4. 支持数据校验,可自定义校验格式。
  5. 支持完全自定义cell类型。

3. 预览

LMForm - iOS表单配置框架

4. 安装

CocoaPods

在 Podfile 中进行如下导入:

pod 'LMForm'
复制代码

安装

pod install
复制代码

5. 使用

在项目中导入 #import "LMForm.h"

1. 配置数据源

目前项目中集成以下类型:

类型 宏定义 Cell Class
文本 kFormTypeText LMFormCell
输入框 kFormTypeInput LMFormInputCell
选择器 kFormTypeSelector LMFormSelectorCell
日期选择器 kFormTypeDate LMDateCell
地址输入框 kFormTypeAddressInput LMFormAddressInputCell

可根据需求来选择对应的类型,例如输入框的model配置代码如下:

// 输入框
- (LMFormModel *)loadInput
{
    LMFormModel *model = [LMFormModel new];
    model.formType = kFormTypeInput;
    model.title = @"手机号";
    model.key = @"mobile";
    model.value = @"";
    model.placeholder = @"请输入手机号";
    model.height = LM_XX_6(50);
    model.message = @"请输入正确的手机号";
    model.limitLength = 11;
    model.validateBlock = ^BOOL(LMFormModel * _Nullable model) {
        if (![LMFormValidator isMobile:model.value])
        {
            [LMWindowHud showHud:model.message];
            return NO;
        }
        return YES;
    };
    return model;
}
复制代码

可根据需要设置UI,输入限制长度,自定义校验等。

2. 创建tableview

创建基于LMFormTableView 的tableview,并且赋值渲染数据,表单的创建完成。

self.tableView.dataArray = self.dataArray;
复制代码

3. 校验数据

提交时,对数据源进行自定义校验,校验的逻辑是对 model.validateBlock 遍历回调。

/**
 对数据源校验

 @param dataArray 数据源
 @return 全部校验通过返回YES,否则返回NO。
 */
+ (BOOL)validateDataArray:(NSArray<LMFormModel *> *)dataArray
{
    for (LMFormModel * _Nonnull obj in dataArray)
    {
        if (obj.validateBlock)
        {
            if (!obj.validateBlock(obj)) return NO;
        }
    }
    return YES;
}
复制代码

4. 获取数据源

因为LMFormTableView中的cell与model绑定,只需遍历获取 value 即可。

6. Cell 类型的介绍

1. LMFormCell

基类cell:其他类型cell继承该cell,主要功能显示文本,不可编辑。可根据需求配置相应UI和数据。

- (void)configModel:(LMFormModel *)model
{
    self.model = model;
    
    // data
    self.titleLabel.text = model.title;
    self.textField.placeholder = model.placeholder;
    self.textField.text = model.value;
    if (model.limitLength)
    {
        self.textField.limitLength = @(model.limitLength);
    }
    
    // UI
    self.line.hidden = model.hiddenLine;
    self.line.backgroundColor = LM_ObjDefault(model.separatorLineColor, LM_UIColorFromHEX(0xF4F4F4));
    self.titleLabel.textColor = LM_ObjDefault(model.leftTextColor, LM_UIColorFromHEX(0x666666));
    self.textField.textColor = LM_ObjDefault(model.rightTextColor, LM_UIColorFromHEX(0x333333));
    self.titleLabel.font = LM_ObjDefault(model.leftLabelFont, [UIFont systemFontOfSize:LM_XX_6(14)]);
    self.titleLabel.font = LM_ObjDefault(model.rightLabelFont, [UIFont systemFontOfSize:LM_XX_6(14)]);
}
复制代码

2. LMFormInputCell

输入Cell:可以编辑,可以对输入长度限制,输入的text更新为model的value。

- (void)textDidChanged:(UITextField *)textField
{
    self.model.value = textField.text;
    if (self.model.valueDidChangedBlock)
    {
        self.model.valueDidChangedBlock(textField.text);
    }
}
复制代码

3. LMFormSelectorCell

选择器Cell:可以选择对应的item,需要配置数据 NSArray<NSString *> *selectList ,点击cell底部弹窗pickerView

- (void)tapSelectedAction
{
    LMDefaultPickerView *pickView = [[LMDefaultPickerView alloc] initWithDataArray:self.model.selectList];
    @weakify(self)
    [LMPopupView showPopupViewWithPickView:pickView title:self.model.placeholder confirmBlock:^{
        @strongify(self)
        NSString *text = self.model.selectList[pickView.selectIndex];
        self.model.value = text;
        self.textField.text = text;
        if (self.model.valueDidChangedBlock)
        {
            self.model.valueDidChangedBlock(text);
        }
    } cancelBlock:^{
        
    }];
}
复制代码

4. LMDateCell

选择日期Cell:与选择cell类似,底部弹窗datePickerView。目前只支持年月日。

- (void)tapSelectedAction
{
    @weakify(self)
    [LMPopupView showPopupViewWithPickView:self.datePicker title:self.model.placeholder confirmBlock:^{
        @strongify(self)
        NSDate *date = self.datePicker.date;
        NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
        [formatter setDateFormat:self.model.dateFormat ?: @"yyyy-MM-dd"];
        NSString *text = [formatter stringFromDate:date];
        self.model.value = text;
        self.textField.text = text;
    } cancelBlock:^{
        
    }];
}
复制代码

5. LMFormAddressInputCell

地址输入cell:主要用来输入较多数字的信息,分两行显示。

6.自定义cell

创建

LMForm 支持cell的完全自定义,创建的自定义cell需要遵循协议 LMFormCellProtocol , 协议的方法必须实现,在自定义的cell中实现配置数据。如果LMFormModel中的属性不能满足需求,可以创建LMFormModel分类添加或者继承。个人比较推荐分类的做法。

/** 根据model 配置对应的cell  */
- (void)configModel:(LMFormModel *)model;
复制代码

注册

LMForm 维护一张注册表建立key与cellClass的一一对应关系,单例 LMFormTypeManager 中的 keyCellTypes 就是这个注册表。注册方法为

/**
 自定义cell时注册方法,同一种cell只需要注册一次。cls 需继承UITableViewCell

 @param cls cell class
 @param key key
 */
- (void)registerCellClass:(Class)cls forKey:(NSString *)key;
复制代码

需要注意的是注册表是个字典, key的定义不能重复


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

轻公司

轻公司

李黎、杜晨 / 中信出版社 / 2009-7 / 39.00元

《轻公司》解读了在互联网和IT技术越来越充裕的环境里,传统的商业法则是如何被打破,而新的商业法则如何建立起来的过程。大量生动翔实的采访,为我们构筑了互联网和IT技术影响下的未来商业趋势。李黎和杜晨在《IT经理世界》上发表了一篇封面报道《轻公司》后,迅速在传统行业及互联网行业产生极大反响,无论是老牌的传统企业、创业公司、风险投资商,都视这篇文章为新商业宝典,甚至有业界人士评价,这篇文章拯救了中国的电......一起来看看 《轻公司》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具