IPhone Interface Builder: Z-Index, Z-order of a button, image, ui element, etc?

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.

+1 Concisely explained

TechZen 2010-02-16 20:53:10

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?

Shnitzel 2010-02-16 22:05:20

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 2010-02-16 22:10:18

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!!

Shnitzel 2010-02-16 22:11:44

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 2010-02-16 22:13:55

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 2010-02-16 22:16:37

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 2010-02-16 22:18:16

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 2010-02-16 22:57:48

+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 2010-09-28 16:03:54

ansaurus

tags:

views:

answers:

IPhone Interface Builder: Z-Index, Z-order of a button, image, ui element, etc?

related questions