How to connect Xcode Storyboard's "Simulated Metrics" toolbar to an actual IBOutlet UIToolbar?

Question

I'm hitting issues when attempting to design a UIToolbar Accessory View via an Xcode Storyboard.

When I drag a UIToolbar object to the top margin of my View Controller, the item is added to the left pane and I am able to connect it to my class's IBOutlets. It appears correctly when I run the app.

However, the toolbar is not visible anywhere on the storyboard. I thus lose the visual editing benefits of using Interface Builder in the first place. The bar button items are only visible in the left sidebar.

I have seemingly gotten around being unable to see the views in the IB canvas by using the View Controller's "Simulated Metrics". Now I can see a Toolbar in the Storyboard.

• Attributes Inspector > Simulated Metrics
• Set "Bottom Bar" to value "Opaque Toolbar"
• Drag Bar Button Items into this Simulated Toolbar

However, when I run the app, this "Simulated Toolbar" is not visible.

I am unable to link the simulated toolbar to an IBOutlet via the Connections Inspector

I have not found a way to link the "toolbar object" (first image) to the "simulated toolbar" (second image).

My main goal here is to see a visual representation of the Toolbar in the Storyboard. Is this possible?

Rhesus

Where do you want this toolbar? When you use a UITableViewController, there's no view (other than the table view) to add it to. If you want it at the top of the view, use a UIView controller, and add the toolbar and table view as subviews. – Chloechloette

I'll be using it as an inputAccessoryView toolbar at the bottom of the view. developer.apple.com/library/prerelease/ios/documentation/… – Rhesus

Then use a UIViewController as I suggested. You will be able to see the toolbar, and its buttons in the storyboard. – Chloechloette

This seems to work fine with a UITableViewController except for the no-visual-editing toolbar, so I'd like to keep it that way if possible. I'll switch to a standard VC if there's no other way. – Rhesus

I'd still like to know: is the "simulated toolbar" solely for mockup/decoration in the Storyboard? There's no way to connect it to a "real" toolbar? – Rhesus

Yes, simulated metrics are just what their name implies -- simulated. It's only used for design in IB. You can't connect it to anything. – Chloechloette

I'll note that I am able to connect an IBOutlet UIBarButtonItem to the bar button items I add to the "simulated toolbar". Seems like an oversight if I can't do the same for the toolbar itself. – Rhesus

as @Chloechloette suggesting, use an UIViewController instead. The fact that you want to add a ToolBar means you need more than a simple TableView and therefore should use a UIViewController, it will save you from having to deal with these kinds of issues. – Languet

I've now tried implementing a UIViewController rather than a UITableViewController. Seem to hit the same issue however. Because the toolbar is now a child view of the VC's view, I get the linked crash. Solution would be to remove it from the view, but that leaves me in the same non-IB-toolbar position as the UITableViewController. #24029613 – Rhesus

Answer 1

Simulated metrics are just that -- simulated. They help you to visualize your design, but the artifacts won't necessarily show up at runtime short of some other mechanism. The toolbar that you created in the storyboard is there at runtime but not added to your view. That's why it's up in the header of the scene.

The standard use of UIToolbar is to allow a UINavigationController to manage it. So there is a toggle in InterfaceBuilder's Attributes Inspector pane when a UINavigationController is selected.

From there you can add UIBarButtonItems as needed, and hook them up to IBOutlets in your code. No need to hook up the toolbar to an IBOutlet; you can get it from your UINavigationController's toolbar property at runtime.

See the Apple docs.

Nappy