KCSForm-iOS 1.2.3

KCSForm-iOS 1.2.3

×

由 Jerry Shan，Kinetic Commerce 维护。

 
依赖
IQKeyboardManager>= 0
DropDown>= 0
 

KCSForm-iOS 1.2.3

  • 由
  • Kinetic Commerce

KCSForm-iOS

KCS Form 是一个库，可以帮助您使用预设的输入类型构建 iOS UI 表单。SDK 容易使用，也容易定制，使表单创建变得轻松。

alt text

要求

  • iOS 11.0+
  • Xcode 10.1+
  • Swift 4.2+

作者

Matthew Patience

依赖

这些已经作为 pod 依赖项导入，但感谢以下库

安装

CocoaPods

pod 'KCSForm-iOS'

使用方法

创建FormViewController实例并实现其代理

let formController = FormViewController()
formController.delegate = self

为表单添加样式，默认情况下，表单没有边距、颜色或字体。以下是一些可用的样式选项（见FormStyle类获取所有选项），如果需要可以自由提交PR添加更多。

let style = FormStyle()

style.fieldTitleColor = .black
style.fieldEntryColor = .black
style.fieldPlaceholderColor = .gray
style.fieldBorderColor = .black
style.fieldErrorColor = .red
style.fieldDisabledColor = .gray
style.buttonLabelColor = .black
style.sectionTitleColor = .black
style.titleColor = .black
style.subTitleColor = .gray

style.setFormMargins(leading: 20, trailing: 20, top: 20, bottom: 20)
style.interItemFieldSpacing = 20
style.lineSpacing = 20
style.fieldTitleBottomMargin = 10
style.sectionTitleTopMargin = 20
style.sectionTitleBottomMargin = 0
style.fieldCornerRadius = 2
style.fieldBorderWidth = 1
style.checkboxItemSpacing = 8
style.titleSubTitleTopMargin = 20
style.titleSubTitleBottomMargin = 10
style.titleSubTitleVerticalSpacing = 10
style.errorTopMargin = 5

style.fieldTitleFont = UIFont.systemFont(ofSize: 14, weight: .medium)
style.sectionTitleFont = UIFont.systemFont(ofSize: 24, weight: .bold)
style.fieldButtonFont = UIFont.systemFont(ofSize: 18, weight: .bold)
style.titleFont = UIFont.systemFont(ofSize: 18, weight: .medium)
style.subTitleFont = UIFont.systemFont(ofSize: 14, weight: .regular)
style.fieldErrorFont = UIFont.systemFont(ofSize: 14, weight: .regular)

style.textFieldStyle = .box
style.bounce = false

formViewController.setStyle(style)

最后，创建表单中将使用的单元格。每个单元格都需要一个唯一的标识符，建议使用枚举来标识每个单元格。

enum CellId: Int {
    case firstName
    case lastName
    case email
    case phone
}

每个单元格都需要一个特定的数据对象来定义其内容和外观。宽度以整个单元格所在行的总宽度的百分比来衡量，因为表单使用的是流动布局。

