Layout issues after updating to Xcode 8

IosXcodeAutolayoutXcode8Ios10

Ios Problem Overview


Here is a before and after of one of my screens after I upgraded to Xcode 8.
All I did was open up my main.storyboard and from there, I built and ran my app on my phone.
In my version control, I can see Xcode is doing a lot of changes to my main.storyboard just from me opening it.
Whenever I delete those changes, I can see what I use to see in Xcode 7.3.1.
But, as soon as I re-open interface builder with my storyboard, I see those changes come back into place.

Is there something I can do here?

Before Xcode 8

enter image description here

After update to Xcode 8

enter image description here

Ios Solutions


Solution 1 - Ios

I had a similar problem with tableview images not appearing once I converted the storyboard file to be Xcode8 compatible. This looks like a bug with Xcode8, so until a bug fix is released, here is a work around:

  1. Open your storyboard in Xcode 8 and choose an initial device view. Make changes as you normally would.
  2. Once you have completed your changes, select the storyboard -> File Inspector -> Opens in -> Select 'Xcode 7.x'.

enter image description here

  1. Select 'Save and Close' when prompted
  2. Your storyboard changes will be saved, and your storyboard will function as it did pre-Xcode8.

When you need to make other changes to the storyboard file, follow these steps again.

Solution 2 - Ios

XIB or Storyboard set default as older version 7.x and Save and Close. Temporary solution, but works. Don't open again once you have done Save and Close. Otherwise again need follow same steps from begin.enter image description here

Solution 3 - Ios

Eh the same problem. I partially managed to fix it in the following way (for Xcode Version 8.1 (8B62))

In the document outline of Storyboard, I clicked on each scene which had the yellow arrow indicating some layout issues (Number 1 on the screenshot)

After this, for each problematic scene, I had to click on "Update Frames" small icon (Number 2 on the screenshot) which fixed all the layout issues per scene.

enter image description here

However one scene in my case was still in crying state after transition from Xcode7 to Xcode8. I had to fix it manually by adjusting constraints or adding missing constraints.

Phew, not nice surprise of XCode8 and Storyboards. If you used AppCode editor, you won't have such problem, since it doesn't support Storyboards ;P

Good luck!

Solution 4 - Ios

Xcode 8.1 Beta 2 resolves this issue. Please check this download link

https://developer.apple.com/download/

Solution 5 - Ios

Please follow the threads for any possible solution:(I believe it happens to many developers).
Xcode 8 GM seed Storyboard issue
Xcode 8 - Previous storyboards getting distorted

(I used anyH anyW width 600) When Xcode updated to Xcode 8 it changed all my ViewControllers size. As a result all the layout was distorted.
Currently I see only 3 solution for the issue (I wouldn't trust on waiting for fix soon).

1.Go for each Viewcontroller and fix it it by Update Frames .

2.Go to the main ViewController Size Inspector -> Freeform -> 600 as most of the controllers are inferred it will change the size for all of them.(Be careful on the impact of new Features Apple my want to introduce).

3.Discard the changes in git for the storyboard (I would't suggest it because Apple also inserted some updates which may be important to Xcode).

Additional link for the new AutoLayout features in Xcode 8 (WWDC16): Making Apps Adaptive, Part 1

Solution 6 - Ios

In my case works solutions suggested by Akhil Kateja and I also need to reset Width and Height of the main view:

1) Set View Size to Free Form

enter image description here

2) Reset Width and Height of the view to the original size:

enter image description here

Finally save and you are done.

Solution 7 - Ios

For me the solution was simply to click on the UIViewController having issues and then Editor > Resolve Auto Layout Issues > All Views In ... > Updates Frames

It re-arranged the views to fit the existing constraints based on the newly selected default view (iPhone 7 in my case).

Also note: if you get a Navigation Bar Misplaced View warning like I did, simply select the UINavigationController/UIViewController and then Attributes Inspector > Bar Visibility > Shows Navigation Bar - toggle it OFF and then ON again.

Solution 8 - Ios

