Search code examples
iosuistackview

Overlapping Views in UIStackView

I have an horizontal stack view that I added arranged sub views to it (7 cells). Each one of the cells in the stack has a circular badge that exceeds the view boundaries (negative constraint). When running, as you can see below, each cell is on top of the badge of the previous cell. I would like to change the order so that the badges will be fully visible.

enter image description here

Tried playing with the Z index but it didn't help as the layers are somehow not flat as you can see in the following view hierarchy:

enter image description here

Any idea or suggestion how to do it?

Thanks.

Solution

  • The documentation for the UIStackView class tells that:

    The order of the subviews array defines the Z-order of the subviews. If the views overlap, subviews with a lower index appear behind subviews with a higher index.

    which is exactly what I experienced in the question. To over come my specific case I did the trick of changing the semantic of the view to be RTL as can bee seen here:

    enter image description here

    This is not covering the a generic case because a device may have been set a RTL language in its global settings. For the generic case I guess I will need to check the interface semantic and force an opposite direction to my stack view.

    P.S. It's kind of hack so any ideas about how to reorder the Z-order of subviews in a different way will be most welcome!