Layout issues after updating to Xcode 8

Question

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

After update to Xcode 8

Try opening up XCode 8 again with a fresh source (stash any changes it's made previously). Now, when you open up the storyboard, highlight all of your UI items and click "Update Frames". This might fix your problem. — d1str0, Sep 15 '16 at 17:29
Could you file a bug at bugreport.apple.com and attach the storyboard for which this is happening? We would like to analyze this further. — Quinn Taylor, Sep 15 '16 at 20:10
I have the exact same problem. After opening my storyboard in Xcode8 and accepting the "Choose an initial device view" Dialog, everyting is acting strange. When I update all frames, the IB looks good, but after building, the app is totally broken. Tested it with 4 apps. — Cherrypig, Sep 17 '16 at 15:29
@QuinnTaylor I'm having a similar problem, after Xcode 8 converts my storyboard the UIImageViews in UITableViews do not show any content although their outline is visible in `Debug View Hierarchy`. Other objects of the same class that are in UICollectionViews are not the affected. — Manuel, Sep 17 '16 at 19:16
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. — Bhavesh Kumbhani, Sep 23 '16 at 05:48
My Autolayout is totally broken in storyboards , I don't even sure what to do . — Mike.R, Sep 25 '16 at 21:19
This appears to be fixed as of Xcode 8 beta 3 (according to the release notes it's fixed in beta 2 but I haven't verified that). — Ethan Holshouser, Oct 12 '16 at 01:04
@QuinnTaylor our app, with a massive user base, has this issue in the new version we released yesterday. For some reason, it only exists on my environment, but my coworkers don't have this issue on their versions of xcode8.0. We resubmitted and put in an expedite request with the fix. This created significant issues for our users- they weren't able to view their security cameras! Is there a fix for this in a version of xcode that can be used to deploy to the app store? (beta versions can't be used to deploy) If not, I can't push updates to the app store from my computer! — jungledev, Nov 03 '16 at 18:10
I have backup, So, I just open my backup in Xcode 7.3 open Storyboard as Source code copy and paste it in my latest code. That's It. It work for me. — Mihir Oza, Apr 24 '17 at 12:19

score 111 · Answer 1 · answered Sep 20 '16 at 09:01

111

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:

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

Select 'Save and Close' when prompted
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.

answered Sep 20 '16 at 09:01

David T

2,724
1
17
27

Wow +1 for this for sure. I struggled with this in iOS 10 within my TodayExtension. It wasn't until I narrowed things down, analyzing the git diffs, that I saw suspect storyboard xml edits being added by Xcode 8. After saving the storyboard document for Xcode 7 (after making my edits), I can now build and ship using Xcode 8 for iOS 10. Thanks. – John Erck Sep 21 '16 at 18:09
It sure looks a bug. Saving as Opens in Xcode 7.x worked for me as a temporary workaround. – Steve A Sep 21 '16 at 19:54
i spent past 3 days on fixing all the broken layout from place to place in Xcode8 until i found this post. i probably should trust people like you guys more than Apple. can't believe this wasted so much of my time. Thank you very much David for this! – Xu Yin Sep 23 '16 at 21:17
@XuYin Should we do this for every storyboard? I mean what if I have another storyboard in my project? What about Xib files? should I do it for those as well? – mfaani Sep 27 '16 at 20:00
@Honey i didn't do that on storyboard, but i did on every xib file that i have issue with. but i think you might want to try it on storyboard as well if you see strange layout issue. since that fix will only take like 5 seconds. and after rebuild the app, you should be able to see the fix very quickly. – Xu Yin Sep 28 '16 at 19:25
well if you have a huge project this could be tiresome, aside from that I'm not sure if Apple won't fix the issue itself or not and later we would have to undo what we did – mfaani Sep 28 '16 at 19:33
I have the same issue. But this solution is not working for me. :( – itzmebibin Oct 03 '16 at 14:06
This doesn't help because I need to work on the file. All this does is save the file for backwards compatibility. It doesn't allow the xib to be edited in Xcode 8. – jowie Oct 03 '16 at 15:43
@jowie You can still work on the file and make changes to the storyboard file. Just make sure you follow Step 2 when you've finished making your changes. – David T Oct 04 '16 at 03:07
@DavidTruong It's a XIB file not a storyboard, but I can't make changes to the initial file because all the layout is broken and "update frames" is greyed out. I need to work on the file as it was in Xcode 7, but it won't let me. – jowie Oct 04 '16 at 07:56
I did this changes following the steps but when I open it on xCode 7 the screen size of each viewcontroller in the storyboard is wrong, the size & form factor is 3,5" instead 4". – jcamacho Oct 04 '16 at 09:31
Solution works out for me, but anyone knows what Apple thinks about that? is there any official bug report? – Danpe Oct 06 '16 at 12:33
This works for me. Hopefully Apple fixes this soon. I can live with the issue for now and I only need to set the option back to Xcode 7 when distributing or giving a demo. It can stay at 8 while developing – ar34z Oct 07 '16 at 08:49
Is incredible, why XCode 8 has to do this?? After updating to XCode 8 and have to choose an intial view for only watching my XIBs, almost all of my views were messed up. This is the solution that works for me, having to save all of them with Open in XCode 7. – Wonton Oct 22 '16 at 22:41
Not working too. Xcode 8 is always asking to convert or exit :( – chrilith Oct 23 '16 at 08:24
Worked for me. Thanks – mwaqas01 Oct 26 '16 at 12:11
Whenever I try to switch to the Xcode 7 layout, I save & close, but when I open my storyboard again it says "Choose an initial review view" and after choosing a view it automatically switches back to the Xcode 8 option.. how could I solve this ? – vbuzze Jan 20 '17 at 10:41
I tried this method on my storyboard but i didn't find any changes. My views are missing. – Ramakrishna Jan 24 '17 at 13:14
After change `latest Xcode` to `7.x` and then choose `Choose an initial device view` then Xcode auto switch `latest Xcode` to `8.0` again. Anyone have the same problem, please help me? – lee May 29 '17 at 02:18

score 14 · Answer 2 · answered Sep 23 '16 at 05:55

14

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.

answered Sep 23 '16 at 05:55

Bhavesh Kumbhani

555
4
11

6

This doesn't help because I need to work on the file. All this does is save the file for backwards compatibility. It doesn't allow the xib to be edited in Xcode 8. – jowie Oct 03 '16 at 15:42
i am doing this but again when i am selecting xib file in dropdown it is showing xcode 8.0 only... – jayant rawat Nov 15 '16 at 06:29

score 8 · Answer 3 · answered Nov 03 '16 at 20:34

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.

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!

score 7 · Answer 4 · answered Oct 10 '16 at 08:34

7

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

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

answered Oct 10 '16 at 08:34

Maniganda saravanan

2,188
1
19
35

4

I dont think so... :( – Vaibhav Saran Oct 25 '16 at 05:38
Xcode 8.3.2 get the same issue. Fck Xcode and Apple :( – lee May 26 '17 at 11:33

score 6 · Answer 5 · answered Sep 26 '16 at 09:56

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

Option 1 is the most sensible and it worked for me. As Mike.R notes, be careful of trying to 'trick' XCode into fixing things as more trouble down the track is inevitable. — arcady bob, Sep 27 '16 at 06:05
I used option 1 as well (I think its more safe). But its time consuming. — Mike.R, Sep 27 '16 at 11:12

christian mini · Answer 6 · 2016-10-05T15:57:16.447

5

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

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

Finally save and you are done.

edited Oct 05 '16 at 15:57

answered Oct 05 '16 at 15:03

christian mini

1,662
20
39

score 4 · Answer 7 · answered Jan 08 '17 at 18:47

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.

score 3 · Answer 8 · answered Sep 30 '16 at 21:26

3

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

answered Sep 30 '16 at 21:26

Akhil Kateja

139
1
4

score 3 · Answer 9 · answered Oct 03 '16 at 16:40

3

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()

answered Oct 03 '16 at 16:40

Bill Panagiotopoulos

216
2
6

1

Cheers Bill! that 'layoutIfNeeded' worked for me! (After trying everything else for hours..) – Ethan Halprin Oct 16 '16 at 12:33

score 3 · Answer 10 · answered Oct 07 '16 at 20:48

3

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

answered Oct 07 '16 at 20:48

Mayckon Barbosa

91
1
12

score 3 · Answer 11 · edited May 23 '17 at 10:31

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:

Download the previous Xcode 7.3.1 from here: https://developer.apple.com/download/more/
Undo all your changes (if you have a code manager like git. If you don't, you should 'https://githowto.com/')
Open the project with Xcode 7.3.1.

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.

score 3 · Answer 12 · answered Dec 01 '16 at 05:23

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

it will prompt a pop up which show options like

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.

This might also spoil Layouts. IMHO this has to be done with much care, one view at a time and checking if things worked out before continuing. — brainray, Jan 11 '17 at 12:09
yes, off-course you need to consume some time for it and this solution might help you in a longer run as when you want to update some of ur UI. — Anurag Bhakuni, Jan 12 '17 at 05:24

score 1 · Answer 13 · edited Oct 23 '16 at 13:26

1

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

edited Oct 23 '16 at 13:26

Bhargav Rao

50,140
28
121
140

answered Oct 23 '16 at 13:24

Koppi

37
7

This solution is useless if you want to support iOS 10 – jungledev Nov 03 '16 at 18:14

score 1 · Answer 14 · answered Oct 27 '16 at 16:05

1

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!

answered Oct 27 '16 at 16:05

Juan Sagasti

326
2
5

score 1 · Answer 15 · edited Jun 08 '18 at 06:31

1

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.

edited Jun 08 '18 at 06:31

shim

9,289
12
69
108

answered Jan 24 '17 at 11:47

Shahul Hasan

300
3
2

Nothing got happen. – Muju May 02 '17 at 08:56

score 0 · Answer 16 · answered Oct 26 '16 at 19:37

0

update constraints and layout subviews in viewdidload solves the problem

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

answered Oct 26 '16 at 19:37

karthikPrabhu Alagu

3,371
1
21
25

Layout issues after updating to Xcode 8

Before Xcode 8

After update to Xcode 8

16 Answers16

Linked