CODEWITHSUNDEEP
iosswiftuistackview
Ash
Ash

Reputation: 44

How to add a button to the side and in between UIStackView rows

Imagine a horizontal stack view that contains two controls. Hopefully the type of controls doesn’t matter. Let’s say UITextFields. They’re set to take up 50 percent of the width via distribute evenly on their parent stack view.

Now imagine that I want to add more than one of these things. To keep things simple imaging two of them nested inside a vertical UIStackView. So now we have four text views each taking up a quarter of the parenting vertical stack view.

My question is this. For every pair of text fields, how can I get a button right in between the gap between that text field and the one below it, to the right. So for each pair one button to the right and under it right in the center of the gap between the top pair and bottom pair of text fields.

The idea is to make a control consisting of the two fields and the plus sign to the right and below. Hitting the plus sign would allow for the appending of an identical set of controls.

Thanks I’m advance. Sorry if this makes little sense.

I should add that the button should overlap the vertical space of both text fields.

Okay, thank you. I shall add an image. Imagine all of the fields besides those on the far right as text fields. The ones on the far right are buttons. Those buttons would add a new set of text fields, a pair to the left side.

I'm getting some ideas in my head since writing this originally. In my head you might have one vertical stack view. That vertical stack view would contain a regular UIView containing a pair of text fields and a horizontal stack view to the right. These would be nested inside a horizontal stack view where the text fields would be aligned to the top on the left and the center or bottom alignment for the button to the right.

Does that help?

enter image description here

When you hit the button on the far right, you'd get a new pair of text fields plus a new button.

Okay, I think I'm getting somewhere. Now all I have to do is work out how to do it entirely programmatically so I can add the views dynamically...

Upvotes: 1

Views: 1078

Answers (1)

GreatWiz
GreatWiz

Reputation: 745

Have the buttons be in their own vertical stack view, with each button having the same height as the row of the control pairs, but the top layout margin of the buttons vertical stack view would be set to half the height of the control pair so that the buttons always appear in the middle.

In summary you'd have a horizontal stack view which contains two vertical stack views - one with the pairs of controls, and one with the buttons. you'd add a button and a pair of controls (which are arranged in a horizontal stack view of their own) on every tap on the button

Upvotes: 2

Related Questions