How to resolve Autolayout issues after updating to Xcode 8.1 - ios

I have designed user interface in storyboard in Xcode 7 its working fine when i updated Xcode 8.1 and opened the storyboard the result is below.
I don't know what apple actually doing with this, When ever new update came i struggling on this kind of issue. Can some one guide me how to resolve this?
Thanks

Click on the red button that shows the problems, and see what's wrong, and fix them. Very often you just fix the frames of your views. And then you tap on the various device sizes and check if your layout works with every size.

They did make changes with new xcode 8.0, but I believe its easier then ever.
The concept is same behind only few changes.
Like before you need to do update frames, but now they make it easy so you can view a live preview of your layout without going into preview in show assistant editor.
Just click on device button and it automatically updates frames and shows you your layout.
For more information see: A Beginner’s Guide to Auto Layout with Xcode 8

Related

Xcode8 Controllers are Grey which are designed in Xcode 7 with size classes

I am making my iOS Application Compatible with iPad.I have designed the UI of my Application with Xcode 7 with size classes which is more specifically designed for iPhone, Now i have to upgrade it to support iPad also.
Now with Xcode 8 when i select iPad from Storyboard with Device Pan then most of the controller are Greyed i.e. those controllers are not showing on iPad on the device also and on the Storyboard also. Please check the screenshot for that
I know the reason why they greyed out, because they are designed with size classes for a different size.
Now my question is, is it possible somehow to use this controller for iPad without Redesigning the UI and updating the Auto layouts, as of now i am not seeing any way to make this controllers available for iPad.
Also i have tried with a way but i think that will be very long, I have to delete this controllers and then add it back and set the layouts again.
Also another way would be design separate storyboard.
So please suggest me what will be a better solution to overcome from this.
Thanks
Even after compatibility conversion to Xcode 8, if still it doesn't seem to work, then you need to check if there are any leftovers like below:
If you want to make sure it works with any width and height, find the constraint:
and remove it by clicking on the x, leaving only installed checked:
That should solve it for Xcode 8.

Layout issues after updating to Xcode 8

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
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.
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.
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!
Xcode 8.1 Beta 2 resolves this issue. Please check this download link
https://developer.apple.com/download/
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
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.
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.
Setting View Size to Freeform from Inferred worked for me. It can be found under the heading Simulated Metrics in Attributes Inspector.
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()
I selected each controller and clicked on "Update Frames" and it fixed the layout.
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.
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.
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
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!
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.
update constraints and layout subviews in viewdidload solves the problem
- (void) viewDidLoad {
[self.view updateConstraints];
[self.view layoutSubviews];
[super viewDidLoad];
}

Weird space in iOS7

I just ran a demo app on iOS 7 target, this is what I get:
I'm using a storyboard and it looks well in iOS8. Constraints are correct.
I already checked e.g.
UITableView is starting with an offset in iOS 7
but the issue in this case is the whole thing, incl. status bar has the offset, no idea what this is. I played around with the layout settings of the view controller in the storyboard without any effect.
I also created a brand new (single view) project, ran it without changing anything, got the same issue. Don't know what can go wrong in a new project concerning autolayout as I can't set any constraints in the root view controller's view...
Any ideas?
Thanks in advance.
Try adding a "Default-568h#2x.png" launch screen to keep your iOS 7 device from running the app in Letterbox mode.
What Apple really wants you to do is use Auto-layout (see point 1 in the linked blog), which is what I suspect your demo app isn't doing.

Story Board issue after upgrading to Xcode 5 and ios 7

I could not figure out why this is happening.I searched here but could not find any answer for this.
The problem is I developed some screens using StoryBoard in xcode 4 and ios 6 but now I upgraded to xcode 5 and ios 7.But after upgrading all my labels,text fields have changed dimensions.Their x,y co-ordinates have changed along with width and height.They all have same x,y co-ordinates(0,758) and width,height as 0,0.
I can bring them back manually editing but there are too many fields to do so.
Is there anyway to do it easily?
Recommendation
From your problem description it sounds like you're seeing the effects of the deep system changes in iOS7.
To verify that you are not seeing any bugs please select your storyboard or xib file (this works on both) and open the assistant editor.
Next choose the Preview as the assistant editor. This will show you the storyboard layout as it will look on your device.
Note the menu on the lower right will show three things:
The version of iOS being previewed
A rotation control to show the controls in different orientations
A height control to show how the view will look at 3.5/4.0 heights
iOS7 Preview
iOS6 Preview
Please keep in mind that the iOS7 control sizes are different from all other prior versions of iOS so they will never line up precisely. Use of auto layout will need to be re-examined if your app is highly complex: There are two options: Review the auto layout guide (here) or turn it off (in the file attributes inspector) and use the old springs and struts (autosizing).
I recommend a thorough reading of Apple's transition guide (link) to make sure you understand the impact of the changes to the UI controls.
Techtopia has a good article on iOS7 Auto Layout which can be very useful in managing the sizing and appearance of UI Controls (link).
Apple has a sample app that I think is worth examining called UICatalog (link). I recommend downloading the app and running it on your simulator to see how the new controls will look. Note that the sample does not have auto layout constraints active, if you choose to continue using auto layout you may want to consider defining your layout with the Visual Formatting Language (link).
Other things to consider
There were some bugs with the early build of storyboard in Xcode 5
and auto layout was changed significantly, please make sure you
download the absolute latest version of Xcode.
You could try cut and paste the objects in Xcode.
You should verify that the auto layout setting is consistent between
versions (either on/off in the file inspector).
Check that your auto layout constraints are not generating a warning
or error in Xcode. If they are you will need to Update All
Constraints.
Make sure you have git turned on before starting so you can rollback
your changes to a known state.
Hope some of these suggestions will be helpful.

iOS XCode Storyboard controls moved and now look strange in simulator

I am following the course on iOS through iTunes university and working on the calculator project. I moved the controls on the storyboard to make room for another control at the top. Everything looks fine on the storyboard but when run in the simulator, controls are bunch up, on top of each other, and some are clearly off the top of the simulator screen. This leads to the following very related questions.
How does one move controls around on the storyboard? I went to the size inspector of each control (buttons in my case) and changed the 'Y' value (increased it by 10). I did this for each control. I didn't think about it as I was doing it because as I said, all looks fine on the storyboard. Is there a better way to move controls around? I could not figure out how to grab more than one control at a time and move them. Grabbing all and moving or all but one and moving would have been ideal.
I anticipate someone is going to say, "We need more info. " How do I show the storyboard? Is there a xml file somewhere? How is the storyboard saved? How should I show the results of the simulator?
In general, what the heck is going on? Why would things look so different in the simulator?
Is there a better forum/group to ask newbie questions about iOS programming?
My specs are these:
XCode 4.5.2
Ios simulator versions set to 6.0 and iPhone
Any other info needed? Thanks in advance,
Dave
Try setting your simulated device size to 'freeform' instead of 'inferred'. This screen is a bit smaller so the controls are no longer overlapping. The latest xcode sets it by default to ios6 (screen size of iPhone 5)
edit For a better insight in xcode IDE, please refer to the documentation provided by apple (includes screenshots for clarity)
https://developer.apple.com/library/ios/#documentation/ToolsLanguages/Conceptual/Xcode4UserGuide/000-About_Xcode/about.html#//apple_ref/doc/uid/TP40010215

Resources