Remember the view code? We will talk about one of the benefits of creating applications with view code.

Se você não está familiarizado com o view code, recomendo ler esse POST.

Let's go to practice:

Let's create the UI for a project that will simulate the auction system in which the auctioneer and the people who will bid will have:

To start the view code, we have to make some preparations POST.

ViewControlller.swift

class ViewController: UIViewController {
    let uiAuction = UIAuction()

    override func loadView() {

        self.view = uiAuction
    }

    override func viewDidLoad() {
        super.viewDidLoad()

    }
}

Let's instantiate UIAuction because there the screen is the screen UI.

UIAuction.swift

This class will be called UIAuction, which has the UIView superclass.

import UIKit

class UIAuction: UIView {

     override init(frame: CGRect) {
         super.init(frame: frame)
     }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
 }

There will be two main attributes:

• Auctioneer
• People who will bid.

Let's componentize the auctioneer:

Auctioneer.swift

import UIKit

class Auctioneer: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)

    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

It will have the attributes:

• Photo (UIImageView);
• Final bid amount (UILabel);
• Timer to finalize the auction (UILabel).

    //Attributes

    let imPerson: UIImageView = {
        let iv = UIImageView()
        iv.image = UIImage.init(systemName: "person")
        iv.contentMode = .scaleAspectFit
        iv.translatesAutoresizingMaskIntoConstraints = false

        return iv
    }()


    let lbValue: UILabel = {
        let lb = UILabel()
        lb.backgroundColor = .gray
        lb.font = .systemFont(ofSize: 25, weight: .bold)
        lb.textAlignment = .center
        lb.text = "Value"
        lb.translatesAutoresizingMaskIntoConstraints = false

        return lb
    }()

    let lbTime: UILabel = {
        let lb = UILabel()
        lb.backgroundColor = .gray
        lb.font = .systemFont(ofSize: 25, weight: .bold)
        lb.textAlignment = .center
        lb.text = "Time"
        lb.translatesAutoresizingMaskIntoConstraints = false

        return lb
    }()

To facilitate Auto Layout, we will use the UIStackView.

let container: UIStackView = {
    let stack = UIStackView(frame: .zero)
    stack.axis = .vertical
    stack.distribution = .fillEqually
    stack.spacing = 8

    stack.translatesAutoresizingMaskIntoConstraints = false

    return stack
}()

