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

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;, 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.