1

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...

Ash
  • 44
  • 8
  • 1
    Maybe draw out what you want to achieve exactly and add the image of it here so it's clearer for everyone what you want to achieve – NoSixties Jul 03 '18 at 07:39

1 Answers1

2

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

GreatWiz
  • 735
  • 4
  • 8
  • Hey. Thank you for this. I think I have made some progress today but I’m going to give your solution a try because it sounds so much cleaner than the way I’ve got it at the moment. If I can get your way to work then I’ll get back to you. Really appreciate you lending me your brain for a bit! I’m only just learning how to apply autolayout in code and since your solution is a lot cleaner it may just clean up some of the headaches I’ve been having there as well. – Ash Jul 06 '18 at 01:42
  • I'm going to mark your answer as the one. It's got me closer. The only real issue I have now is that changing margins conflicts with my Distribute Proportionately setting so getting the button where it should be, in terms of being higher up on the y-axis (lower on the screen), but I'll keep experimenting. – Ash Jul 06 '18 at 17:23
  • If you post more details, I might be able to help you with that – GreatWiz Jul 08 '18 at 08:43
  • Hey, I'm getting there. I've changed things quite a bit. Since I'm creating a stack of control pairs, I've got one main container which is a vertical stack. Each stack element is a UIView. Inside each UIView is a horizontal stack containing my controls. The button I just couldn't get to work with margins. I think it's because I wanted the buttons to overlap the controls to the top and bottom of them just a little bit and the stack view wasn't having any of it. Part of the reason the for the outermost view is so that I can place the button on it. – Ash Jul 08 '18 at 10:37