How to load a UIView using a nib file created with

Question

I'm trying to do something a bit elaborate, but something that should be possible. So here is a challenge for all you experts out there (this forum is a pack of a lot of you guys :) ).

I'm creating a Questionnaire "component", which I want to load on a NavigationContoller (my QuestionManagerViewController). The "component" is an "empty" UIViewController, which can load different views depending on the question that needs to be answered.

The way I'm doing it is:

1. Create Question1View object as a UIView subclass, defining some IBOutlets.
2. Create (using Interface Builder) the Question1View.xib (HERE IS WHERE MY PROBLEM PROBABLY IS). I set both the UIViewController and the UIView to be of class Question1View.
3. I link the outlets with the view's component (using IB).

4. I override the initWithNib of my QuestionManagerViewController to look like this:

   - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
       if (self = [super initWithNibName:@"Question1View" bundle:nibBundleOrNil]) {
           // Custom initialization
       }
       return self;
   }
   

When I run the code, I'm getting this error:

2009-05-14 15:05:37.152 iMobiDines[17148:20b] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: '-[UIViewController _loadViewFromNibNamed:bundle:] loaded the "Question1View" nib but the view outlet was not set.'

I'm sure there is a way to load the view using the nib file, without needing to create a viewController class.

Answer 1

For Swift user with designable option:

1. Create a custom UIView subclass and a xib files, that we will name after our own class name: in our case MemeView. Inside the Meme View class remember to define it as designable with the @IBDesignable attribute before the class declaration

2. Rember to set the File’s Owner in the xib with our custom UIView subclass in Indetity Inspector panel

   

3. In the xib file now we can build our interface, make constraints, create outlets, actions etc.

4. We need to implement few methods to our custom class to open the xib once initialized

   class XibbedView: UIView {

   weak var nibView: UIView!
   
   override convenience init(frame: CGRect) {
       let nibName = NSStringFromClass(self.dynamicType).componentsSeparatedByString(".").last!
       self.init(nibName: nibName)
   }
   
   required init?(coder aDecoder: NSCoder) {
       super.init(coder: aDecoder)
       let nibName = NSStringFromClass(self.dynamicType).componentsSeparatedByString(".").last!
       let nib = loadNib(nibName)
       nib.frame = bounds
       nib.translatesAutoresizingMaskIntoConstraints = false
       addSubview(nib)
       nibView = nib
       setUpConstraints()
   }
   
   init(nibName: String) {
       super.init(frame: CGRectZero)
       let nibName = NSStringFromClass(self.dynamicType).componentsSeparatedByString(".").last!
       let nib = loadNib(nibName)
       nib.frame = bounds
       nib.translatesAutoresizingMaskIntoConstraints = false
       addSubview(nib)
       nibView = nib
       setUpConstraints()
   }
   
   func setUpConstraints() {
       ["V","H"].forEach { (quote) -> () in
           let format = String(format:"\(quote):|[nibView]|")
           addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(format, options: [], metrics: nil, views: ["nibView" : nibView]))
       }
   }
   
   func loadNib(name: String) -> UIView {
       let bundle = NSBundle(forClass: self.dynamicType)
       let nib = UINib(nibName: name, bundle: bundle)
       let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
   
       return view
   }
   

   }

5. In our custom class we can also define some inspecatable properties to have full control over them from interface builder
   

   @IBDesignable class MemeView: XibbedView {

   @IBInspectable var memeImage: UIImage = UIImage() {
       didSet {
           imageView.image = memeImage
       }
   }
   @IBInspectable var textColor: UIColor = UIColor.whiteColor() {
       didSet {
           label.textColor = textColor
       }
   }
   @IBInspectable var text: String = "" {
       didSet {
           label.text = text
       }
   }
   @IBInspectable var roundedCorners: Bool = false {
       didSet {
           if roundedCorners {
               layer.cornerRadius = 20.0
               clipsToBounds = true
           }
           else {
               layer.cornerRadius = 0.0
               clipsToBounds = false
           }
       }
   }
   
   @IBOutlet weak var label: UILabel!
   @IBOutlet weak var imageView: UIImageView!
   

}

Few examples:

If we need to add more information the view while is displayed inside a storyboard or another xib, to do that we can implement prepareForInterfaceBuilder(), this method will be executed only while opening the file in interface builder. If you did everything I wrote but nothing is working, the is a way to debug a sigle view by adding breakpoints in its implementation.
Here is the views hierarchy.

Hope this helps a full sample can be downloaded here

Answer 2

To programmatically load a view from a nib/xib in Swift 4:

