Define width of views inside a stack view?

Question

I want to create a graph like design with the help of stackviews.I have added 5 view horizotally inside a stackview.Now what i wanted to do is give a single view some height sat 25 & make property of stack view as equal width but somehow i couldn't do it.I had to give leading & trailing to the stakview & on basis of leading & trailing internal width of views was calculated.But as leading & trailing will be static for all devices. i tried to give stack view horizontal & vertical center but that did not work.

Here are my constraints

Why i had to give leading & trailing for calculating internal width of view inside a stackview.

Why i can't use vertical & horizontal center for stack view & let stack view use the width which i define for a single view?

Answer 1

You need to resolve the ambiguity of the View so that the view engine can determine exactly how it need to draw the view. Engine always needs to know how the view should be placed horizontally because in case of iPad the other subviews have to expand too much ; so if we specify leading and trailing, it can expand as desired or if we want them to not increase in widht more than specified then it can leave some space in leading and trailing and restrict expansion. Depends upon how you need it

I recommend you the solution that parent of this graph view as equal widhts and equal heights (or provide a multiplier like 0.95 ) to superview so that it can display well on all screen sizes.

Take some time to read ambiguity and conflicts. This will help you will get the desired view without much of hard thinking

Answer 2

Set leading, trailing and top constraint of stackview = 0

Set height constraint of your stackview

Set stackview Distribution property = Equal spacing

Add additional view at first position in stackview with width constraint = 0

Add additional view at last position in stackview with width constraint = 0

Set five coloured views width constraint as width equally

Set first coloured view width property as width equally to main view; multiplier = 1:11