0

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:

Image Overlapping Table Text

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?

4

1 回答 1

3

你需要使用

 - (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
    }

返回 TableView 行的正确高度。

第二步是让图像居中，有各种技巧。尝试

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];

不要设置 cell.imageView 属性，该属性定义单元格中的左对齐图像。

最后，与您的问题无关，您应该真正考虑延迟加载图像，在 UI 线程上使用 initWithContentsOfURL 不会产生良好的用户体验。

于 2013-09-11T21:10:10.717 回答