Xcode Interface Builder: Z-Index, Z-order of a button, image, UI element, etc?

Question

I'm dragging things around in an Xcode Interface Builder Storyboard... I'd like to specify whether an image is in front (like an indicator) or behind a button (like a background).

I don't see any z-index property as I'm used to seeing on other environments.

If there isn't a z-index property, what is the best way to go about what I'm trying to accomplish?

Answer 1

I achieved what I wanted by clicking on a ui element (button, image, text, etc) and going to the Layout menu (at the top of screen) and then I used "bring to front", "send to back", etc.

In Xcode 4.2 you'll find the options in menu up top: Editor->Arrange

Answer 2

There is a Z ordering without using subviews. For one thing there are menu options for "send to front" and "send to back". Also however, if you look at the elements in your view as a tree of elements, you can re-order them there (rather than in the view itself) just by dragging.

Subviews are great for grouping but not as useful for ordering (except that the whole "set" stays at the same level).

Answer 3

In Xcode development, a UI element, or "view" is in front of another view when it is a subview of that view. For example, if view B is a background and view C is a control, to place the control above the background (i.e. closer to the user), you would make view C a subview of view B. In Interface Builder, this is accomplished by dragging the control into the background.

Essentially, you are looking at a tree structure, with the views in the background being near the root of the tree, and views in the foreground (closer to the user) being near the leaves of the tree.

The Windows and Views document from Apple's iPhone developer documentation may help to clear things up.

Note 1: You should almost never overlap individual controls, such as buttons and text fields. Doing so goes against Apple's user interface guidelines. You can, of course, still do this if you want to, but you need to be aware that you are stepping out of the safety zone. If you are simply writing a "normal" iPhone application, your best bet is to stick to Apple's way of doing things.

Note 2: If, for some reason, you do need things to overlap in a specific way, you can make use of CALayer objects to keep everything properly ordered. CALayer objects are part of Apple's Core Animation technology.

Answer 4

In Xcode 4.6 Interface builder, bring up the "Document Outline" by the menu (Editor > Show Document Outline) or clicking the translucent button in the lower left corner of the canvas.

Under the "Objects" listing, the Z-ordering of the views is displayed and the user can drag them around to change the ordering amongst each other. The closer to the bottom of the screen, the "closer" that element is to the user.

Answer 5

In Xcode 4.6 I can just drag elements up and down in the list to the left.

The lower the element in the list, the closer it is to the user.

E.g. the bottom element in the list will always be visible, unless it's off the screen. I'm not sure when this was implemented, but it seems easier than the other answers.

Answer 6

In Swift:

Within the view you want to bring to the top

superview?.bringSubviewToFront(self)

Answer 7

What worked for me was doing it in code:

self.view.sendSubviewToBack(imageView);

I don't know why but none of the other answers fixed it for good. I put the line above in the viewDidLoad method.

---