8

I am unable to get a stack view to fill the view canvas in order for my widgets to be automatically resized to fill the entire screen... i've seen this done on may tutorial/youtube video but for some strange reason it doesn't seem to work for me How I went about it: I have a view controller scene where I am trying to display three buttons layed out horizontally with three labels beneath them. I dragged the buttons and labels onto the view canvas from the object library and then added each button and it's label to a verticle stack view. Then I added the three verticle stack views to a horizontal stack view and set the distribution of the horizontal stack view to fill equally. I then control-dragged from the horizontal stack view to view in the view controller scene in storyboard and set the following constraints. (I zero'ed all the constants set automatically by storyboard and then have the following 4 constraints)

trailingMargin = Stack View.trailing
Stack View.leading = leadingMargin
Stack View.top = Top Layout Guide.bottom
Bottom Layout Guide.top = Stack View.bottom

When I run the app I don't see anything displayed on the simulator's iPhone screen and I get a message saying that one or more of the constraints could not be satisfied. Any idea what I am doing wrong?

Desdenova
  • 5,326
  • 8
  • 37
  • 45
user2094257
  • 1,645
  • 4
  • 26
  • 53
  • It all looks fine really. Can you show the details from the error message? – marosoaie May 13 '16 at 09:14
  • please show you storyboard screen shot. if possible upload it somewhere and share the link for better understanding – BangOperator May 13 '16 at 10:00
  • Here's a ling to a screenshot: https://www.sendspace.com/file/2d467i Thanks – user2094257 May 14 '16 at 08:23
  • I don't get an error message anymore, the leadingMargin, top and bottom spacing constraints works fine but when I add the trailingMargin constraint and run the app nothing is displayed on the simulator screen... i'm guessing it's displayed but I can't see it as it's displayed outside the view port... Any idea why this is happening? – user2094257 May 16 '16 at 10:34
  • Please post screen shots to imgur.com. – rob mayoff May 17 '16 at 14:19

2 Answers2

3
  1. Check Axis,Alignment and Distribution of the stack views. The outer stack has to have Horizontal,Centre, Equal Centring respectively and the inner stack view's need to be vertical,fill,fill.
  2. Maybe your images are differently sizes, hence making the main stack view show content out of proportions. I have tried to replicate your scene here.

Link To edited project.

enter image description here enter image description here

BangOperator
  • 4,377
  • 2
  • 24
  • 38
  • Thanks for your effort. I Still don't see anything when I run it. And no all my images are the same size. When I remove the trailingMargin constraint I can see the content but it only fills a small part of the view. – user2094257 May 17 '16 at 16:28
  • @user2094257 Share a storyboard file your scene in it. – BangOperator May 17 '16 at 16:31
  • @user2094257 I have check your project. Your forgot to comply to point 1. "The outer stack has to have Horizontal,Centre, Equal Centring respectively" – BangOperator May 18 '16 at 12:51
  • I did set those properties but still can't see any of the content when I run the app. i've been stuck on this for a long time but no one seems to have the answer... Could it maybe be a setting in the simulator? – user2094257 May 19 '16 at 06:18
  • @user2094257 have u checked the storyboard that i have linked in the answer? Try predicating it. – BangOperator May 19 '16 at 07:26
  • Yes I did check it. I see that you have different constraints? where I have leadingMargin you have leading and where I have trailingMargin you have trailing... Also you didn't add the verticle spacing to top layout guide and verticle spacing to bottom layout guide? How do I go about adding your storyboard to a new project and then running it to see what it does? – user2094257 May 19 '16 at 08:11
  • @user2094257 Margins are just offsets. They do not matter in current context. To add the scene open the shared storyboard. I have edited the project that you had shared. find the link in answer. – BangOperator May 19 '16 at 08:24
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112365/discussion-between-dinesh-hudinwal-and-user2094257). – BangOperator May 19 '16 at 08:25
  • everything looks fine when running your modified project... i'm still wondering where I went wrong though? The only difference seems to be that you centered vertically where I added verticle spacing to bottom and top layout guides? I am trying to get the outer stack view to fill the view does that still happen in your edited version? Or is it just centered vertically and not filling the view? – user2094257 May 19 '16 at 20:05
  • change one of the vertical constraint to an inequality. – BangOperator May 20 '16 at 04:30
  • Why should it be an inequality? if i'm trying to get it to fill the view shouldn't it be equal? – user2094257 May 20 '16 at 07:17
0

I tried your Project. Just removed your constraints and apply Alignment constraints horizontally container and vertical container at last use update constraints and I got the result on simulator. It may help to solve your issue.

Dhruv Khatri
  • 803
  • 6
  • 15