Autolayout: always gaps between views in the stack view, despite setting constraints to theTopView.bottom = theBottomView.top

0
votes

I'm new to Swift and trying to repeat the calculator app as part of the learning, but got stuck at the autolayout.

Here's what I did:

  1. Set each row as a Horizontal stack view, and all rows together as a Vertical stack view.
  2. Set the vertical stack view Distribution as Fill Equally.
  3. Set constraints for each Horizontal stack view as theTopView.bottom = theBottomView.top, and vice versa.
  4. Set constraints of each element inside each Horizontal stack view as element.Top = stakcView.Top, element.Bottom = stakcView.Bottom.

Gap with distance set at 0:

gap with distance set at 0

However, there are always gaps between the Horizontal stack views, despite showing the distance between them being 0.

Can someone tell me what I did wrong? Why are there gaps despite showing 0 as the distance between these two? Your help is really appreciated!

constraints:

constraints

3
swiftautolayout
One of your fields may have a border. If you set "Fill Equally" it will adjust to the Height and Width of your largest object. There's no space between them, it just appears that there is because the size is set to match on all views in the stackview. Notice that your constraints are RED resolve that issue and the rest will become clear relatively quickly. – xTwisteDx
Also, click the little red arrow at the top of the scene navigation pane. That will show you what your error is in Auto-Layout giving you a chance to fix it. – xTwisteDx
@shim You are totally correct! The border was accidentally set to 81. Everything was fine when I set it back to 1. I did use the red arrow but it was not informative enough to lead me to the answer though. Still learning how to effectively use the red arrow. Thank you so much for your help! – rocketracoon

3 Answers

0
votes

A UIStackView arranges its subviews. Don't try to add positioning constraints between the arranged subviews - that counters what you've told the stack view to do.

You need to decide how you really want your buttons to look.

In this case:

  • The 0 label is not contained in any stack view.
  • I gave the % button an aspect ratio of 1:0.75.
  • The "outer" Vertical stack view and the Horizontal stack views are all set to Fill Equally.

enter image description here

Here are the constraints - the only difference between the 3 layouts is:

  • 1-> Left image has the "outer" stack view centered vertically - no Top or Bottom constraint.
  • 2-> Center image has the "outer" stack view Bottom constrained to the view Bottom (of safe area).
  • 3-> Right image has the "outer" stack view TOP constrained to the Bottom of the "0" label.

enter image description here

If you want the buttons to fill the screen:

enter image description here

  • Remove the Aspect Ratio constraint from the % button.
  • Outer stack view has Top constrained to label Bottom, and Bottom constrained to view Bottom (safe area)

enter image description here

0
votes

Thanks for your answers!

While they are all informative, fundamentally, my problem lies somewhere else: there are always mysterious gaps between stack views regardless what the constraint constant is set to.

For example, it was set to 0

Space between stackviews when set to 0

Then it was set to 20000

Space between stackviews when set to 20000

Then I discover that it was the space setting was accidentally set to larger than 1. When I set it to 1 the mysterious gap went away.

enter image description here

Problem solved. Thanks again for your help!

-1
votes

Try "Fill" instead of "Fill Equally"