iOS Form
| Form Demo | New Contact |
|---|---|
 |
 |
Implement iOS Form with UITableView
Create a base controller
Base class FormViewController with
- A table view
- A data source to handle data
- Implement table view's data source and delegate
class FormViewController: UIViewController {
let tableView = UITableView(frame: .zero, style: .grouped)
let dataSource = FormDataSource()
override func viewDidLoad() {
super.viewDidLoad()
configure()
}
}
// MARK: - UITableViewDataSource
extension FormViewController: UITableViewDataSource {
func numberOfSections(in tableView: UITableView) -> Int {
dataSource.sections.count
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
dataSource.sections[section].fields.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let field = dataSource.sections[indexPath.section].fields[indexPath.row]
return field.dequeue(for: tableView, at: indexPath)
}
}
// MARK: - UITableViewDelegate
extension FormViewController: UITableViewDelegate {
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let field = dataSource.sections[indexPath.section].fields[indexPath.row]
return field.height
}
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
dataSource.sections[section].header?.dequeue(for: tableView, in: section)
}
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
guard let header = dataSource.sections[section].header else { return .zero }
return header.height
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let field = dataSource.sections[indexPath.section].fields[indexPath.row]
field.tableView(tableView, didSelectRowAt: indexPath)
}
}Detail about FormDataSource
The class FormDataSource contains data that is used for the form.
final class FormDataSource {
private(set) var sections: [FormSection] = []
}FormSection
FormSection contains data for each section on the table view.
final class FormSection {
var key: String
var header: FormHeader?
var fields: [FormField]
init(key: String, header: FormHeader? = nil, fields: [FormField]) {
self.key = key
self.header = header
self.fields = fields
}
}FormHeader
A object conform to FormHeader protocol, it will contains only the configuration of a header.
FormHeader makes it easy to create and maintain a header in a FormSection.
import UIKit
protocol FormHeader: AnyObject {
var key: String { get }
var height: CGFloat { get }
func register(for tableView: UITableView)
func dequeue(for tableView: UITableView, in section: Int) -> UIView?
}How the implementation might look:
final class TitleFormHeader {
let key: String
let viewModel: TitleHeaderFooterViewModel
init(key: String, viewModel: TitleHeaderFooterViewModel) {
self.key = key
self.viewModel = viewModel
}
}
extension TitleFormHeader: FormHeader {
var height: CGFloat { 60.0 }
func register(for tableView: UITableView) {
tableView.register(TitleHeaderFooterView.self, forHeaderFooterViewReuseIdentifier: "TitleHeaderFooterView")
}
func dequeue(for tableView: UITableView, in section: Int) -> UIView? {
let view = tableView.dequeueReusableHeaderFooterView(
withIdentifier: "TitleHeaderFooterView"
) as? TitleHeaderFooterView
view?.configure(with: viewModel)
return view
}
}FormField
FormField is the most important protocol. For cells in table view, we will have field objects that carry the logic configuration of a view. We will create fields that conform FormField for all the cells we want to display in a table view.
protocol FormField: AnyObject {
var key: String { get }
var height: CGFloat { get }
var delegate: FormFieldDelegate? { get set }
func register(for tableView: UITableView)
func dequeue(for tableView: UITableView, at indexPath: IndexPath) -> UITableViewCell
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
}Here is an example about an implementation of FormField
final class TextInputFormField {
let key: String
var viewModel: TextInputViewModel
weak var delegate: FormFieldDelegate?
init(key: String, viewModel: TextInputViewModel) {
self.key = key
self.viewModel = viewModel
}
}
// MARK: - FormField
extension TextInputFormField: FormField {
var height: CGFloat { 44.0 }
func register(for tableView: UITableView) {
tableView.register(TextInputCell.self, forCellReuseIdentifier: "TextInputCell")
}
func dequeue(for tableView: UITableView, at indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TextInputCell", for: indexPath) as! TextInputCell
cell.delegate = self
cell.configure(viewModel)
return cell
}
}Form Demo
Check out the demo for more detail about different types of cell.
git clone [email protected]:nimblehq/ios-form.git
pod installLicense
This project is Copyright (c) 2014 and onwards. It is free software, and may be redistributed under the terms specified in the LICENSE file.
About
This project is maintained and funded by Nimble.
We love open source and do our part in sharing our work with the community! See our other projects or hire our team to help build your product.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent