0

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:

This is iPhone 5S in simulation, notice the upper right corner...

As expected, on the Plus size things look off. Just as in the Storyboards preview.

But surprise! On an actual PLUS device thins look rather well!

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

Sebastian Nitu
  • 117
  • 1
  • 7
  • Kinda hard to debug storyboard by eyes, if you can create a demo project then we can help easier, yours then it looks like it have no pin to the right of the view, thats why it dont stick with the right of the super view – Tj3n Nov 02 '17 at 09:31
  • upload the storyboard with all assets i'll do that for you, and believe me THIS COMMUNITY CAN DO THINGS WHICH YOU CAN BARELY IMAGINE,SO PLEASE DONT SAY THAT.! – Yash Bedi Nov 02 '17 at 10:21
  • Hello! Thank you very much for the help! I do not doubt the community, I was just thinking that people might see it as a waste of team. At this link you can find the stripped down project. Unofrtunately I also broke the project and it is not longer running (had to remove a bunch of NDA stuff) but the Storyboard should display just fine. http://www.filehosting.org/file/details/705218/DemoApp.zip Please let me know if you need anything else from my end! – Sebastian Nitu Nov 02 '17 at 11:04

1 Answers1

0

Try removing the fixed width on the imageView

<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="749" image="PostSampleImage0.jpg" translatesAutoresizingMaskIntoConstraints="NO" id="NB1-TR-fXa">
    <rect key="frame" x="0.0" y="0.0" width="333" height="192"/>
    <color key="tintColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
    <constraints>
        <constraint firstAttribute="width" secondItem="NB1-TR-fXa" secondAttribute="height" multiplier="359:248" constant="55.064516129032256" id="BW1-h7-QoS"/>
    </constraints>
</imageView>
adrianvlupu
  • 4,188
  • 3
  • 23
  • 29