CODEWITHSUNDEEP
iosxcodeautolayoutinterface-builderuistackview
yodel
yodel

Reputation: 97

Vertically Distribute Two Horizontal Button Rows

I'm trying to dynamically distribute two horizontal rows of buttons vertically in IB, XCode 10.2.1. Current efforts have produced this: [Storyboard for button rows [][1][1] The two rows can be distributed with the spacing values in the vertical stack, but I want it to dynamically vertically distribute depending on how much vertical space is available.

Details: The two UIStackViews are embedded in a vertical UIStackView. As an attempt to get it to work, I've also embedded the vertical UIStackView in a UIView that is resized to the available space at the bottom of this screenshot (called "UIStackView", you can see it as the larger rectangle between Album Title and the bottom). None of the Distribution options in the vertical UIStackView have any effect on distributing the two horizontal rows.

Am I missing a constraint? My last resort is to programmatically adjust the spacing in the vertical stack depending on the size of the screen.

Also, not listed below: the top of the vertical UIStackView is not pinned to the top of the UIView - when I do this, I get one row way at the top, and one row at the bottom, when I use "equal spacing." When in this situation but choose "fill equally", the two rows are very near each other near the bottom, and the "Album Title" gets pulled way down to meet it (what's the best way to keep the Album Title where it is, BTW?). Perhaps the answer really lies in this situation, but with different constraints...

Here is the structure and constraints (top row and bottom row have the same kind of restraints).: enter image description here enter image description here

and here are the constraints for the encompassing UIView ("Stack View"): enter image description here

Thanks in advance! A lot!

Upvotes: 0

Views: 663

Answers (1)

DonMag
DonMag

Reputation: 77511

Couple ways to do it... Probably the easiest is to use "spacing views."

Here is the layout with View as: iPhone 8

enter image description here

With this layout, I have 3 Red "spacing views" included in the vertical stack view. They are set equal heights to each other, which ends up giving you equal vertical "spacing." Obviously, you'll change the background color to clear so you don't see them.

Notes:

I gave each button width and height constraints of 44

The Horizontal stack views use:

  • Alignment: Fill
  • Distribution: Equal Spacing
  • Spacing: 0

The Vertical stack view is constrained 20-pts leading / trailing / bottom to the view, and Top is 20-pts from the Bottom of the Label... with:

  • Alignment: Fill
  • Distribution: Fill
  • Spacing: 0

Here is the exact same layout with View as: iPhone 4s so you can see that it sizes itself as desired, without any changes:

enter image description here

Upvotes: 1

Related Questions