在UITableViewCell中显示居中的200x150图像

时间:2013-09-11 20:59:29

标签: objective-c uitableview uistoryboard

我需要在UITableViewCell中显示居中的200x150图像。我能够将图像添加到标准单元格类型(它缩小到适合 - 这不起作用)。然后,我尝试通过设置图像的边界和框架来重绘它(这导致我的图像和其他行之间重叠)。

我有一个继承自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

此代码与表格的其余部分产生图片重叠:

Image Overlapping Table Text

这是我的tableView:cellForRowAtIndexPath:我的控制器中的方法:

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

如何强制我的表格单元格尊重彼此的尺寸而不重叠?如何将图像置于中心位置?

1 个答案:

答案 0 :(得分: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不会产生良好的用户体验。