IOS CustomTableViewCell: items not configured correctly

Question

I am learning iOS for the first time when creating an application. In one of the requirements, a UITableViewCell should look like this: (PS: This is just a design, no code was written for this)

However, when I draw my UITableViewCell , it looks like

and the generated code 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 launch the application, I see that

I'm pretty new and not sure what is going wrong. I was desperate to drag shortcuts and images into all possible combinations, but nothing worked. I am missing something really elementary, can you explain what is wrong?

Answer 1

Objects on your xibs require at least 4 restrictions for each object. When orange lines are placed around the label / UIImageView, this means that the constraint is missing or conflicting and often means that the image does not appear at runtime as you expected.

The easiest way to sort your constraints is to use an interface constructor. Firstly, I would recommend selecting each object and clearing the current restrictions by selecting an option from the icon bar at the bottom of IB (see the figure below).

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

In this figure, you will see a pop-up window in which you can add restrictions, which in this case I chose the space limit for the upper and left sides of UILabel for the nearest objects of the upper and left sides. You can do this by selecting spring for this particular constraint, and it will turn orange to indicate that it is selected. (This complies with the two required restrictions of min 4). The following two restrictions (since I don't want UIlabel to change there) are the height and width limits. (check the box to select each)

This needs to be repeated for each user interface object that you have on your xib. When it has corresponding restrictions, all rows will be blue, which means that there are no warnings (see Fig. Below - UIImageView restrictions are highlighted in blue)

I hope this helps you, although I would recommend that you learn more about the limitations of auto-layout. They can be extremely useful when you get them hanging and can even be animated, etc. Etc.