var cells = [FormViewController.Cell]()
let firstNameData = FormTextFieldCell.Data(title: "First Name", text: "", placeholder: "John", keyboardType: .default, returnKeyType: .next, formattingPattern: nil, capitalizationType: .words, isEditable: true, errorText: "Error!!!"))
cells.append(FormViewController.Cell(id: CellId.firstName.rawValue, type: .text, widthPercentage: 0.5, data: firstNameData)
formController.setCells(cells)
formController.reloadCollectionView()

每当单元格的输入内容发生变化时，都会根据单元格类型触发FormViewControllerDelegate回调。例如，在FormTextFieldCell或FormPasswordCell文本更改的情况下，将触发updatedText回调。

func formViewController(_ controller: FormViewController, updatedText: String?, forCellId id: Int) {
    switch (id) {
    case CellId.firstName.rawValue:
        print(updatedText)
        break
    default:
        break
    }
}

可用的表单组件

章节标题

alt text

cells.append(FormViewController.Cell(id: CellId.section1.rawValue, type: .title, widthPercentage: 1.0,
    data: FormSectionTitleCell.Data(title: "Section One")))

文本字段

alt text

cells.append(FormViewController.Cell(id: CellId.email.rawValue, type: .text, widthPercentage: 1.0,
    data: FormTextFieldCell.Data(title: "Email", text: "", placeholder: "[email protected]", keyboardType: .emailAddress, returnKeyType: .next, formattingPattern: nil, capitalizationType: .none, isEditable: true, errorText: nil)))

密码

alt text

cells.append(FormViewController.Cell(id: CellId.password.rawValue, type: .password, widthPercentage: 1.0,
    data: FormPasswordCell.Data(title: "Password", password: "", placeholder: "********")))

按钮选项

alt text

cells.append(FormViewController.Cell(id: CellId.gender.rawValue, type: .buttonOptions, widthPercentage: 1.0,
    data: FormButtonOptionsCell.Data(title: "Gender", multiSelect: false, options: ["Male", "Female", "Other"])))

标签

alt text

cells.append(FormViewController.Cell(id: CellId.gender.rawValue, type: .buttonOptions, widthPercentage: 1.0,
    data: FormButtonOptionsCell.Data(title: "Gender", multiSelect: false, options: ["Male", "Female", "Other"])))

复选框选项

alt text

cells.append(FormViewController.Cell(id: CellId.contactOptions.rawValue, type: .checkboxOptions, widthPercentage: 1.0,
    data: FormCheckboxOptionsCell.Data(title: "Contact Methods", options: ["Phone", "Email", "Snail Mail", "Carrier Pidgeon"], optionStates: ["Phone": false, "Email": false])))

下拉菜单

alt text

alt text

cells.append(FormViewController.Cell(id: CellId.country.rawValue, type: .dropdown, widthPercentage: 1.0,
    data: FormDropdownCell.Data(title: "Country", selection: nil, placeholder: "Select a country", isEditable: true, options: ["Canada", "USA", "Mexico", "Westeros"])))
cells.append(FormViewController.Cell(id: CellId.eyeColor.rawValue, type: .dropdown, widthPercentage: 1.0,
    data: FormDropdownCell.Data(title: "Eye Color:", selection: nil, placeholder: "Select a color", isEditable: true, options: [FormColor(.blue, "Blue"), FormColor(.black, "Black"), FormColor(.brown, "Brown"), FormColor(.cyan, "Cyan"), FormColor(.gray, "Gray"), FormColor(.green, "Green", available: false), FormColor(.magenta, "Magenta"), FormColor(.orange, "Orange"), FormColor(.purple, "Purple")])))

标签

alt text

cells.append(FormViewController.Cell(id: CellId.someLabel.rawValue, type: .label, widthPercentage: 1.0,
    data: FormLabelCell.Data(text: NSAttributedString(string: "I am a label!"))))

标题副标题

alt text

cells.append(FormViewController.Cell(id: CellId.loremIpsum.rawValue, type: .titleSubtitle, widthPercentage: 1.0,
    data: FormTitleSubtitleCell.Data(title: "Lorem Ipsum", subTitle: "Lorem ipsum dolor sit amet")))

按钮

alt text

cells.append(FormViewController.Cell(id: CellId.save.rawValue, type: .button, widthPercentage: 1.0,
    data: FormButtonCell.Data(title: "Save")))

颜色选项

alt text

cells.append(FormViewController.Cell(id: CellId.favoriteColor.rawValue, type: .colorOptions, widthPercentage: 1.0,
    data: FormColorOptionsCell.Data(title: "Favorite Color:", multiSelect: false, selectedOptionIndex: nil, options: [FormColor(.blue, "Blue"), FormColor(.black, "Black"), FormColor(.brown, "Brown"), FormColor(.cyan, "Cyan"), FormColor(.gray, "Gray"), FormColor(.green, "Green", available: false), FormColor(.magenta, "Magenta"), FormColor(.orange, "Orange"), FormColor(.purple, "Purple")])))

间隔

cells.append(FormViewController.Cell(id: CellId.spacer.rawValue, type: .spacer, widthPercentage: 1.0, data: FormSpacerCell.Data(height: 20)))

需要某些自定义功能？

没问题，只需创建自己的集合视图单元格，将单元格类型设置为“自定义”，然后指定要使用的类。（注意：必须是XIB）

cells.append(FormViewController.Cell(id: <EXAMPLE_ID>, type: .custom, widthPercentage: 1.0, data: nil, customCell: ExampleCustomCell.self))

还需要实现 FormViewControllerDelegate 的 updateCustomCell 回调，以便在单元格即将显示时更新单元格内容。

func formViewController(_ controller: FormViewController, updateCustomCell cell: UICollectionViewCell, forCellId id: Int) -> UICollectionViewCell {
    if id == CellId.optIn.rawValue {
        if let cell = cell as? ExampleCustomCell {
            cell.update(title: "Lorem ipsum")
        }
    }
    return cell
}

许可

此存储库采用了 MIT 许可证。

https://open-source.org.cn/licenses/MIT

社区和贡献

我们欢迎您的贡献。如同所有 Kinetic Cafe 开源项目一样，此项目遵循 Kinetic Cafe 开源 行为准则。