4.1. Creating a separate View code file

Now let's create a separate file, 'FirstScreenView.swift' in the project.

• Click File -> New -> File...

• Select Cocoa Touch Class and press Next

• The class name should be FirstScreenView.

• Select UIView as for 'Subclass of.' And press Next.

• Press Create.

Setting up the View

FirstScreenView will be our View (front end) code file. We will declare the UI elements in the file like the following:

class FirstScreenView: UIView {

    var labelAppName: UILabel!
    var textFieldMessage: UITextField!
    var labelMood: UILabel!
    var pickerMood: UIPickerView!
    var buttonSubmit: UIButton!
    
}

Now, we will override the init() method to initialize the View. So let's write:

class FirstScreenView: UIView {

    var labelAppName: UILabel!
    var textFieldMessage: UITextField!
    var labelMood: UILabel!
    var pickerMood: UIPickerView!
    var buttonSubmit: UIButton!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }    

}

In the above code, we initialize the FirstScreenView with a rectangular frame. The frame comes from the view where we will patch this screen later.

Now, Xcode will yell at you saying, 'required' initializer 'init(coder:)' must be provided by the subclass of 'UIView'. UIView adopts the NSCoder protocol, so we must override the init() method with the coder parameter. Do not worry about it; just click on the red sign and click fix. That should automatically do the stuff for you. And you can keep the generated method untouched.

Let's start building the View now. We trivially add the following initializing methods like how we did before:

//
//  FirstScreenView.swift
//  App4
//

import UIKit

class FirstScreenView: UIView {

    var labelAppName: UILabel!
    var textFieldMessage: UITextField!
    var labelMood: UILabel!
    var pickerMood: UIPickerView!
    var buttonSubmit: UIButton!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        //MARK: set the background color...
        self.backgroundColor = .white
        
        //MARK: initializing the UI elements and constraints...
        
        setupLabelAppName()
        setupTextFieldMessage()
        setupLabelMood()
        setupPickerMood()
        setupButtonSubmit()
        
    }
    
    //MARK: initializing the UI elements...
    func setupLabelAppName(){
        labelAppName = UILabel()
        labelAppName.text = "App4"
        labelAppName.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(labelAppName)
    }
    func setupTextFieldMessage(){
        textFieldMessage = UITextField()
        textFieldMessage.placeholder = "Put some text..."
        textFieldMessage.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(textFieldMessage)
    }
    func setupLabelMood(){
        labelMood = UILabel()
        labelMood.text = "How are you feeling today?"
        labelMood.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(labelMood)
    }
    func setupPickerMood(){
        pickerMood = UIPickerView()
        pickerMood.isUserInteractionEnabled = true
        pickerMood.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(pickerMood)
    }
    func setupButtonSubmit(){
        buttonSubmit = UIButton(type: .system)
        buttonSubmit.setTitle("Submit", for: .normal)
        buttonSubmit.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(buttonSubmit)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

In the above code, notice that I am setting the 'backgroundColor' to white because it would, by default, populate a black screen without the background color. The init(frame: CGRect) method is used as the initializer of the instance of the FirstScreenView. If you look carefully at the setup methods, we are not saying view.addSubView() like before. This class is already a UIView, so we use self.addSubView() method.

Now let's initialize the constraints:

class FirstScreenView: UIView {
    //codes omitted...    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        //MARK: set the background color...
        self.backgroundColor = .white
        
        //MARK: initializing the UI elements and constraints...
        
        //codes omitted...
        
        initConstraints()
    }
    
    //codes omitted...
    
    //MARK: initializing constraints...
    func initConstraints(){
        NSLayoutConstraint.activate([
            labelAppName.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 32),
            labelAppName.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            textFieldMessage.topAnchor.constraint(equalTo: labelAppName.bottomAnchor, constant: 16),
            textFieldMessage.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            labelMood.topAnchor.constraint(equalTo: textFieldMessage.bottomAnchor, constant: 16),
            labelMood.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            pickerMood.topAnchor.constraint(equalTo: labelMood.bottomAnchor, constant: 16),
            pickerMood.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
            
            buttonSubmit.topAnchor.constraint(equalTo: pickerMood.bottomAnchor, constant: 16),
            buttonSubmit.centerXAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerXAnchor),
        ])
    }
    
    //codes omitted...
    
}

Notice that here to set up the constraints, I am using self instead of view for the same reason, this FirstScreenView is a UIView itself. I am adding children of the self view.