iosuistoryboarduistackview

how to prevent buttons from shrinking in a stackview


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


Solution

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