Display centered 200x150 Image in a UITableViewCell - objective-c

Question

I need to display a centered 200x150 image in a UITableViewCell. I was able to add the image to a standard cell type (it shrunk it to fit - that wasn't working). I then tried redrawing it by setting the bounds and frame for the image (this caused overlap between my image and the other rows).
I have a custom class inheriting from UITableViewCell:
#import "WCPictureViewCell.h"
#implementation WCPictureViewCell
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
self.frame = CGRectMake(5,5,210,160);
self.bounds = CGRectMake(5,5,210,160);
self.imageView.frame = CGRectMake(0,0,200,150);
self.imageView.bounds = CGRectMake(0,0,200,150);
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
#end
This code produces picture overlap with the rest of my table:
Here is my tableView:cellForRowAtIndexPath: method in my controller:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell;
if(cellPropertyMap>0) {
static NSString *CellIdentifier = #"DetailCell";
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if(cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
}
// Configure the cell...
[[cell textLabel] setText: (NSString *)[[self displayLabels]objectAtIndex:cellPropertyMap]];
[[cell detailTextLabel] setText: (NSString *)[[self displayData]objectAtIndex:cellPropertyMap++]];
} else {
static NSString *CellIdentifier = #"PictureCell";
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
//if(cell == nil) {
//}
// Configure the cell...
NSData * imageData = [[NSData alloc] initWithContentsOfURL: [NSURL URLWithString: [cat friendlyURLPath]]];
cell.imageView.image = [UIImage imageWithData: imageData];
cellPropertyMap++;
return cell;
}
return cell;
}
How do I force my table cells to respect eachother's sizes and not overlap? How do I get my image to center?

Answer 1

You need to use
- (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath)
{
// add logic to determine if this indexPath is an image...
if (indexPath.row == 0) // first row in a section is an image?
return (150.0f); // this row is an image
else
return (44.0f); // this is a standard data row
}
to return the correct height of your TableView row.
Second step is to get the image to center, there are various techniques. Try
UIImageView *yourImage = ...;
// set frame and auto-resizing mask
yourImage.frame = CGRectMake(tableView.bounds.size.width / 2) - (yourImage.size.width / 2), 0, yourImage.size.width, yourImage.size.height);
yourImage.autoResizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
// add UIImage to the cell contentView
[cell.contentView addSubview:yourImage];
don't set the cell.imageView property, which defines a left justified image in the cell.
Lastly, and off-topic from your question, you should really consider lazy-loading the images, using initWithContentsOfURL on the UI thread will not yield a good user experience.