We will use the initializer, which will call two functions: One to add the attributes in UIStackView and the other to do Auto Layout. We also need to assign from the self.translatesAutoresizingMaskIntoConstraints = false view, for the automatic layout in UIAuction:

  override init(frame: CGRect) {
        super.init(frame: frame)

        self.translatesAutoresizingMaskIntoConstraints = false

        addAttributes()
        addConstraints()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func addAttributes(){
        self.container.addArrangedSubview(imPerson)
        self.container.addArrangedSubview(lbTime)
        self.container.addArrangedSubview(lbValue)

        self.addSubview(container)
    }

    func addConstraints(){

        NSLayoutConstraint.activate([

            self.container.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            self.container.topAnchor.constraint(equalTo: self.topAnchor),
            self.container.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            self.container.trailingAnchor.constraint(equalTo: self.trailingAnchor),

        ])
    }

We created our component let's go back to UIAuction to show it in the view:

Auctioneer.swift

class Auctioneer: UIView {

    let auctioneer = Auctioneer()

    override init(frame: CGRect) {
        super.init(frame: frame)

    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

let's add the component on the screen and do Auto Layout in the addAuctioneer() function

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.backgroundColor = .systemBackground

        self.addIUAuctioneer()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func addIUAuctioneer(){
        self.addSubview(auctioneer)

        NSLayoutConstraint.activate([

            self.auctioneer.topAnchor.constraint(equalTo: self.layoutMarginsGuide.topAnchor),
            self.auctioneer.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            self.auctioneer.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 0.3),

        ])
    }

Let's run the app

Let's do the component of the people who are going to bid

Person.swift

Let's create the attributes:

• UIImageView - photo;
• UILabel - show the minimum amount that the bid can accept;
• UITextField - enter the bid amount;
• UIButton - send to the auctioneer.

import UIKit

class Person: UIView {

    //Atributtes
    let imPerson: UIImageView = {
        let iv = UIImageView()

        iv.image = UIImage.init(systemName: "person")
        iv.contentMode = .scaleAspectFit
        iv.translatesAutoresizingMaskIntoConstraints = false

        return iv
    }()

    let tfValueFirstPerson: UITextField = {
        let tf = UITextField()
        tf.placeholder = "Enter value"
        tf.font = UIFont.systemFont(ofSize: 25)
        tf.borderStyle = UITextField.BorderStyle.roundedRect
        tf.keyboardType = UIKeyboardType.numberPad
        tf.returnKeyType = UIReturnKeyType.done
        tf.clearButtonMode = UITextField.ViewMode.whileEditing

        tf.addTarget(self, action: #selector(editValueFirstPerson), for: .editingChanged)
        tf.translatesAutoresizingMaskIntoConstraints = false

        return tf
    }()

    var btnSendValue: UIButton = {
        let btn = UIButton()
        btn.setTitle("Send", for: .normal)
        btn.backgroundColor = .green
        btn.titleLabel?.font = .systemFont(ofSize: 25, weight: .medium)
        btn.translatesAutoresizingMaskIntoConstraints = false
        btn.addTarget(self, action: #selector(setValueFirstPerson), for: .touchUpInside)

        return btn
    }()

    let lbValue: UILabel = {
        let lb = UILabel()
        lb.backgroundColor = .gray
        lb.font = .systemFont(ofSize: 25, weight: .bold)
        lb.textAlignment = .center
        lb.text = "Value"
        lb.translatesAutoresizingMaskIntoConstraints = false

        return lb
    }()


}

Note: We still have to do the actions why it is giving an error.

We will use the stackview again.

let container: UIStackView = {
    let stack = UIStackView(frame: .zero)
    stack.axis = .vertical
    stack.distribution = .fillEqually
    stack.spacing = 8

    stack.translatesAutoresizingMaskIntoConstraints = false

    return stack
}()

The builder will call the addPerson() and addConstraints() function. The first to add the attributes in the UIStackView and the second to place the Auto Layout:

override init(frame: CGRect) {
    super.init(frame: frame)

    self.translatesAutoresizingMaskIntoConstraints = false

    addPerson()
    addConstraints()
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

func addPerson(){

    self.container.addArrangedSubview(imPerson)
    self.container.addArrangedSubview(tfValueFirstPerson)
    self.container.addArrangedSubview(btnSendValue)
    self.container.addArrangedSubview(lbValue)

    self.addSubview(container)
}

func addConstraints(){
    NSLayoutConstraint.activate([

        self.container.bottomAnchor.constraint(equalTo: self.bottomAnchor),
        self.container.topAnchor.constraint(equalTo: self.topAnchor),
        self.container.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        self.container.trailingAnchor.constraint(equalTo: self.trailingAnchor),

    ])
}

The actions will have a problem because we will make three people and we will have to identify them.

let's create the actions:

@objc func editValueFirstPerson(_ textField: UITextField){
    guard let name = textField.accessibilityIdentifier else { return }

    print(name)
}

@objc func setValueFirstPerson(_ button: UIButton){
    guard let name = button.accessibilityIdentifier else { return }
    print(name)


}

Note: As the focus is on the UI. So we will leave the actions here otherwise we could do it another way.

UIAuction.swift

Let's make three people:

import UIKit

class UIAuction: UIView {

    let personOne: Person = {
        let person = Person()
        person.btnSendValue.accessibilityIdentifier = "button1"
        person.tfValueFirstPerson.accessibilityIdentifier = "tfValueFirstPerson1"

        return person
    }()

    let personTwo: Person = {
        let person = Person()
        person.btnSendValue.accessibilityIdentifier = "button2"
        person.tfValueFirstPerson.accessibilityIdentifier = "tfValueFirstPerson2"

        return person
    }()

    let personThree: Person = {
        let person = Person()
        person.btnSendValue.accessibilityIdentifier = "button3"
        person.tfValueFirstPerson.accessibilityIdentifier = "tfValueFirstPerson3"

        return person
    }()

    let auctioneer = Auctioneer()

Note that we identified the UIButton and the UITextField, to find out who clicked the button or wrote in the UITextField.

As there are three people, we will use the UIStackView in the components:

var container: UIStackView = {
    let container = UIStackView(frame: .zero)
    container.axis = .horizontal
    container.distribution = .fillEqually
    container.spacing = 5

    container.translatesAutoresizingMaskIntoConstraints = false

    return container
}()

Let's add the elements in the UIStackView and do the Auto Layout of the UIStackView.

 override init(frame: CGRect) {
        super.init(frame: frame)

        self.backgroundColor = .systemBackground

        self.addUIAuctioneer()
        self.addUIPerson()

    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func addUIPerson(){

        container.addArrangedSubview(personOne)
        container.addArrangedSubview(personTwo)
        container.addArrangedSubview(personThree)

        self.addSubview(container)

        NSLayoutConstraint.activate([

            self.container.centerYAnchor.constraint(equalTo:self.layoutMarginsGuide.centerYAnchor),
            self.container.centerXAnchor.constraint(equalTo:self.layoutMarginsGuide.centerXAnchor),

            self.container.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            self.container.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            self.container.heightAnchor.constraint(equalToConstant: 200)
        ])
    }

Result

GitHub