Search code examples
iosautolayoutuikitinterface-builder

Center View vertically in relation to the Views next to it


Given the layout below:

Base layout

I wanted to know if it's possible to center vertically the ImageView on the left in relation to the views on the right so that, if any of the labels grow, the ImageView would still be on the center (left image) and not on top (right image).

desired layout wrong layout

I tried constraining the ImageView's top to the upper label and its bottom to the lower label but I haven't been able to se in a way that autolayout would try to "satisfy both". Trying to change any priority or changing the constraint to a inequality only makes the ImageView goes up or down.


Solution

  • Pretty sure you really mean Vertically not Horizontally?

    Embed your two labels into a Vertical stack view, and constrain the image view centered to the stack view.

    Alternatively, for even fewer constraints needed...

    • Embed your two labels into a Vertical stack view
    • Embed the image view and that "labels stack view" into a Horizontal stack view
    • set the Alignment of the Horizontal stack view to Center

    enter image description here