Setting View Size to Freeform from Inferred worked for me. It can be found under the heading Simulated Metrics in Attributes Inspector.

Solution 9 - Ios

I had the same problem and I've solved it by force update the controller's view constraints. Put the following code in your viewDidLoad() function

self.view.layoutIfNeeded()

Solution 10 - Ios

I selected each controller and clicked on "Update Frames" and it fixed the layout.

Solution 11 - Ios

The answer from @david-truong (https://stackoverflow.com/a/39589860/1407528) is not working in my case, so if you are in my same situation, try this:

In the case you have all your devices updated to iOS 10+, this version of Xcode will not recognize those devices as compatible devices. So, try with this trick:

  • Go to: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport
  • Copy the folders related with iOS 10 or 10.1 to: /Applications/Xcode 7.3.1.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport
  • Open the project with Xcode 7.3.1 (restart Xcode if you have it already opened)
  • Select your connected iOS 10+ device
  • Push Run

Note: New features like Swift will not be available using this trick, but you should be able to load and build your project.

Solution 12 - Ios

Hope this will help

When i updated Xcode from 7.3 to Xcode 8 and run the app, some of the views are perfectly displayed but some are distorted.Then, i checked the nib file and it prompted me to choose particular device size and then show the nib according to that device size which is offcourse not Any-Any(Xcode 7.3). So all the nibs file are not displaying in a correct way.

Solution work form me :- press the yellow arrow like showing in image below

enter image description here

it will prompt a pop up which show options like

enter image description here

choose Update Frames with Apply to all views in container checked.it will solved around 90% of distorted UI and rest of the auto-layout constraints problem can be solved manually.

Solution 13 - Ios

I fixed the issue using the Xcode Version 7.3.1 you can download the .dmg file from apple developer portal. I used the Autoresizing in every app and it works great for me. i will update to Xcode 8 only if they can fix this bug.

Download it here: https://developer.apple.com/services-account/download?path=/Developer_Tools/Xcode_7.3.1/Xcode_7.3.1.dmg

Solution 14 - Ios

To fix a similar problem, I configured the xib as Freeform (not Inferred) AND saved xib file as Xcode 7.x compatible. Both steps were required in my case. I hope that helps!

Solution 15 - Ios

I notice one new button in Xcode 8.2, (check the orange circle in the image). It will give you some help.

Steps:

  1. Open the storyboard and select any device you want
  2. Just select the View Controller
  3. Click the mentioned button (as in Image)
  4. It will updates the frame for that view controller and you can proceed with it

I didn't found any better solution than this. Please reply if found one.

IB screenshot

Solution 16 - Ios

update constraints and layout subviews in viewdidload solves the problem

- (void) viewDidLoad {
        [self.view updateConstraints];
        [self.view layoutSubviews];
        [super viewDidLoad];
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2726072View Question on Stackoverflow
Solution 1 - IosDavid TView Answer on Stackoverflow
Solution 2 - IosBhavesh KumbhaniView Answer on Stackoverflow
Solution 3 - IosTekMiView Answer on Stackoverflow
Solution 4 - IosManiganda saravananView Answer on Stackoverflow
Solution 5 - IosMike.RView Answer on Stackoverflow
Solution 6 - Ioschristian miniView Answer on Stackoverflow
Solution 7 - IoswhycodewhyyyyView Answer on Stackoverflow
Solution 8 - IosAkhil KatejaView Answer on Stackoverflow
Solution 9 - IosBill PanagiotopoulosView Answer on Stackoverflow
Solution 10 - IosMayckon BarbosaView Answer on Stackoverflow
Solution 11 - IosgoeView Answer on Stackoverflow
Solution 12 - IosAnurag BhakuniView Answer on Stackoverflow
Solution 13 - IosKoppiView Answer on Stackoverflow
Solution 14 - IosJuan SagastiView Answer on Stackoverflow
Solution 15 - IosShahul HasanView Answer on Stackoverflow
Solution 16 - IoskarthikPrabhu AlaguView Answer on Stackoverflow