Step-by-Step Guide to Design Custom UIView with XIB in Swift for UI Flexibility

Need to create a re-usable UIView class for common screens in your app, but want to design user interface in xib. To achieve this you need to create a xib file for your custom UIView class. Since xcode, does not allow developers to create a xib file, while creating a new file having UIView as its base class, question arises how can we achieve this. So in this tutorial we will learn, how to create a custom UIView class with xib in swift so that it can be re-usable throughout the app.

Things you will learn

• Create a custom class inheriting UIView class with interface designed inside a sparate xib file
• Using the custom class as a re-usable component/screen
• Use custom class both ways (programmatically and inside xib of our UIViewcontrollers or storyboards)

Video link:

Creating custom UIView class with xib

1: Create new file and select Cocoa Touch class, named it NoRecordView, on next step select UIView under subclass of option drop-down.

2: To create xib for NoRecordView class, create a new file. Select View listed under User Interface section. Named it similar to the swift file. i.e. NoRecordView.

3: Open NoRecordView.xib and change File’s Owner class name. So that we can connect IBOutlet declared in our NoRecordView.swift file with our user-interface elements.

4: For this tutorial, we will create our custom view with an icon having search image and UILabel showing no record message or some custom message.

5: Open NoRecordView.swift and add initWithFrame and initWithCoder initializers.

6: Create an IBOutlet of UILabel, so that we can display no record message to user. Next, create a function and name it commonInit. Inside this function, we will load nib named NoRecordView and add it as subview to our custom class NoRecordView.

class NoRecordView: UIView {

    @IBOutlet weak var lblNoRecord:UILabel!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    
    func commonInit(){
        let viewFromXib = Bundle.main.loadNibNamed("NoRecordView", owner: self, options: nil)![0] as! UIView
        viewFromXib.frame = self.bounds
        viewFromXib.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
        addSubview(viewFromXib)
    }

}

Binding IBOutlet with UILable in NoRecordView.xib

Open NoRecordView.xib file and double click on File’s owner, connect UILabel outlet.

Using custom UIView class programmatically

In ViewController.swift inside viewDidLoad function, create an instance of NoRecordView and give it a frame then finally add it as a subview.

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let norecordView = NoRecordView(frame: CGRect(x: 20.0, y: 100.0, width: 300.0, height: 200.0))
        norecordView.lblNoRecord.text = "No Records programmatically"
        self.view.addSubview(norecordView)
     }

Using custom UIView class in UIStoryBoard

Open Main.storyboard and inside ViewController view, drag a UIView control. Change its class to NoRecordView in Identity Inspector. Give it constraint, and connect it with ViewController.swift through IBOutlet. Set text to UILable.

class ViewController: UIViewController {
    @IBOutlet weak var noRecordView: NoRecordView!
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let norecordView = NoRecordView(frame: CGRect(x: 20.0, y: 100.0, width: 300.0, height: 200.0))
        norecordView.lblNoRecord.text = "No Records programmatically"
        self.view.addSubview(norecordView)
        
        noRecordView.lblNoRecord.text = "No Records from Storyboard"
    }
}

Run your app, and you will see that your custom view is added to the ViewController’s view.

Where to go from here

In this tutorial, we learned how can we create a custom UIView class with xib in swift and re-use it throughout the iOS app. You can download code for this tutorial from below link
https://bit.ly/2vVYfOk