Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Sebastian Nitu
8,616 PointsIssues with AutoLayout in iOS app. Major difference sbetween Storyboard, SImulation and Actual Device
I am totally new to iOS development and I am facing a major issue and hurdle (I'm half dead already :) ) with the Xcode 9 AutoLayout.
TL;DR The app fetches some blog posts from a backend and displays them in a card view. I've used the iPhone 8 layout as the main starting point with all of the Storyboard configurations left to the Default.
Like I said I barely have any XP with Storyboards and iOS design.
Whit the Storyboard open, when I go to the Assistant Editor and look at other screen sizes of interest (Plus and 4") the app UI looks totally OFF even though I have used constraints on all of the elements.
This is what I see in Xcode 9
When I run the simulation on either iPhone Plus or 5S things start to look a little better:
https://i.stack.imgur.com/z7sAa.png
This is iPhone 5S in simulation, notice the upper right corner...
https://i.stack.imgur.com/BVi7n.png
As expected, on the Plus size things look off. Just as in the Storyboards preview.
https://i.stack.imgur.com/gJdE8.png
But surprise! On an actual PLUS device thins look rather well!
https://i.stack.imgur.com/suiyk.png
Like I said, I have basic knowledge on how UI Layout Constraints work but I am amazed that this issue is so hard to fix. I know that there is no way anyone form this community can fix this for me and I am more than willing to learn. I just really do not know which part of the AutoLayout system, I need to research and implement in order to fix this issue. In a Nutshell I have no idea where to start my research and how to approach this problem.
Many thanks in advance for helping me!
You can find a sample project here: http://www.filehosting.org/file/details/705218/DemoApp.zip
2 Answers
Sebastian Nitu
8,616 PointsPasan Premaratne Sorry for bugging you with this. Been strugling since 3 days now. Do you have any ideas why this is happening?
Sebastian Nitu
8,616 PointsHi Pasan Premaratne thanks for the quick reply! Unfortunately even removing ALL constraints from all of the elements in the Cell’s ContentView doesn’t fix the issue. Honestly I have no idea what to look into! :(
Pasan Premaratne
Treehouse TeacherPasan Premaratne
Treehouse TeacherFrom just a quick inspection, it looks like you have an aspect ratio constraint on the main image that results in its width sometimes being larger than the screen width. Since you also don't allow this image to grow smaller, it means that the width of the cell background view was dictated by the underlying image view.
If you delete the aspect ratio constraint, the cell background view can adjust the size of the image based on the size determined by its constraints with the root view.
Hope this helps