in an iOS app, how can I get 2 elements to sit next to each other?

Question

I'm new to iOS development and I'm working through my first tutorial. One thing the tutorial kind of skipped over is positioning. I have a list where each cell has an image with some text next to it. At least in Interface Builder that's how it appears. When I actually run the app the image appears on top of the text (ie both have the same exact positioning from the left-hand side of the screen).

Interface Builder :

Running App :

I essentially want what, in CSS lingo, would be "float: left", or even just relative positioning with x/y coordinates for each element (ie if it would look the same/similar when running the app as it appears in the storyboard), that would be great.

In playing with all of various View attributes, I'm not finding anything that will position the views… I can find attributes that will position them in Interface Builder , but none of those settings seem to carry over to the app when it is running, and the image/text always appear on top of each other.

I apologize for the newbie question… it's probably something simple/obvious that has somehow slipped by me.

Answer 1

If you are using Xcode5 to do the test, the app will use AutoLayout feature by default. And the constraint you made for this layout seems to be wrong.If you want to position the views to the right place with AutoLayout ,you need to read some material from apple official website.If you do not have too much time to learn,you can try to edit xib without AutoLayout. You can disable AutoLayout in "file inspector" of interface builder.

Answer 2

If you are new to iOS development (as I am), you should familiarize yourself with AutoLayout , as suggested in Eric's answer.

If you're looking for a quick fix to the question as asked, all of the following options worked for me:

1. Select the label, then select the Horizontal Space Constraint and delete it.
2. Select the label and hit cmd-plus (ie cmd+shift+equals). This will delete all of the positioning constraints at once.
3. Turn off AutoLayout.

There are other ways to fix the problem I was having, but generally the issue was incorrect AutoLayout constraints.

Answer 3

If you feel comfortable in the code, I suggest manually setting the frame to a CGRect that you define with CGRectMake(origin.x, origin.y, width, height) . You can also do this with the autolayout settings but I find that programmatically positioning elements gives me much more flexibility, and, as a programmer, it's much easier than trying to figure out the options in interface builder.

The iOS coordinate system is top-down , meaning that y=0 is the top of the screen and y=568 is the bottom of the screen (on iPhone 5). X is 0 on the left side of the screen.

Coordinate systems are relative to the view that they are in. In your case, your elements are in a UITableCell , which is given its own coordinate system by the rendering engine. So if you want your image to be 10px from the top and 10px from the left of the cell's edge (a la padding:10px in css), you would set its frame like so:

image.frame = CGRectMake(10, 10, 50, 50)

...assuming the image is 50x50.