iOS Swift 4 Coding

In some situations there can be a need for a custom view in your iOS app. This can be a set of views, like a label and a text field or anything else that you need to use multiple times.

The steps below explain how to create a custom view in Xcode with Swift 4:

1. Create a Swift file for your new UIView
   1. In the Project Navigator, click on “New File”
   2. Select “Cocoa Touch Class”
   3. Click “Next”
   4. In the “class” field fill in a proper name. (we choose: “FancyLabel”)
   5. In the “subclass of” field select “UIView”.
   6. Click “Next” and then “Create”
2. Create a xib for the layout of your new custom view
   1. In the Project Navigator, click on “New File”
   2. Under the User Interface category, select “View”.
   3. Click “Next”
   4. In the “Save As” field fill in a proper name. (We choose “FancyView” again)
   5. Click “Create”
3. Create the layout of the view
   1. Click on the newly create .xib file
   2. On the middle of your Xcode window, the visual layout appears
   3. Go to the “Attributes inspector” and set the value of the “Size” field to “Freeform”
   4. Place the controls you like.
4. Link the xib to the Swift file
   1. Select “File’s Owner” in the editor area (left top)
   2. At the right, go to the “Attributes Inspector”.
   3. In the “Class”-field select the Swift file you created within the first set of steps (we choose: “FancyView”)
5. Now change the middle UI in a way that both the xib file and the swift file are shown:
   1. Click on the “Show Assistant Editor”-button
   2. Click on the .swift file. It will appear on the left side of the editor.
   3. No press the “Option”-key on your keyboard and click on the .xib file. It will appear on the right side of the editor.
   4. Press the “Control”-key on your keyboard and keep the mouse button pressed on “View” in the xib file editor.
   5. Drag the appearing line to the top of the xcode file just below:

   6. class FancyView: UIView {
      ...

   7. Set as name “view”. This will result in the following code:

   8. class FancyView: UIView {
          @IBOutlet var view: UIView!
          /*
          // Only override draw() if you perform custom drawing.
          // An empty implementation adversely affects performance during animation.
          override func draw(_ rect: CGRect) {
              // Drawing code
          }
          */
      
      }

   9. Now add the following code so that the full code will look like this:

   10. import UIKit
       
       class FancyView: UIView {
           @IBOutlet var view: UIView!
           /*
           // Only override draw() if you perform custom drawing.
           // An empty implementation adversely affects performance during animation.
           override func draw(_ rect: CGRect) {
               // Drawing code
           }
           */
           
           required init?(coder aDecoder: NSCoder) {
               super.init(coder: aDecoder)
               commonInit()
           }
           
           func commonInit() {
               Bundle.main.loadNibNamed("FancyView", owner: self, options: nil)
               view.fixInView(self)
           }
       }
       
       extension UIView
       {
           func fixInView(_ container: UIView!) -> Void{
               self.translatesAutoresizingMaskIntoConstraints = false;
               self.frame = container.frame;
               container.addSubview(self);
               NSLayoutConstraint(item: self, attribute: .leading, relatedBy: .equal, toItem: container, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
               NSLayoutConstraint(item: self, attribute: .trailing, relatedBy: .equal, toItem: container, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
               NSLayoutConstraint(item: self, attribute: .top, relatedBy: .equal, toItem: container, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
               NSLayoutConstraint(item: self, attribute: .bottom, relatedBy: .equal, toItem: container, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
           }
       }
       

6. Place your new custom view at any other view
   1. Go to the View or ViewController where you want to place your new custom view
   2. Open the view library (Command-Shift-L).
   3. Search for the common “UIView”.
   4. Place the UIView.
   5. Select the UIView and go to the “Identity Inspector”.
   6. In the field “Class” fill in the name of your custom view (in our case “FancyView”)
7. You are ready. If you run the app, you will see your view appear.