ios 知识点

iOS 表单库 XLForm实现酷炫表单

2020-01-03  本文已影响0人  纵昂

一、在iOS开发中,开发"表单"界面,字段稍微多一点的一般都用UITableView来做,而XLForm就是这样一个框架,它是创建动态表格视图最牛逼的iOS库, 用它实现表单功能,非常简单,省心省力。

二、下载安装
1,通过cocopods安装:
在工程的 Podfile file文件添加: pod 'XLForm',
运行命令行 pod install
XLForm 不需要第三方pod库依赖

三、创建表单
1、创建继承自XLFormViewController的控制器

//
//  ZongFormViewController.h
//  ZongXLForm
//
//  Created by Fedtech on 2020/1/3.
//  Copyright © 2020年 纵昂. All rights reserved.
//

//#import <UIKit/UIKit.h>  //去除<UIKit/UIKit.h>
#import "XLFormViewController.h" //引入
NS_ASSUME_NONNULL_BEGIN

@interface ZongFormViewController : XLFormViewController

@end

NS_ASSUME_NONNULL_END

2、在控制器中创建表单

#import "XLForm.h" // 导入库
 // 设置是否显示Cell之间分界线
    //self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    // 设置Section的高度
    self.tableView.sectionHeaderHeight = 30;
    
    XLFormDescriptor * form;//form,一个表单只有一个
    XLFormSectionDescriptor * section;//section,一个表单可能有多个
    XLFormRowDescriptor * row; //row,每个section可能有多个row
    form = [XLFormDescriptor formDescriptor];

//     First section 第一个区
    section = [XLFormSectionDescriptor formSection];
    section.title = @"用户"; //区头标题
    [form addFormSection:section]; 

//     图片选择
    row = [XLFormRowDescriptor formRowDescriptorWithTag:Imageselection rowType:XLFormRowDescriptorTypeImage title:@"纵昂@ios"];
//    self.tableView.sectionHeaderHeight = 30;
    row.height = 80; //单独对一个cell设置高度
    [section addFormRow:row];

//     选择器
    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];

//  第二个人区
    section = [XLFormSectionDescriptor formSection];
    section.title = @"纵昂@ios";
    [form addFormSection:section];
    row = [XLFormRowDescriptor formRowDescriptorWithTag:@"ItemType" rowType:XLFormRowDescriptorTypeText title:@"禁止输入:"];
    row.required = YES;
    row.disabled = @YES;
    row.value = @"安徽省宿州市萧县龙城镇";
//     font
    [row.cellConfig setObject:[UIFont boldSystemFontOfSize:16] forKey:@"textLabel.font"];
//     font
    [row.cellConfig setObject:[UIFont boldSystemFontOfSize:16] forKey:@"textField.font"];
//     alignment
    [row.cellConfig setObject:@(NSTextAlignmentRight) forKey:@"textField.textAlignment"];
    [section addFormRow:row];
//     普通文本
    row = [XLFormRowDescriptor formRowDescriptorWithTag:TextZA rowType:XLFormRowDescriptorTypeText];
//     设置placeholder
    [row.cellConfig setObject:@"账号:" forKey:@"textField.placeholder"];
//     设置文本颜色
    [row.cellConfig setObject:[UIColor redColor] forKey:@"textField.textColor"];
    [section addFormRow:row];

目前学会的就这些
最后给大家一个cell样式的总汇

    #import "XLForm.h"  
// JVFloatLabeledTextField 普通的文本输入框,自带浮动动画  
NSString *const XLFormRowDescriptorTypeText = @"text";  
// add的时候展示名字的 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对应的textView的cell  
NSString *const XLFormRowDescriptorTypeTextView = @"textView";  
NSString *const XLFormRowDescriptorTypeZipCode = @"zipCode";  
// 非常普通的点击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 月 日 年  (内嵌)  
NSString *const XLFormRowDescriptorTypeDateInline = @"dateInline";  
// 日期picker选择器内嵌 dateTime更详细  星期 月 日 小时  分(内嵌)  
NSString *const XLFormRowDescriptorTypeDateTimeInline = @"datetimeInline";  
// date 小时 分 AM/PM(内嵌)  
NSString *const XLFormRowDescriptorTypeTimeInline = @"timeInline";  
// 计时器,选择hh mm(内嵌)  
NSString *const XLFormRowDescriptorTypeCountDownTimerInline = @"countDownTimerInline";  
// 月 日 年 sheet  
NSString *const XLFormRowDescriptorTypeDate = @"date";  
// 最详细的dateTime sheet  
NSString *const XLFormRowDescriptorTypeDateTime = @"datetime";  
// 小时 分 AM/PM  sheet  
NSString *const XLFormRowDescriptorTypeTime = @"time";  
// 计时器  底部弹出来的  
NSString *const XLFormRowDescriptorTypeCountDownTimer = @"countDownTimer";  
// 直接展示一大坨datePicker  
NSString *const XLFormRowDescriptorTypeDatePicker = @"datePicker";  
NSString *const XLFormRowDescriptorTypePicker = @"picker";  
// slider  
NSString *const XLFormRowDescriptorTypeSlider = @"slider";  
// 展示选中打钩的cell  
NSString *const XLFormRowDescriptorTypeBooleanCheck = @"booleanCheck";  
// 自带右边switch开关   
NSString *const XLFormRowDescriptorTypeBooleanSwitch = @"booleanSwitch";  
// button的cell  各种button位置需求  
NSString *const XLFormRowDescriptorTypeButton = @"button";  
// 简单的右侧描述信息的cell  
NSString *const XLFormRowDescriptorTypeInfo = @"info";  
// 展示segment count计数  
NSString *const XLFormRowDescriptorTypeStepCounter = @"stepCounter";  

具体用法根据具体情况操作!!

今天遇到的问题就是XLFormcell去跳转控制器的问题。总算总结出来了

//    我的界面  跳转主要代码主要代码,需要在跳转到试图控制器实现<XLFormRowDescriptorViewController>即可
    row = [XLFormRowDescriptor formRowDescriptorWithTag:Userselection rowType:XLFormRowDescriptorTypeSelectorPush title:@"我的界面:"];
    row.action.viewControllerClass = [UserViewController class];
    [section addFormRow:row];
其次还要在.m页面写上下面代码
//1、导入头文件
#import "UIView+XLFormAdditions.h" 
//2、再写下面这段代码
@synthesize rowDescriptor = _rowDescriptor;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

实现效果如下图:


实例代码截图.png

差不多就这样就可以了,可以运用到具体实际项目上!!!
本篇代码更新之后的地址

上一篇 下一篇

猜你喜欢

热点阅读