Create custom UIView class with xib in swift

Creating a re-usable UIView class but want to design user interface in xib. So you need to create a xib file for your custom class. Since xcode, does not allow developers to create a xib file while creating a new file having UIView as its base class. So in this tutorial we will learn, how to create a custom UIView class with xib in swift.

Things you will learn

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

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 yo 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 UILable showing no record message or custom message.

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

6: Create an IBOutlet of UILable, 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 doucle click on File’s owner, connect UILable 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 we can create custom UIView class with xib in swift. YOu can download code for this tutorial from below link
https://bit.ly/2vVYfOk