iOS CustomTableViewCell: elements not aligining correctly

Question

I am learning iOS for the first time while building an app. In one of the requirements, the UITableViewCell needs to look like

Answer 1

The objects on your xibs require at least 4 constraints per object. When there's orange lines around the label/UIImageView object, this means a constraint is missing, or conflicting and can often mean the image does not display at runtime like you'd expect.

The easiest way to sort your constraints is to use the interface builder, Firstly I'd recommend selecting each object and clearing the current constraints by selecting the option from the row of icons at the bottom of the IB (see pic below)

Once this has been cleared, to add new constraints select the object again and select the icon left to the one you used to clear the constraints (the cross one - see pick)

In this picture, you'll see a popup gives you the option to add constraints, which in this case I've selected space constraint of UILabel's top and left hand side to their closest top and left hand side objects. You can do this by selecting the spring for that particular constraint and this turns orange colour to show that it's selected. (This fulfils two of the required min 4 constraints). The next two constraints (as I don't want the UIlabel to resize there), is to constrain the height and width. (put a tick in the box to select each)

This will have to be repeated for every UI object you have on your xib. Once it has proper constraints, the lines will all be blue, which means there's no warnings (see pic below - UIImageView's constraints highlighted blue)

I Hope this helps you, though I'd recommend that you read up more on Auto-layout constraints. They can be extremely useful when you get the hang of them and can even be animated etc etc.