Adding navigationItem.titleView in storyboard is failing

Question

I can add a titleView to my navigationItem very easily in code:

UIImageView *navImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"nav_logo"]];
UIView *titleView = [[UIView alloc] initWithFrame:navImageView.frame];
[titleView addSubview:navImageView];
self.navigationItem.titleView = titleView;

However, I'm trying to do this within my storyboard, and am failing miserably.

Here's what I've done:

1. Drag and drop a UIView on top of my VC's Navigation Item.
2. Drag and drop a UIImageView on top of the UIView
3. Add width/height/leading/top constraints
4. Set the image property of the UIImageView

I also set the background of my UIView to red (well ok, more like a burnt orange) to illustrate the problem.

Here's how things render out:

I'm surprised this has been so difficult. Any ideas?

Watercress

Answer 1

In the storyboard interface builder

• Select your view controller
• In the the attribute inspector (⌘⌥ 4), under "Simulated Metrics", for the "Top Bar" selector, choose one of the Navigation Bars
• Then you should be able to drag a UIView over the title on the Storyboard
• You can change the "Top Bar" setting back to "Inferred" if you'd like

Here is an image of the storyboard after dragging a UIView over the title:

Weizmann

Answer 2

It is impossible to have autolayout constraints for navigation items in a storyboard. I believe you are actually dragging the views onto the actual view controller. You can only drag in barButtonItems into the navigationItem.

An alternative option is to

1. Create the view in a separate xib without using autolayout
2. Load the xib in code
3. setTranslatesAutoresizingMaskIntoConstraints to true
4. Assign the titleView to the view

From my experience, using autolayout with any views in the navigationBar does not work well and leads to unexpected results. For example, I ran into errors where presenting a UIActivityViewController caused unexpected constraints to be added to the navigationItem's titleView.

Before:

After presenting UIActivityViewController and skipping step 3:

Malleolus

Answer 3

For those who found yourself fighting with problem of adding custom view or UIButton inside UIBarButtonItem in Xcode 8 here is the solution: Xcode accepts dragging only in controller's view property now (Xcode 7 allowed to drag directly to UINavigationItem). If you delete controller's view, it will allow you to drag items onto the navigation bar. So create new empty navigation controller, remove main view inside root view controller, drag items onto the navigation bar, copy this navigation item (not the bar itself) and paste it to your target controller, it will replace your old navigation items. After remove that empty controller. PROFIT!

It seems apple Xcode team produce new quests for developers with even more passion than their main product.

Ligniform

Answer 4

You should drag a UIView to the navigationItme first and then drag the imageView onto the view. The titleView of navigationItem in storyboard doesn't accept object which is a subclass of UIView. It only accept UIView class.

Add the imageView onto a view

Slaughter

Answer 5

This weird problem has a relationship with size classes.

In fact, I had the same problem and the solution was:

1. Set the size class for your storyboard to Any,Any
2. Drag and drop the view into the navigation bar item.
3. Reset the size class of your storyboard.

And everything works like a charm!

I think adding the view to the navigation item with a size class not set to Any,Any is causing the problem.

Hope this works for everybody because this really was awful :[ .

Schoenfeld