Latest 1.0.7
Homepage https://github.com/KineticCafe/KCSForm-iOS
License MIT
Platforms ios 11.0
Dependencies IQKeyboardManager, DropDown
Authors

KCS Form is a library to help you build iOS UI forms using pre-built input types. The SDK is easy to use and easy to style to make form creation effortless.

alt text

Requirements

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

Author

Matthew Patience

Dependencies

These are already imported as pod dependancies, but thanks to the following libraries:

Installation

CocoaPods

pod 'KCSForm-iOS'

Usage

Create an instance of FormViewController and implement it’s delegate:

let formController = FormViewController()
formController.delegate = self

Stylise your form, by default the form has no margins, color, or fonts. Below are all the available style options, feel free to submit PRs to add more if required.

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

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

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

FormStyle.shared.textFieldStyle = .box
FormStyle.shared.bounce = false

Lastly, create the cells that will be in your form. Each cell will require a unique identifier, it is recommended that you use an enum to identify each cell.

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

Each cell will require a specific data object that will define it’s content and appearance. Width is measured in percentage of the overall width of each form row since the form uses a flow layout.

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()

Whenever the input content of a cell is changed, a FormViewControllerDelegate callback will be triggered depending on the cell type. For example, the updatedText callback would be triggered in the case of a FormTextFieldCell or FormPasswordCell text change.

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

Available Form Components

Section Title

alt text

Text Field

alt text

Password

alt text

Button Options

alt text

Checkbox Options

alt text

Dropdown

alt text

Label

FormLabelCell

Title Subtitle

alt text

Button

alt text

NEED SOMETHING CUSTOM?

No problem, just create your own collection view cell, set the cell type to "custom", and then tell it what class to use. (Note: Must be an XIB)

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

You will also need to implement the FormViewControllerDelegate updateCustomCell callback to update the cell’s content when it is about to be displayed:

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
}

License

This repository is licensed under the MIT License

https://opensource.org/licenses/MIT

Community and Contributing

We welcome your contributions. Like all Kinetic Cafe open source projects, is under the Kinetic Cafe Open Source Code of Conduct.

Latest podspec

{
    "name": "KCSForm-iOS",
    "version": "1.0.7",
    "summary": "KCS Form is a library to help you build iOS UI forms using pre-built input types.",
    "description": "KCS Form is a library to help you build iOS UI forms using pre-built input types. The SDK is easy to use and easy to style to make form creation effortless.",
    "homepage": "https://github.com/KineticCafe/KCSForm-iOS",
    "authors": {
        "Kinetic Commerce": "[email protected]"
    },
    "license": {
        "type": "MIT"
    },
    "source": {
        "git": "https://github.com/KineticCafe/KCSForm-iOS.git",
        "tag": "1.0.7"
    },
    "swift_version": "4.0",
    "platforms": {
        "ios": "11.0"
    },
    "source_files": "KCSForm-iOS/Classes/**/*",
    "resources": [
        "KCSForm-iOS/Assets/*.bundle"
    ],
    "dependencies": {
        "IQKeyboardManager": [],
        "DropDown": []
    }
}

Pin It on Pinterest

Share This