Customized UIView subclass from a xib file

0/5 No votes

Report this app



Loading xib information

Utilizing the contents of a xib file is a reasonably rattling straightforward process to do. You should use the next two strategies to load the contents (aka. the view hierarchy) of the file.

let view = UINib(nibName: "CustomView", bundle: .most important).instantiate(withOwner: nil, choices: nil).first as! UIView

view.body = self.view.bounds

The snippet above will merely instantiate a view object from the xib file. You possibly can have a number of root objects within the view hierarchy, however this time let’s simply decide the primary one and use that. I assume that in 99% of the instances that is what you may want so as to get your customized views. Additionally you possibly can lengthen the UIView object with any of the options above to create a generic view loader. Extra on that later… ๐Ÿ˜Š

This methodology is fairly easy and low-cost, nevertheless there may be one little downside. You possibly can’t get named pointers (shops) for the views, however just for the basis object. In case you are placing design components into your display, that is high-quality, but when it is advisable show dynamic knowledge, you would possibly wish to attain out for the underlying views as effectively. ๐Ÿ˜ƒ

Customized views with shops & actions

So the correct option to load customized views from xib information goes one thing like this:

Inside your customized view object, you instantiate the xib file precisely the identical manner as I informed you proper up right here. ๐Ÿ‘† The one distinction is that you simply needn’t use the item array returned by the strategies, however you must join your view objects via the interface builder, utilizing the File’s Proprietor as a reference level, plus a customized container view outlet, that’ll include all the pieces you want. ๐Ÿคจ

class CustomView: View {

    @IBOutlet weak var containerView: UIView!

    @IBOutlet weak var textLabel: UILabel!

    override func initialize() {

        let identify = String(describing: sort(of: self))
        let nib = UINib(nibName: identify, bundle: .most important)
        nib.instantiate(withOwner: self, choices: nil)

        self.containerView.translatesAutoresizingMaskIntoConstraints = false
            self.containerView.topAnchor.constraint(equalTo: self.topAnchor),
            self.containerView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            self.containerView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            self.containerView.trailingAnchor.constraint(equalTo: self.trailingAnchor),

So the initialize methodology right here is simply loading the nib file with the proprietor of self. After the loading course of completed, your outlet pointers are going to be full of correct values from the xib file. There’s one very last thing that we have to do. Even the views from the xib file are “programmatically” linked to our customized view object, however visually they are not. So now we have so as to add our container view into the view hierarchy. ๐Ÿค

If you wish to use your customized view object, you simply must create a brand new occasion from it – inside a view controller – and at last be happy so as to add it as a subview!

One phrase about bounds, frames aka. springs and struts: f*ckng UGLY! That is two phrases. They’re thought-about as a nasty follow, so please use auto format, I’ve a pleasant tutorial about anchors, they’re wonderful and studying them takes about quarter-hour. ๐Ÿ˜…

class ViewController: UIViewController {

    weak var customView: CustomView!

    override func loadView() {

        let customView = CustomView()
            customView.topAnchor.constraint(equalTo: self.view.topAnchor),
            customView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
            customView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            customView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        self.customView = customView

    override func viewDidLoad() {

        self.customView.textLabel.textual content = "Lorem ipsum"

That is it, now you might have a very working customized UIView object that hundreds a xib file so as to use it is contents. Wasn’t so dangerous, proper? ๐Ÿคช

Yet one more additional factor. In case you do not prefer to deal with views programmatically otherwise you merely do not wish to fiddle with the loadView methodology, simply take away it completely. Subsequent put the @IBOutlet key phrase proper earlier than your customized view class variable. Open your storyboard utilizing IB, then drag & drop a brand new UIView aspect to your controller and join the customized view outlet. It ought to work like magic. ๐Ÿ’ซ

I promised shops and actions within the heading of this part, so let’s speak somewhat bit about IBActions. They work precisely the identical as you’d anticipate them with controllers. You possibly can merely hook-up a button to your customized view and delegate the motion to the customized view class. If you wish to ahead touches or particular actions to a controller, you must use the delegate sample or go together with a easy block. ๐Ÿ˜Ž

Possession and container views

It’s attainable to go away out all of the xib loading mechanism from the view occasion. We are able to create a set of extensions so as to have a pleasant view loader with a customized view class from a xib file. This manner you do not want a container view anymore, additionally the proprietor of the file might be not noted from the sport, it is kind of the identical methodology as reusable cells for tables and collections created by Apple. ๐ŸŽ

You need to know that going this manner you possibly can’t use your default UIView init strategies programmatically anymore, as a result of the xib file will care for the init course of. Additionally in case you are making an attempt to make use of this type of customized views from a storyboard or xib file, you will not have the ability to use your shops, as a result of the correspondig xib of the view class will not be loaded. In any other case in case you are making an attempt to load it manyally you may run into an infinite loop and ultimately your app will crash like hell. ๐Ÿ˜ˆ

import UIKit

extension UINib {
    func instantiate() -> Any? {
        return self.instantiate(withOwner: nil, choices: nil).first

extension UIView {

    static var nib: UINib {
        return UINib(nibName: String(describing: self), bundle: nil)

    static func instantiate(autolayout: Bool = true) -> Self {
        func instantiateUsingNib<T: UIView>(autolayout: Bool) -> T {
            let view = self.nib.instantiate() as! T
            view.translatesAutoresizingMaskIntoConstraints = !autolayout
            return view
        return instantiateUsingNib(autolayout: autolayout)

class CustomView: UIView {

    @IBOutlet weak var textLabel: UILabel!

Identical to with desk or assortment view cells this time you must set your customized view class on the view object, as an alternative of the File’s Proprietor. It’s important to join your shops and principally you are achieved with all the pieces. ๐Ÿคž

To any extent further you must ALWAYS use the instantiate methodology in your customized view object. The excellent news is that the operate is generic, returns the correct occasion sort and it is extremely reusable. Oh, btw. I already talked about the dangerous information… ๐Ÿคช

There’s additionally yet another approach by overriding awakeAfter, however I might not depend on that answer anymore. In a lot of the instances you possibly can merely set the File’s Proprietor to your customized view, and go together with a container, that is a protected wager. When you’ve got particular wants you would possibly want the second method, however please watch out with that. ๐Ÿ˜‰


Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.