Overlapping Views in UIStackView

Question

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.

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:

Any idea or suggestion how to do it?

Thanks.

Answer 1

This Swift solution reverses the stack view subview order using the UIView method sendSubviewToBack(_:) (docs here):

@IBOutlet weak var stackView: UIStackView!  for view in stackView.arrangedSubviews {     stackView.sendSubviewToBack(view) } 

As we advance through the stack view's arranged views (from bottom to top), the later (i.e. higher) views get pushed to the bottom, thereby reversing the order :-)

Answer 2

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:

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!