CODEWITHSUNDEEP
iosobjective-cxcodeuitableviewinterface-builder
mm24
mm24

Reputation: 9606

iOS and interface builder: misplaced view (e.g. UITableViewCell)

I am using interface builder to create a masterview details application. However when I run the app the cell gets misaligned.

Here is how it looks both on the simulator and on interace builder:

enter image description here

Any suggestion on how to fix this?

I have noticed that this happens also in the detail view controller that's why I choose the title of "misplaced view":

enter image description here

Upvotes: 0

Views: 443

Answers (3)

Rob
Rob

Reputation: 438287

In Interface Builder, if you select one of these views that is not sized correct and then select the "size inspector" tab on the panel on the right (option+command+5), if you have no constraints defined, IB will warn you:

The selected views have no constraints. At build time, explicit left, top, width, and height constraints will be generated for the view.

If you don't see that sort of message, your screen snapshots suggest that you likely have constraints defined for the view which are tantamount to the same thing, left/top/width/height constraints.

The problem is that when you transition to a real device with different width, the layout of the view will not be correct.

If, however, you defined your own constraints (for example, notably using trailing constraint instead of width constraint, using bottom constraint rather than height constraint), you'll find the views will be better adjusted for the device's actual dimensions.

In your first example, iOS 8 will automatically adjust the row height of the cell if you had defined constraints. Something like: 

V:|-[nameLabel]-[artistLabel]-[categoryLabel]-[priceLabel]-|
V:|-[imageView]-|
H:|-[imageView(100)]-[nameLabel]-|
H:[imageView]-[artistLabel]-|
H:[imageView]-[categoryLabel]-|
H:[imageView]-[priceLabel]-|

I'm showing it to you in VFL, but you can define it in IB, too. The key point is add constraints so that the vertical height is now unambiguous (i.e. the cell height will be adjusted to fit the labels) and the width is not hard coded, but rather the labels will expand/contract to fill it depending upon the device size.

Conceptually the exact same problem occurs in your second example, that you don't have leading and trailing constraints, but rather IB has defaulted to using leading and width constraints, which will not work as you go from device to device. For example, if you just want the text view, but have it adjust for the size of the device's screen, you might have constraints equivalent to the following VFL.

H:|-[textView]-|
V:|-[textView]-|

Upvotes: 0

ozz
ozz

Reputation: 1137

Check your constraints in interface builder first and make sure that your UITableViewDelegate is returning the correct heightForRowAtIndexPath:, then report back.

Upvotes: 0

matt
matt

Reputation: 535989

The problem in the first screen shot seems to be that you are not supplying a tall enough height for the cell. Thus some of the views on one cell are actually appearing on top of the cell below it. You need to fix your table view's rowHeight.

In the second screen shot, it looks like you are using auto layout but you are not doing auto layout (you have no constraints). You need to position these interface elements with constraints.

Upvotes: 2

Related Questions