Views centered in parent below each other - swift

Question

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.

Answer 1

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
}
}

Answer 2

As you can see below, with the visual formatting language, you're basically painting with code.
import UIKit
class ViewController: UIViewController {
var view1:UILabel!
var view2:UILabel!
var view3:UILabel!
override func viewDidLoad() {
super.viewDidLoad()
initViews();
initLayouts();
}
func initViews() {
view.backgroundColor = UIColor.white
view1 = createLabel(title: "view1")
view2 = createLabel(title: "view2")
view3 = createLabel(title: "view3")
view.addSubview(view1)
view.addSubview(view2)
view.addSubview(view3)
}
func initLayouts() {
for view in view.subviews {
view.translatesAutoresizingMaskIntoConstraints = false
}
var views = [String: AnyObject]()
views["view1"] = view1
views["view2"] = view2
views["view3"] = view3
// ---------------------------------------------------------
// Setup horizontal constraints for all three views
// ---------------------------------------------------------
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[view1]-20-|",
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: views))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-20-[view2(==view1)]-20-|",
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: views))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[view3]-20-|",
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: views))
// special layout condition to make third view half the width of other views
view.addConstraint(NSLayoutConstraint(item: view3,
attribute: NSLayoutAttribute.width,
relatedBy: NSLayoutRelation.equal,
toItem: view1,
attribute: NSLayoutAttribute.width,
multiplier: 0.5,
constant: 0.0))
// ---------------------------------------------------------
// Setup vertical constraints for all three views
// ---------------------------------------------------------
view.addConstraints(
NSLayoutConstraint.constraints(withVisualFormat: "V:|-20-[view1]-20-[view2]-20-[view3]",
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: views))
// make all three views equal height
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[view1(44)]",
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: views))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[view2(==view1)]",
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: views))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[view3(==view1)]",
options: NSLayoutFormatOptions(rawValue: 0),
metrics: nil,
views: views))
}
// ------------------------------------------------
// Helper function
// ------------------------------------------------
func createLabel(title:String) -> UILabel {
let textLabel = UILabel()
textLabel.text = title
textLabel.backgroundColor = UIColor.red
textLabel.textColor = UIColor.black
textLabel.textAlignment = NSTextAlignment.center
textLabel.layer.borderColor = UIColor.black.cgColor
textLabel.layer.borderWidth = 2.0
return textLabel
}
}
You should see something like this: