objective c - 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
(PS: This is just a design, no code was written for this)

However, when I design my UITableViewCell, it looks like

and the code to generate this looks like

- (void)setTransactionCell:(TransactionCell *)transactionCell transactionModel:(TransactionModel *)transactionModel {
    transactionCell.dateOfMonth.image = [self getDayImage:[UIImage imageNamed:@"1"]];
    transactionCell.dayOfWeek.image = [self getDayImage:[UIImage imageNamed:@"Sun"]];

    transactionCell.name.text = transactionModel.name;
    transactionCell.name.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];

    transactionCell.amount.text = transactionModel.amount;
    transactionCell.amount.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:15];

    transactionCell.categoryImage.image = [self getCategoryImage:[UIImage imageNamed:transactionModel.category]];
    transactionCell.imageView.contentMode = UIViewContentModeCenter;
}

- (UIImage *)getDayImage: (UIImage *) image {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(30, 30), NO, 0);
    [image drawInRect:CGRectMake(0, 0, 15, 15)];
    UIImage *im2 = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return im2;
}

- (UIImage *)getCategoryImage:(UIImage *)image {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(40, 40), NO, 0);
    [image drawInRect:CGRectMake(0, 0, 36, 36)];
    UIImage *im2 = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return im2;
}

and finally when I run the application, I see

I am fairly new and not sure what is going wrong. I desperately tried dragging labels and images to every possible combination but nothing worked. I am missing something really basic, can you one please guide what is wrong?

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.