Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

objective c - iOS CustomTableViewCell: elements not aligining correctly

I am learning iOS for the first time while building an app. In one of the requirements, the UITableViewCell needs to look like
enter image description here (PS: This is just a design, no code was written for this)

However, when I design my UITableViewCell, it looks like

enter image description here
enter image description here enter image description here enter image description here

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
enter image description here

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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)

enter image description here

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)

enter image description here

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)

enter image description here

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...