63

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?

pkamb
  • 33,281
  • 23
  • 160
  • 191
Shai UI
  • 50,568
  • 73
  • 204
  • 309

7 Answers7

92

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

M S
  • 3,995
  • 3
  • 25
  • 36
Shai UI
  • 50,568
  • 73
  • 204
  • 309
  • 5
    +1... it's hysterical to me that there are all these complicated explanations, yet the right answer was not submitted. (I guess Kendall did actually mention the menu items, but didn't go into where they were located.) Purely speculation, but I imagine CALayer objects MUST have some concept of z-index. – livingtech Sep 28 '10 at 16:03
  • 16
    In Xcode 4.2 you'll find the options in menu up top: Editor->Arrange – MdaG Oct 28 '11 at 13:35
  • 1
    Also you need to select the item you want to bring to front on the layout screen, (which is probably hidden) not in the side bar... WTF Xcode? – amleszk May 27 '12 at 11:38
  • 16
    Trying to do this, but all of the "Send to _____" menu options are grayed-out. – Madbreaks Dec 06 '12 at 22:15
  • 9
    @amleszK : if you double-click it will select it. A single click on the side bar just highlights on the editing screen, to indicate where the element is - but double clicking (in the side bar) also selects it. – Kendall Helmstetter Gelner May 23 '13 at 01:58
  • Note, you have to 'click' the 'element' as opposed to selecting it from the sidebar. – Bilbo Baggins Mar 01 '14 at 22:33
  • 1
    @mamleszK Kendall Helmstetter Gelner says right! you should double-click the view you want to in the sidebar !! ouble-click the item will be checked with light gray........single click highlight with blue！ – evan May 09 '16 at 09:14
  • Table views don't always play nice with this ordering, you may need a table view to where you need it in code. – Bryan Bryce Jan 21 '20 at 22:21
24

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).

Kendall Helmstetter Gelner
  • 74,769
  • 26
  • 128
  • 150
14

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.

pkamb
  • 33,281
  • 23
  • 160
  • 191
e.James
  • 116,942
  • 41
  • 177
  • 214
  • I see what you're saying, but what if you had multiple controls within the same view. For example, say I have a button MyButton inside a view MyView, but I wanted an Image to be over the button (and yes, I want an image over a button, I _don't_ want to use button's inherent image property). Is there a possible way to do this or no? – Shai UI Feb 16 '10 at 22:05
  • Yes, it *can* be done, although it may be a bit more difficult than simple drag-and-drop. See http://stackoverflow.com/questions/466297/is-there-a-proper-way-to-handle-overlapping-nsview-siblings – e.James Feb 16 '10 at 22:10
  • hmm, apple needs to get their act together about this one. z-index is the way to go. this is primitive. thanks for your help though!! – Shai UI Feb 16 '10 at 22:11
  • If you want to do it properly, using CALayers is the way to go. In IB, if you enable layers for your base view (the one that will contain the overlapping siblings), then dragging the image on top of the button should just work. I think you will have to add the button first, and then add the image, and then drag the image on top. Also, keep in mind that you may have to jump through some hoops to get "click-through" to work. – e.James Feb 16 '10 at 22:13
  • 1
    You are welcome for the help, but I wouldn't be too quick to judge Apple on this one. A tree structure for views allows for very efficient drawing operations because the runtime can quickly split up the canvas into separate regions that need to be redrawn. – e.James Feb 16 '10 at 22:16
  • 1
    It may take a small amount of adjustment during development, but it pays off big time when the user is actually running your app, and *that* is when it really matters. – e.James Feb 16 '10 at 22:18
  • I've just realized that the question I linked to in my first comment is my own, from way back in the day, when I was learning this stuff for the first time! I guess we all have to ask these questions when we're getting started :) – e.James Feb 16 '10 at 22:57
12

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.

pkamb
  • 33,281
  • 23
  • 160
  • 191
Eric Colton
  • 121
  • 1
  • 2
6

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.

pkamb
  • 33,281
  • 23
  • 160
  • 191
Kevin
  • 2,739
  • 33
  • 57
  • 1
    This is really helpful. I tried sending two different controls to the front with Editor > Arrange > Send to Front but strangely it would not let me send both of them to the front at the same time, so manually reordering the list allowed me to get things working exactly as I wanted in a straightforward and convenient way. (And you can see how this affects the storyboard file too, where the views/controls are reordered.) – Jared Updike Apr 12 '20 at 22:58
3

In Swift:

Within the view you want to bring to the top

superview?.bringSubviewToFront(self)
pkamb
  • 33,281
  • 23
  • 160
  • 191
Tanvir Nayem
  • 702
  • 10
  • 25
1

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.

Nerdroid
  • 13,398
  • 5
  • 58
  • 69
user4401104
  • 19
  • 1