Constructing enter varieties for iOS apps

This technique isn’t working, since cells within the kind are going to be reused and this results in some inconsistency… please learn my different submit. 🤷‍♂️

CollectionView and enter varieties

My CollectionView framework simply received a HUGE replace. There are many new modifications, however one of many largest enchancment is the best way I take care of view fashions. Up to now, you had to make use of lengthy perform names in your view mannequin together with the generic view & mannequin class names. When you’ve got ever learn my final UICollectionView information it is best to know what I am speaking about. Excellent news: I’ve a approach higher resolution now! 😉

This replace not simply cleans up my code lots, however it permits me so as to add customized view mannequin handlers, so I can work together with enter fields, toggles, and many others. in a ridiculously straightforward approach. One other enormous enchancment is that I began to make use of view identifiers. It was unintentional discovery, I solely needed to search for another resolution for figuring out views by tags, then I had this sensible thought: why not lookup cells by ids as effectively?

Consequently I am now capable of create varieties through the use of the framework. I nonetheless imagine that assortment views are the last word constructing blocks for many of the functions. Yeah, you’ll be able to nonetheless say that there is no such thing as a silver bullet, however I am simply nice if this resolution can cowl 90% of the my use-cases. In spite of everything, many of the apps are simply visualizing JSON information in a pleasant, or not-so-nice approach. 🤷‍♂️ #sarcasm

Reusable kind parts

Let’s construct a kind through the use of the model new framework. To begin with, you may must combine it through the use of a bundle supervisor. I actually hope that in a couple of weeks we are able to use Swift Package deal Supervisor, till than you it is best to go along with CocoaPods or carthage.

# cocoapods
supply 'https://github.com/CoreKit/CocoaPods.git'
pod 'CollectionView', '~> 2.0.0'

# carthage
github "CoreKit/CollectionView" "2.0.0"

Now let’s create a reusable cell for our enter fields. Be at liberty to make use of a xib file as standard, the one distinction within the implementation goes to be that I take away the goal listener within the reset technique. We’ll add one in a while within the view-model. 🎯

import Basis
import CollectionView

class InputCell: Cell {

    @IBOutlet weak var textField: UITextField!

    override func reset() {
        tremendous.reset()

        self.textField.removeTarget(nil, motion: nil, for: .editingChanged)
    }
}

I am additionally going to create a easy entity for displaying a placeholder if the shape area is empty and storing the precise worth of the enter area, let’s name this InputEntity.

import Basis

struct InputEntity {
    var placeholder: String
    var worth: String?
}

Now the toughest half: making a connection between the view and the mannequin.

import Basis
import CollectionView

class InputViewModel: ViewModel<InputCell, InputEntity> {

    var editingChangeHandler: ViewModelHandler?

    override var peak: CGFloat {
        return 60
    }

    override func updateView() {
        self.view?.textField.placeholder = self.mannequin.placeholder
        self.view?.textField.textual content = self.mannequin.worth

        self.view?.textField.addTarget(self,
                                       motion: #selector(self.editingChanged(_:)),
                                       for: .editingChanged)
        self.view?.textField.addTarget(self,
                                       motion: #selector(self.editingDidEnd(_:)),
                                       for: .editingDidEnd)
    }

    func onEditingChange(_ handler: @escaping ViewModelHandler) -> Self {
        self.editingChangeHandler = handler
        return self
    }

    @objc func editingChanged(_ textField: UITextField) {
        self.mannequin.worth = textField.textual content
        self.editingChangeHandler?(self)
    }

    @objc func editingDidEnd(_ textField: UITextField) {
        print("nothing-to-do-here-now...")
    }
}

It is fairly a fancy view mannequin, however it could possibly do lots as effectively. The very first thing that it is best to perceive is the ViewModelHandler which is principally a generic alias which you can make the most of within the view fashions. It provides you the flexibility to go across the type-safe view-model for the callbacks. You may see that in a while.

The second main change is the updateView technique, which is used to replace the view based mostly on the info coming from the mannequin. I am additionally including my goal listeners to my view, so I can deal with consumer enter instantly contained in the view-model class.

The onEditingChange technique is the “public” api of the view-model. I take advantage of the on prefix now for including handlers, and listeners to my view-models. It principally calls the saved block if a change occasion occurs. You’ll be able to add as many occasion handler blocks as you need. I actually hope that you’re going to get the cling of this strategy.

Yet another factor: returning the the peak of the cell is a one-liner now! 🎊

Composing varieties and extra The plan is for now to have an enter kind with two enter fields. One for the e-mail deal with, the opposite goes for use for the password. The trick goes to be that this time I will not present you the whole code, however it’s a must to work out the remaining.

