How to layout items “relatively” instead of absolute position?

Question

What is the best way to layout iPhone UI items? Right now I am using CGRectMake and specifying the exact x and y coordinates of every UI item (label, view, button, etc) and adding every UI item to the current view.

One problem I see with this is that if one of the items change height or width, I will have to adjust the x and y coordinates of other UI items, so maintenance will be a challenge.

Is there an alternative to doing this? in HTML/CSS, I am used to just placing items relative to each other using margins, not absolute positioning. What do you recommend I do to keep maintenance easy and stress-free?

Answer 1

No. As for as I know, Relative Layout is not possible in iOS. You can use Interface builder to design the UI, which will be easier to position the UI elements.

You can also consider using the autoResizingMask property of UIView . Which is,

An integer bit mask that determines how the receiver resizes itself when its superview's bounds change.

Answer 2

I don't think there is an automatic way to achieve this.
I think your only option for this is to write a method, but even this is going to be tricky to work with, you'll need to determine the affected element and know which elements to reposition (see below for an extremely trivial example).

-(void)adjustUIElements:(CGSize)newSize{

    //for example
    button1.frame = CGRectMake(
        (button1.frame.origin.x + newSize.width), 
        (button1.frame.origin.y + newSize.height), 
        button1.frame.size.width, 
        button1.frame.size.height);

    //etc.
}

The great thing about this example is that you can run it any time there's a size change. It'll take a little while to get right but then you can reuse it in any function you see fit.

Answer 3

What I have been doing is using global constants to set the height, width, xoffset and yoffsets. Eg. I know I want 2 buttons next to each other, A and B where A is 20, 20 from origin and B is 20 right of A:
Constants.m:

CGFloat buttonHeight = 50, buttonWidth = 100;
CGFloat buttonAXoffset = 20, buttonAYoffset = 0;
CGFloat buttonBXoffset = 20, buttonBYoffset = 0;
CGFloat initialXoffset = 0, initialYoffset = 20;

(And use Constants.h to declare them with extern CGFloat blah )
To draw the buttons, set CGFloat creatorCursorX = initialXoffset, creatorCursorY = initialYoffset; which will be your relative cursor.
Then, just above creating the button A, do creatorCursorX += buttonAXoffset; creatorCursorY += buttonAYOffset; creatorCursorX += buttonAXoffset; creatorCursorY += buttonAYOffset; , and use creatorCursorX and creatorCursorY to set its position and buttonHeight and buttonWidth After creating button A, do creatorCursorX += buttonWidth;

So when you get to making button B, you already have a cursor which you can use to place button B relative to button A just like above. Add offset before, add size after. And this makes it easy to switch buttons (and other layout items) around.
You can edit this method to place items down the screen as well.
Btw, to start the cursor on a new line, just set creatorCursorX = initialXoffset again and add the Y distance to creatorCursorY

I'm not an expert in this area, but I've found this method to be the most efficient and make it easy to adjust later. No need to sift through code, just shuffle chunks around for order, and go to the Constants.m to change the sizes.

Answer 4

I couldn't find anything on the public-facing Apple site about it, but I read on one of the rumor sites that Apple will be introducing a new layout system in Lion called Cocoa Autolayout. Unfortunately, it won't be available for the next iOS release.

I don't want to link to any specific documents, but a search for "Cocoa Autolayout" on your favorite search engine will give you some general information how autolayout works.

If you're a registered iOS developer you should have access to one of the WWDC sessions on the topic.