CODEWITHSUNDEEP
iosswiftuistackview
Alex
Alex

Reputation: 5278

UIStackView Spacing - Don't push to top and bottom anchors

I am trying to distribute some nested stack views and I think I'm missing a property to help me align the various views the way I want them.

Here's the current output:

enter image description here

The issue with this is that the two arranged subviews that are added to each column (a stackview), are distributed so that the first subview aligns to the top, and the second subview aligns to the bottom (leaving a variable space in between them).

But here's what I am hoping for - always a fixed space (say 10 px) in between the first and second arranged subview in each column, and the extra space below the second arranged subview is just left to be what it needs to be.

enter image description here

The view is arranged as follows:

outerStackView = the green view: (20px off top, 64px off left, 20px off bottom, 64px off right - present in both screenshots but only highlighted on the top one) with properties:

outerStackView.axis = .Horizontal
outerStackView.distribution = .FillEqually
outerStackView.spacing = 10

leftStackView, middleStackView, rightStackView added to the outerStackView each with properties:

columnStackView.axis = .Vertical
columnStackView.distribution = .Fill
columnStackView.alignment = UIStackViewAlignment.Top
columnStackView.spacing = 10

Then each column has 2 stackViews inside of it, represented by the darker gray box directly around the red and blue boxes. With properties:

redBlueStackView.axis = .Horizontal
redBlueStackView.distribution = .FillProportionally
redBlueStackView.alignment = UIStackViewAlignment.Top
redBlueStackView.spacing = 4

Upvotes: 4

Views: 3401

Answers (1)

Dan Leonard
Dan Leonard

Reputation: 3395

You should pin your stack view to your containing view. That will give you a more consistent look. You can also best all three of your stack view in a horizontal stack view themselves if you want all 3 to be equal sizing. Another tip is to mess with the content hugging priority and compression resistance variables. Hope that helps let me know if you have more questions.

Upvotes: 1

Related Questions