1

I have been struggling with getting buttons (circular) to keep their size in a stack view to no avail.I have two rows of buttons where I place each row in its own horizontal stack view and then embed both stack views in an outer stack view to make it easier to set constraints.

The issue is that the buttons do not keep their original size in portrait or landscape. What settings am I missing to achieve this? I set the size of each button to w=50 and h=50 by resizing each button (no constraints)

Before embedding stack view:

enter image description here

Top row in a stack view:

enter image description here

Each button is of Type CircularButton

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Tim
  • 597
  • 8
  • 18
  • This is Xcode 10.1 – Tim Dec 05 '18 at 18:07
  • The flattening of the button drawing suggests that you are incorrectly doing whatever it is you do to make the button appear as a circle. But you have not told us what that is. – matt Dec 05 '18 at 18:20
  • Edited Post to show button type is of type CircularButton as shown in image – Tim Dec 05 '18 at 18:44
  • This happens on regular square button as well..... – Tim Dec 05 '18 at 19:32
  • But you still have not shown what you are doing to get this wrong result. The buttons need internal constraints to give them size; you say you didn't supply any. Why not? How do you expect their height to be known otherwise? The stack views need constraints; what are they? You are still giving no information. – matt Dec 05 '18 at 20:21
  • You can add width and height constraints to your buttons. – Tal Cohen Dec 05 '18 at 20:53

2 Answers2

3

I set the size of each button to w=50 and h=50 by resizing each button (no constraints)

That is certainly one thing you are doing wrong: "no constraints". The stack view is a constraint maker. That is all it is. But it is not a mind-reader. It needs its arranged views to have certain constraints, under certain configurations, in order to know what you want. You have to tell it. Constraints are how you do that.

Let's stipulate that a lot of your question is a red herring — the roundedness of the buttons, the double set of stack views. All you want to know is how to make three buttons be spaced horizontally at equal distribution by a stack view without losing their size. Here's how.

First, configure your stack view like this:

enter image description here

Second, give your buttons height and width constraints, and wrap them in the stack view. Now use more constraints to position and size the stack view where you want the buttons distributed:

enter image description here

As you can see, that works as desired in the running app:

enter image description here

The rest of your interface merely builds upon that.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • These settings do indeed fix the issue if I do this is a new project. Must be something in my project environment that is causing the circles to shift left on both rows. I will keep on playing with it. Thanks for your help! – Tim Dec 07 '18 at 02:19
  • Finally figured out what was causing the issue with button not displaying correctly. Hiding buttons causes the buttons to skew for some reason.. // startButton.isHidden = true // stopButton.isHidden = true // resetButton.isHidden = false // saveButton.isHidden = true – Tim Dec 07 '18 at 17:58
  • Shouldn’t. Sounds like your stack view might have wrong constraints. If you can make a simple reproducible case, could you ask about it as a new question? – matt Dec 07 '18 at 19:11
  • Yes but I'm not going to just look at your code for no reason. If you ask a new question on Stack Overflow then I have an incentive to help. – matt Dec 07 '18 at 21:11
  • done....title of question is "Why do buttons shift in a stackview when set to hidden?" – Tim Dec 07 '18 at 21:54
0

In the Attributes Inspector, you can set the alignment and distribution to center. This should work:

alignment and distribution in Xcode

Also provide the same height and width for the buttons or put aspect ratio of 1:1 for the buttons.

pkamb
  • 33,281
  • 23
  • 160
  • 191
vishalwaka
  • 89
  • 1
  • 12