Nevertheless I am going to present you the whole lot that you’re going to ever must know so as to make your individual varieties, even some advanced ones. Don’t fret, it is just some strains of code.

import UIKit
import CollectionView

class ViewController: CollectionViewController {

    override func viewDidLoad() {
        tremendous.viewDidLoad()

        let grid = Grid(columns: 1, margin: UIEdgeInsets(all: 16), padding: .zero)
        self.collectionView.supply = .init(grid: grid, [
            [
                InputViewModel(id: "email-input", .init(placeholder: "Email", value: nil))
                .onEditingChange { viewModel in
                    guard let passwordViewModel = viewModel.by(id: "password-input") as? InputViewModel else {
                        return
                    }
                    passwordViewModel.model.value = viewModel.model.value ?? ""
                    passwordViewModel.updateView()
                },
                InputViewModel(id: "password-input", .init(placeholder: "Password", value: nil)),
            ],
        ])
        self.collectionView.reloadData()
    }
}

When you’ve ever labored with my assortment view framework, it is best to know that I at all times use a grid system, as a result of I do not actually wish to calculate numbers.

The supply is a set of view-models, grouped by sections. The one fascinating half right here is that sources can now be initialized with an array of sections and view-models.

When you initialize a view-model with and identifier, in a while you’ll be able to question that one by the id. That is precisely whats taking place contained in the modifying change handler block. Each view-model has the flexibility to return another view-model by the id. View-models are type-safe by default, the viewModel handed contained in the block too, due to the generic ViewModelHandler alias.

So on this little instance, in case you kind one thing into the primary enter area, the very same textual content will seem within the second textual content area. You may get all of the view fashions by id once you want them. For instance if it’s a must to submit this way, you’ll be able to seize the e-mail and password fields through the use of the identical strategy.

Constructing a login kind

I problem you to construct a login kind by yourself through the use of my framework. I assure yout that it should not take greater than 30mins of labor. I am going to present you the ultimate view controller that I might use, so this may provides you some assist.

If you wish to boost issues slightly bit, you’ll be able to even add a checkbox for accepting the privateness coverage. The primary thought right here is that it is best to create reusable parts for each single merchandise in your kind. So for instance a ToggleView with a corresponding view-model can be a great strategy (additionally works for buttons). 🤫

Right here is the ultimate trace, you solely need to make your individual view-models and views…

import UIKit
import CollectionView

class ViewController: CollectionViewController {

    enum Ids: String {
        case e-mail = "email-input"
        case password = "password-input"
        case privacyPolicy = "privacy-policy-checkbox"
        case submit = "submit-button"
    }

    override func viewDidLoad() {
        tremendous.viewDidLoad()

        let grid = Grid(columns: 1, margin: UIEdgeInsets(all: 16), padding: .zero)
        self.collectionView.supply = .init(grid: grid, [
            [
                InputViewModel(id: Ids.email.rawValue, .init(placeholder: "Email", value: nil))
                .onEditingEnd { viewModel in
                    guard let passwordViewModel = viewModel.by(id: Ids.password.rawValue) as? InputViewModel else {
                        return
                    }
                    passwordViewModel.view?.textField.becomeFirstResponder()
                },
                InputViewModel(id: Ids.password.rawValue, .init(placeholder: "Password", value: nil, secure: true))
                .onEditingEnd { viewModel in
                    viewModel.view?.textField.endEditing(true)
                },
            ],
            [
                ToggleViewModel(id: Ids.privacyPolicy.rawValue, .init(label: "Privacy policy", value: false))
                .onValueChange { viewModel in
                    guard let submitViewModel = viewModel.by(id: Ids.submit.rawValue) as? ButtonViewModel else {
                        return
                    }
                    var model = submitViewModel.model
                    model.enabled = viewModel.model.value
                    submitViewModel.model = model
                    submitViewModel.updateView()
                },
            ],
            [
                ButtonViewModel(id: Ids.submit.rawValue, .init(title: "Submit", enabled: false))
                .onSubmit { viewModel in
                    guard
                        let emailViewModel = viewModel.by(id: Ids.email.rawValue) as? InputViewModel,
                        let passwordViewModel = viewModel.by(id: Ids.password.rawValue) as? InputViewModel
                    else {
                        return
                    }
                    
                },
            ],
        ])
        self.collectionView.reloadData()
    }
}

That is it for now, an nearly full login kind, with just some strains of code. After all there may be an underlying framework, however in case you test the supply code, you may truly see that it comprises nothing that may be thought of as black magic. 💫