Copied a View to a project with Navigation Controller - Frame for “Image View” will be different at run time

Question

Probably a simple question for experienced Xcode 5 interface builder users, but it is difficult to find the answer on Google:

I have an app for iPhone, which doesn't use a navigation controller (here fullscreen):

The view scene on the very right side has an image view and 5 labels underneath it - to display user details:

Then I have created another iPhone app and copied that "details" view to it (here fullscreen):

And now a warning is shown by Xcode 5.0.2:

Frame for "Image View" will be different at run time.

Is it because some space on the top of the view will be occupied by the navigation bar?

And how to fix it please?

I've tried clicking the [-o-] icon, but instead of resolving my layout issue it has messed the whole layout (the labels jumped to the left).

Also I've tried setting checkboxes on the right side in the Xcode Attributes Inspector, but haven't be able to find any good combination there (and I am not sure what "inferred" means in Xcode context).

UPDATE:

Ossir's suggestion has worked for me, thank you.

I'm posting a new screenshot (here fullscreen) in case anybody have more improvement suggestions:

Answer 1

Select the UIImageView and click [-o-] icon, then choose Reset To Suggested Constraints menu item. Simulated metrics section does nothing in the runtime, it only us to figure out how layout will look like before compiling.

Also there is one more (better) approach, but you have to analyse what constraints UIImageView has and change them accordingly for new layout (with added nav bar). You can try to post screenshot with those constraints here, so we can help you to figure out what happened. Go to Size Inspector in right panel and show us Constraints section.

UPDATE

Your constraints force UIImageView to have the same horizontal align as labels below have and the same width. Plus you have constraints for fixed vertical space from the topmost label and navigation bar, width of UIImageView depends on available space between nav bar and labels. I think it's good solution for current layout (without scrolling), because everything will fit into the screen for both 3.5" and 4" inch displays. In case you want different behaviour let me know in a comments.

Answer 2

I found that unchecking the Adjust Scroll View Insets checkbox for the navigation controller in question cleared the warning

Answer 3

Just faced the same warnings in Xcode version 8.0 Swift 3.0. The warning went away after I checked and unchecked the "Adjust Scroll View Insets" option. Note: they were not checked at the start like in the comment above, so it may clarify for those who have this same warning.

Check/Uncheck the "Adjust Scroll View Insets" option.

Answer 4

It looks like you run your app on a 3.5" screen while you've been designing it for a 4" screen in interface builder. You should set all missing constraints so that autolayout 'knows' how to lay out your image view and labels.

I would set a fixed height for the labels and a variable height for the image view. Then set the content mode of your image view to "aspect fill" (note that in this case you'll loose a part of the image instead of having gray stripes on the left and right sides).