// Load a view from a Nib given a placeholder view subclass
//      Placeholder is an instance of the view to load.  Placeholder is discarded.
//      If no name is provided, the Nib name is the same as the subclass type name
//
public func loadViewFromNib<T>(placeholder placeholderView: T, name givenNibName: String? = nil) -> T {

    let nib = loadNib(givenNibName, placeholder: placeholderView)
    return instantiateView(fromNib: nib, placeholder: placeholderView)
}

// Step 1: Returns a Nib
//
public func loadNib<T>(_ givenNibName: String? = nil, placeholder placeholderView: T) -> UINib {
    //1. Load and unarchive nib file
    let nibName = givenNibName ?? String(describing: type(of: placeholderView))

    let nib = UINib(nibName: nibName, bundle: Bundle.main)
    return nib
}

// Step 2: Instantiate a view given a nib
//
public func instantiateView<T>(fromNib nib: UINib, placeholder placeholderView: T) -> T {
    //1. Get top level objects
    let topLevelObjects = nib.instantiate(withOwner: placeholderView, options: nil)

    //2. Have at least one top level object
    guard let firstObject = topLevelObjects.first else {
        fatalError("\(#function): no top level objects in nib")
    }

    //3. Return instantiated view, placeholderView is not used
    let instantiatedView = firstObject as! T
    return instantiatedView
}

Answer 3

You can also use UIViewController's initWithNibName instead of loadNibNamed. It is simpler, I find.

UIViewController *aViewController = [[UIViewController alloc] initWithNibName:@"MySubView" bundle:nil];
[self.subview addSubview:aViewController.view];
[aViewController release];  // release the VC

Now you just have to create MySubView.xib and MySubView.h/m. In MySubView.xib set the File's Owner class to UIViewController and view class to MySubView.

You can position and size of the subview using the parent xib file.

Answer 4

I had reason to do the same thing (programmatically loading a view from a XIB file), but I needed to do this entirely from the context of a subclass of a subclass of a UIView (i.e. without involving the view controller in any way). To do this I created this utility method:

+ (id) initWithNibName:(NSString *)nibName withSelf:(id)myself {

    NSArray *bundle = [[NSBundle mainBundle] loadNibNamed:nibName
                                                    owner:myself options:nil];
    for (id object in bundle) {
        if ([object isKindOfClass:[myself class]]) {
            return object;
        }
    }  

    return nil;
} 

Then I call it from my subclass' initWithFrame method like so:

- (id)initWithFrame:(CGRect)frame {

    self = [Utilities initWithNibName:@"XIB1" withSelf:self];
    if (self) {
        // Initialization code.
    }
    return self;
}

Posted for general interest; if anyone sees any problems without doing it this way, please let me know.

Answer 5

I made a category that I like:

UIView+NibInitializer.h

#import <UIKit/UIKit.h>

@interface UIView (NibInitializer)
- (instancetype)initWithNibNamed:(NSString *)nibNameOrNil;
@end

UIView+NibInitializer.m

#import "UIView+NibInitializer.h"

@implementation UIView (NibInitializer)

- (instancetype)initWithNibNamed:(NSString *)nibNameOrNil
{
    if (!nibNameOrNil) {
        nibNameOrNil = NSStringFromClass([self class]);
    }
    NSArray *viewsInNib = [[NSBundle mainBundle] loadNibNamed:nibNameOrNil
                                                        owner:self
                                                      options:nil];
    for (id view in viewsInNib) {
        if ([view isKindOfClass:[self class]]) {
            self = view;
            break;
        }
    }
    return self;
}

@end

Then, call like this:

MyCustomView *myCustomView = [[MyCustomView alloc] initWithNibNamed:nil];

Use a nib name if your nib is named something other than the name of your class.

To override it in your subclasses for additional behavior, it could look like this:

- (instancetype)initWithNibNamed:(NSString *)nibNameOrNil
{
    self = [super initWithNibNamed:nibNameOrNil];
    if (self) {
        self.layer.cornerRadius = CGRectGetHeight(self.bounds) / 2.0;
    }
    return self;
}

Answer 6

There is also an easier way to access the view instead of dealing with the nib as an array.

1) Create a custom View subclass with any outlets that you want to have access to later. --MyView

2) in the UIViewController that you want to load and handle the nib, create an IBOutlet property that will hold the loaded nib's view, for instance

in MyViewController (a UIViewController subclass)

  @property (nonatomic, retain) IBOutlet UIView *myViewFromNib;

(dont forget to synthesize it and release it in your .m file)

3) open your nib (we'll call it 'myViewNib.xib') in IB, set you file's Owner to MyViewController

4) now connect your file's Owner outlet myViewFromNib to the main view in the nib.

5) Now in MyViewController, write the following line:

[[NSBundle mainBundle] loadNibNamed:@"myViewNib" owner:self options:nil];

Now as soon as you do that, calling your property "self.myViewFromNib" will give you access to the view from your nib!