How to make controls occupy the real size inside a stack
I have an horizontal stack with three controls.
The first two (green and orange on the figure below) are based on IB_DESIGNABLE UIView classes. There are no width constrains inside these classes relatively to the width these controls have to be. The third view is a regular UIView.
These controls have multiple buttons. The buttons represent values for configurations. They are radio buttons used to let the user select a particular configuration between multiple. Because these buttons are used multiple times, a particular configuration may have just 4 options to choose, so I have to hide 3 buttons, in other cases 2 and so one.
These IB_DESIGNABLE classes are based on XIBs. The Buttons are inside horizontal stacks inside these XIBs.
This is the problem. Suppose I have to hide 2 buttons on the green one. Because both are inside a horizontal stack and their buttons are also inside an horizontal stack, when I hide one or more buttons from each one, I want the control to reduce its width.
In that case, by hiding 2 buttons of the green one I want the whole thing to be rendered like
But it is not. It is rendered like
NOTE: when the controls contract I need the third view to occupy the remaining space. I use that view to force the controls to the left, because I was unable to do that using just the stack, that were always trying to expand the whole thing.
None of these 3 views have constraints.
The buttons inside the XIB have horizontal constrains of width but they are using a priority of 750 instead of 1000.
The stack that holds the controls is horizontal, fill, fill, spacing 20. The stack that holds the buttons inside the xib is horizontal, fill, fill, spacing 0.
Any ideas?
How do you hide the buttons? By isHidden=true? Then thats the reason. Autolayout ignores hidden state. The buttons are still there. You have to deactivate/change the constraints of the buttons too. e.g. set width constraint of the buttons to 0.