1

I am trying to figure out how to start using stackviews and running into issues where everything looks great in Xcode Preview, but then when I run it in the simulator or on a device it looks completely different.

Here is my Xcode storyboard:

xCode storyboard with sample data record formatted

And here is how it looks in the simulator:

Simulator view

I am assuming it is an issue with my constraints but I am not sure where to start.

EDIT: I have resolved the initial constraint issues but still doesn't seem to be working. The date does not have its own constraints, only the stack views:

enter image description here

enter image description here

EDIT: PGDev solution and simulator result

enter image description here

Nate23VT
  • 423
  • 8
  • 27
  • I'm not sure what you are expecting to see that is different (some red?) - however, see that red circle with an arrow in it? Tap that and resolve all the constraints issues with the scene. Then, when you execute the app there is a much better chance of the IB Scene resembling what you see in the simulator/ device.. – Damo Oct 23 '17 at 15:16
  • Not the red background, for instance I would like the time label to be in the top right. I have set a Top 0 and trailing 0 constraint but it does not place it in the top-right – Nate23VT Oct 23 '17 at 15:21
  • You really need to resolve those layout issues - see my above comment and ShivamD's. Until you do that it's [almost] impossible to help you. Ok, well, telling you to resolve the layout issues is technically "helping" – Damo Oct 23 '17 at 15:34
  • Forgot to add that I did resolve those issues which did not make a difference – Nate23VT Oct 23 '17 at 17:49
  • ok - please select the date and screenshot it's constraints in the inspector. Also a good technique during development is to colour each of the component that are causing you grief so that you can see better whats happening. I normally use awful mauves and shades of lime to do this ;-) – Damo Oct 24 '17 at 07:20
  • @Damo I have edited my initial post. Resolving the constraints did not seem to help my issue. – Nate23VT Oct 24 '17 at 17:20
  • Is your date label outside the stack view? – PGDev Oct 24 '17 at 17:37
  • There is a stack view within a stack view... so the date label is only within the outer stack view – Nate23VT Oct 24 '17 at 17:50
  • @Nate23VT I have updated the answer for the date label in stack view. Do check it out. – PGDev Oct 24 '17 at 18:09

3 Answers3

2

I have created the same hierarchy as yours and it is giving me the expected result.

Below you can find the attached screenshot of the storyboard as well as the output.

Storyboard:

1. View Hierarchy

enter image description here

2. Outer StackView Properties

enter image description here

3. Inner StackView Properties

enter image description here

Output:

enter image description here

Let me know if you still face any issues regarding this.

PGDev
  • 23,751
  • 6
  • 34
  • 88
  • Thanks, but this still does not seem to give the desired result. I can't completely see all of your constraints so that may be the issue. See most recent edit for screenshot – Nate23VT Oct 24 '17 at 18:48
  • The view hierarchy screenshot contains all the constraints that I have used. Did you check the inner and outer stackview properties? – PGDev Oct 24 '17 at 18:51
  • Yes the stackview properties are identical to your screenshots – Nate23VT Oct 24 '17 at 18:55
  • Here is a link to the sample project I have created . Try downloading and running it. Link: https://github.com/pgpt10/Test – PGDev Oct 25 '17 at 02:18
  • Thanks @PGDev - your sample project does work for me. I have compared both projects and I still can not figure out my issue. I am very confused. Might have to move away from Stack Views. – Nate23VT Oct 31 '17 at 14:40
  • What is issue that you are still facing? – PGDev Nov 01 '17 at 12:51
  • Pretty much the same issue, everything looks great in the storyboard and the preview, but not on the device. For some reason trying to anchor a label in the top right corner is just not working. – Nate23VT Nov 01 '17 at 18:20
  • Upload your sample project somewhere so that I can check what is the issue. – PGDev Nov 02 '17 at 05:36
0

At first look it seems the constraints have not been set properly.

Also it looks like there are a few errors with the auto layout constraints, that is why there is a "red arrow" beside the Updates scene. Resolve the issues first and hopefully you will get the desired result you are looking for.

ShivamD
  • 111
  • 3
0

There are two things needed to be resolved in order to resolve view issues with storyboard and UIStackview

1) You should provide minimum number of constraints to make view proper on storyboard

2) You should resolve conflicting constraints in your views (In your case I see the red button which shows there are conflicting constraints)

2A) You should also resolve the intrinsic content issues with content priority and ambiguity described here

ahmed
  • 540
  • 2
  • 18