Views centered in parent below each other

I'm trying to make this view with the Layout extension, I tried a little bit, but can't figure it out.

This is my code so far:

import UIKit
import Material

class ViewController: UIViewController {
    private var nameField: TextField!
    private var emailField: ErrorTextField!
    private var passwordField: TextField!

    private let constant: CGFloat = 32

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = Color.indigo.base

        prepareNameField()
        preparePasswordField()
        prepareResignResponderButton()
    }

    /// Prepares the resign responder button.
    private func prepareResignResponderButton() {
        let btn = FlatButton(title: "Login", titleColor: Color.white)
        btn.addTarget(self, action: #selector(handleResignResponderButton(button:)), for: .touchUpInside)

        view.layout(btn).width(100).height(constant).right(0).top(8 * constant).horizontally(left: constant, right: constant);
    }

    /// Handle the resign responder button.
    @objc
    internal func handleResignResponderButton(button: UIButton) {
        nameField?.resignFirstResponder()
        passwordField?.resignFirstResponder()
    }

    private func prepareNameField() {
        nameField = TextField()
        nameField.placeholderNormalColor = Color.indigo.lighten4
        nameField.placeholderActiveColor = Color.white
        nameField.dividerNormalColor = Color.indigo.lighten4
        nameField.dividerActiveColor = Color.white
        nameField.isClearIconButtonEnabled = true
        nameField.textColor = Color.white
        nameField.placeholder = "Username"

        view.layout(nameField).top(4 * constant).horizontally(left: constant, right: constant)
    }

    private func preparePasswordField() {
        passwordField = TextField()
        passwordField.placeholderNormalColor = Color.indigo.lighten4
        passwordField.placeholderActiveColor = Color.white
        passwordField.dividerNormalColor = Color.indigo.lighten4
        passwordField.dividerActiveColor = Color.white
        passwordField.isClearIconButtonEnabled = true
        passwordField.textColor = Color.white
        passwordField.placeholder = "Password"
        passwordField.clearButtonMode = .whileEditing
        passwordField.isVisibilityIconButtonEnabled = true

        // Setting the visibilityIconButton color.
        passwordField.visibilityIconButton?.tintColor = Color.white.withAlphaComponent(passwordField.isSecureTextEntry ? 0.38 : 0.54)

        view.layout(passwordField).top(6 * constant).horizontally(left: constant, right: constant)
    }

}

I'm new to swift so if someone can explain me how to accomplish it that would be great.

Solution

Here is an example with TextFields.

import UIKit
import Material

class ViewController: UIViewController {
    fileprivate var emailField: ErrorTextField!
    fileprivate var passwordField: TextField!

    /// A constant to layout the textFields.
    fileprivate let constant: CGFloat = 32

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = Color.grey.lighten5

        preparePasswordField()
        prepareEmailField()
        prepareResignResponderButton()
    }

    /// Prepares the resign responder button.
    fileprivate func prepareResignResponderButton() {
        let btn = RaisedButton(title: "Resign", titleColor: Color.blue.base)
        btn.addTarget(self, action: #selector(handleResignResponderButton(button:)), for: .touchUpInside)

        view.layout(btn).width(100).height(constant).centerVertically(offset: emailField.height / 2 + 60).right(20)
    }

    /// Handle the resign responder button.
    @objc
    internal func handleResignResponderButton(button: UIButton) {
        emailField?.resignFirstResponder()
        passwordField?.resignFirstResponder()
    }
}

extension ViewController {
    fileprivate func prepareEmailField() {
        emailField = ErrorTextField()
        emailField.placeholder = "Email"
        emailField.detail = "Error, incorrect email"
        emailField.isClearIconButtonEnabled = true
        emailField.delegate = self

        view.layout(emailField).center(offsetY: -passwordField.height - 60).left(20).right(20)

    }

    fileprivate func preparePasswordField() {
        passwordField = TextField()
        passwordField.placeholder = "Password"
        passwordField.detail = "At least 8 characters"
        passwordField.clearButtonMode = .whileEditing
        passwordField.isVisibilityIconButtonEnabled = true

        // Setting the visibilityIconButton color.
        passwordField.visibilityIconButton?.tintColor = Color.green.base.withAlphaComponent(passwordField.isSecureTextEntry ? 0.38 : 0.54)

        view.layout(passwordField).center().left(20).right(20)
    }
}


extension UIViewController: TextFieldDelegate {
    public func textFieldDidEndEditing(_ textField: UITextField) {
        (textField as? ErrorTextField)?.isErrorRevealed = false
    }

    public func textFieldShouldClear(_ textField: UITextField) -> Bool {
        (textField as? ErrorTextField)?.isErrorRevealed = false
        return true
    }

    public func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        (textField as? ErrorTextField)?.isErrorRevealed = false
        return true
    }
}