Fredlo2010 Fredlo2010 - 1 year ago 57
iOS Question

UITableViewCell image anchored to the top

I am working with a UITable view with custom elements inside and I cannot get the pictures to stay in the location I placed then originally.

I am just following the tutorial from this website Team tree house

This is how my design looks and how it's coming out int he simulator. Note that I am not using Autolayout because the guy in the video said we should not.

Current status

I have tried changing the project to use Autolayout and adding the constrains but that is not working either.

I added some custom code to make sure the controls stays in place but nothing.

This is what my code looks like.


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";
EntryCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

DiaryEntry *entry = [self.fetchResultsController objectAtIndexPath:indexPath];

[cell configureCellItemProperties];
[cell configureCellForEntry:entry];
[cell fixImage];

return cell;

EntryCell.m (only relevant methods)

+ (CGFloat) heightForEntry: (DiaryEntry *) entry {

const CGFloat topMargin = 35.0f;
const CGFloat bottomMargin = 95.0f;
const CGFloat minHeight = 106.0f;

//The actual size of the label devided by 2 otherwise is not going to get it right.
const CGFloat originalLabelWidth = 202.0f;

CGSize constraint = CGSizeMake(originalLabelWidth, CGFLOAT_MAX);
NSStringDrawingOptions options = (NSStringDrawingUsesFontLeading | NSStringDrawingUsesLineFragmentOrigin);
UIFont *font = [UIFont defaultFontMedium];
NSDictionary <NSString *, id> *attributes = @{NSAttachmentAttributeName: font};

CGRect boundingBox = [entry.body boundingRectWithSize:constraint options:options attributes:attributes context:nil];

return MAX(minHeight, (CGRectGetHeight(boundingBox) + topMargin + bottomMargin));


- (void) configureCellItemProperties {

[self.dateLabel setFont:[UIFont defaultFontBoldMedium]];
self.dateLabel.textColor = [UIColor portgoreColor];

[self.bodyLabel setFont:[UIFont defaultFontMedium]];
self.bodyLabel.textColor = [UIColor portgoreColor];
[self.bodyLabel setNumberOfLines:0];
[self sizeToFit];

[self.locationLabel setFont:[UIFont defaultFontMedium]];
self.locationLabel.textColor = [UIColor silverColor];


- (void) configureCellForEntry: (DiaryEntry *)entry {

self.bodyLabel.text = entry.body;
self.locationLabel.text = entry.location;

NSDateFormatter *dateFormatter = [NSDateFormatter defaultWeekMonthDayYear];
NSDate *date = [NSDate];
self.dateLabel.text = [dateFormatter stringFromDate:date];

if (entry.image) {
self.mainImageView.image = [UIImage imageWithData:entry.image];
}else {
self.imageView.image = [UIImage imageNamed:@"icn_noimage"];

if (entry.mood == DiaryEntryMoodGood) {
self.moodImageView.image = [UIImage imageNamed:@"icn_happy"];
} else if (entry.mood == DiaryEntryMoodAverage){
self.imageView.image = [UIImage imageNamed:@"icn_average"];
} else if (entry.mood == DiaryEntryMoodBad) {
self.imageView.image = [UIImage imageNamed:@"icn_bad"];


- (void) fixImage {

CGRect contentBounds = self.contentView.bounds;
CGRect imageFrame = self.imageView.frame;

imageFrame.origin.x = contentBounds.origin.x + 8;
imageFrame.origin.y = contentBounds.origin.y;

self.imageView.frame = imageFrame;


Thanks a lot for the help :)

Answer Source

You're going to kick yourself.


if (entry.image) {
    self.mainImageView.image = [UIImage imageWithData:entry.image];
}else {
    self.imageView.image = [UIImage imageNamed:@"icn_noimage"];

you're setting the cell's imageView image, rather than mainImageView's image in your else statement.

You have the same bug when setting your moodImageView's image too.

Hope that helps!