Multiple XIBs embeded in UIStackViews displayed in one StoryBoard with UIStackViews - ios

Question

I am using multiple XIBs/Storyboards to build my application.
I have the views laid out in the XIBs. Some have UIStackView to help organize the layout.
My main storyboard has two views embedded in a UIStackView that pulls in those views that are created with the XIBs.
Nothing will display correctly. The views are mis-sized or do not show up at all, despite displaying properly in interface builder.
My suspicion is the views are being displayed, BEFORE they are fully loaded into the view causing the frames to be different sizes.
I've been told the best practice is to give views their own Storyboard/XIB for better merging, maintenance etc... So that is what I am trying to learn.
Does anyone know the proper way to accomplish what I am doing?
Here is what I am doing:
ViewController
#import "OrangeView.h"
#import "GreenView.h"
#interface ViewController () {
OrangeView *ov;
GreenView *gv;
}
#property (weak, nonatomic) IBOutlet UIView *viewOrange;
#property (weak, nonatomic) IBOutlet UIView *viewGreen;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//Load Orange View
ov = [[OrangeView alloc] initWithFrame:_viewOrange.frame];
[_viewOrange addSubview:ov];
//Load GreenView
gv = [[GreenView alloc] initWithFrame:_viewGreen.frame];
[_viewGreen addSubview:gv];
}
Main Storyboard
OrangeView
GreenView (with multiple stackviews)
Overview

Answer 1

The contents of a .xib file are not "linked" to the class. That is, when you instantiate the class, that does not - by itself - also load the views and subviews you've laid out in the xib.
There are a couple ways to go about it. One method is to include the "load the elements" code inside your view class. That allows a more "conventional" approach of load/create a view instance, add as subview, set parameters (frame or constraints), etc.
Here is an example of subclassing UIView with the "xib-load" functions, and then making your actual class a sub-class of this "base":
//
// XIBViewBase.h
//
#import <UIKit/UIKit.h>
#interface XIBViewBase : UIView
#end
//
// XIBViewBase.m
//
#import "XIBViewBase.h"
#implementation XIBViewBase
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self xibSetup];
}
return self;
}
- (id)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self) {
[self xibSetup];
}
return self;
}
- (void)awakeFromNib {
[super awakeFromNib];
[self xibSetup];
}
- (void)xibSetup {
// make sure we don't add the subviews more than once
if (!self.subviews.count) {
UIView *view = [self loadFromXIB];
view.frame = self.bounds;
view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self addSubview:view];
[self sendSubviewToBack:view];
}
}
- (UIView *)loadFromXIB {
// Note: the .xib file MUST be named the same as the class for this to work
NSString *className = NSStringFromClass([self class]);
NSBundle *bundle = [NSBundle bundleForClass:[self class]];
UINib *nib = [UINib nibWithNibName:className bundle:bundle];
UIView *v = [nib instantiateWithOwner:self options:nil].firstObject;
return v;
}
#end
I put together an example of this (using your target) that you can take a look at. Might help you get a handle on it:
https://github.com/DonMag/SimpleXIB