0

I’m trying to achieve this layout using the interface builder enter image description here

I’ve already tried to embedded the bottom button inside another stackview, also tried to set it out of the stack view but nothing works as expected what have now is thisenter image description here And getting this resultenter image description here

Can someone tell me what constraints are missing or what is wrong with my current constraints?

Robert
  • 85
  • 6
  • Do you want your buttons to be **Round**? Or, six **Oval** and a **Round** button centered at the bottom? – DonMag Jul 22 '21 at 20:07
  • the shape must be round for all buttons, but I fixed that with scale `aspectFit`. The problem is when I turn to landscape the layout is not like the first image. @DonMag – Robert Jul 22 '21 at 20:20
  • And do you want all your buttons to be `64 x 64`, regardless of orientation? – DonMag Jul 22 '21 at 20:30
  • Only the one at the bottom should be `64 x 64` – Robert Jul 22 '21 at 20:39
  • How do you want to size the other buttons? As large as will fit? A percentage? – DonMag Jul 22 '21 at 20:42
  • As large as will fit, no problem with that. – Robert Jul 22 '21 at 20:47
  • OK - a little tough to guess what you really want, but is this about it? https://imgur.com/a/SHoCS5c – DonMag Jul 22 '21 at 21:25
  • Yes this what I want to achieve. I've already achieve it , I'm not sure if I achieve it using the best practices. But I did it https://imgur.com/a/g88h6yK – Robert Jul 22 '21 at 21:48

1 Answers1

0

You usually don't need to add too many constraints to the stack view's arranged subviews. Setting the distribution and alignment correctly is the key. The constraints involving Stop Button are either unnecessary or causing the conflict that you see in the console.

To position the stack view, you just need to pin its top, bottom, leading, trailing edges to the safe area. For example:

enter image description here

Then, set the alignment of all the stack views to "Fill", and the distribution of all the stack views to "Fill Equally".

Sweeper
  • 213,210
  • 22
  • 193
  • 313
  • I just tried what you suggest me, but seems that something is missing now, I don't where to accommodate the last button in the view hierarchy. This is the behavior I'm having now. – Robert Jul 22 '21 at 16:26