Custom views with Storyboard

Question

In complex screens (View Controllers) I used to separate the whole thing in smaller pieces (I call them widgets). These widgets consist basically of a MyWidget.h and a MyWidget.m file as well as a MyWidget.xib file, where the root element is a UIView and the MyWidget class is the File Owner of the UIView. In the init of this widget I do a loadNibNamed.

In my View Controller I then do a [[MyWidget alloc] init], which I add to View's Controller main view as a sub view. This, so far, works perfectly.

I'm now wondering, how to do the same with storyboard, because I cannot really start to drag in a UIView somewhere, I always have to start with an UIViewController, which I don't want to.

If there is no possible way doing this with a Storyboard, can I simply do it the old way, by using the Storyboard for my main screens and segues, and use a separate .xib file to define custom views?

Answer 1

Putting the widget/view in a separate .xib file works, and is appropriate especially if you might want to reference that same view from multiple View Controllers.

However, sometimes you do want to see the additional view/widget within the same storyboard, and it is possible. Here's how you do it:

1. Select your view controller in IB (click on the black bar below the view), then drag a UIView from the Object Library into the black bar:

   

2. When a view is in the black bar, it's instantiated like any other view in IB but just isn't added to your view hierarchy until you do so in code. Change the view's class to match your own subclass if necessary:

   

3. You can hook it up to your view controller like you would hook up any other view:

4. The added view shows up in your Document Outline and you can hook up actions and references there too:

   

---

Now, the problem that remains is that you can't actually see the view no matter how many times you try to click or double click, which would defeat the whole purpose of putting it in the same storyboard. Fortunately there are two workarounds that I know of.

The first workaround is to drag the view from the black bar back into your view controller's view, edit it, then drag it back into the black bar once you're done. This is troublesome but reliable.

The other workaround is more finicky, but I prefer it because it lets me see all my views at the same time:

1. Drag a UITableView from the Object Library into your newly added view.

2. Then drag a UITableViewCell into that UITableView.

   

3. Once you do that, your view pops out magically by the side, but you have a UITableView that you don't want. You can either resize that to 0x0, or you can delete it and your UIView will (usually) still stay visible.

4. Occasionally the secondary view will become hidden again in IB. You can repeat the above steps if you deleted the UITableView, or if the UITableView is still in the hierarchy you just need to click on the UITableViewCell and the view will appear again.

The second method works for UIViews but not so well for UIToolbars and is impossible for UIButtons, so the cleanest solution I've found when you need to include lots of different subviews is to attach a single secondary UIView to your view controller as a container that never gets shown, put all your secondary views in there, and use the UITableViewCell trick to make everything visible. I resize my dummy UITableView to 0x0 to make that invisible. Here's a screenshot of how it all looks like together:

Answer 2

If you're just looking to make your view controllers else-where(and not in your story-board), then there's a pretty simple way to accomplish this:

1) Create your CustomViewControllers(abcdController in the code I tried) with their individual xibs as usual.

2) Add a UIViewController(or whatever was the superclass of your CustomViewController) to the story-board.

3) Set the CustomClass to CustomViewController instead of UIViewController as shown here:

4) Finally, in your viewDidLoad, load the custom xib and you're done.

- (void)viewDidLoad
{
    [super viewDidLoad];
    [[NSBundle mainBundle] loadNibNamed:@"abcdController" owner:self options:nil];
    // Do any additional setup after loading the view from its nib.
}

Answer 3

I think you can do something like this to get instance of specific viewcontroller from Storyboard and use view on top of it.

ex:
MyViewController* myViewController = [[UIStoryboard storyboardWithName:@"Main"  bundle:nil] instantiateViewControllerWithIdentifier:@"myViewController"];
UIView* view = myViewController.view; //Get the view from your StoryBoard.

Hope this helps

Thanks Vijay