的UITableViewCell在不同尺寸的圖像

Question

我試圖用我的ReusableCell與不同尺寸的圖像細胞。圖像放在一個220x150黑盒子裏，並且縮放比例爲UIViewContentModeScaleAspectFit。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"NewsTableViewCell"; 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
    if (cell == nil) { 
     cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 
    } 

    NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath]; 

    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]]; 
    [cell.imageView setImage:[[UIImage alloc] initWithData:data]]; 
    [cell.imageView setBackgroundColor:[UIColor blackColor]]; 
    [cell.imageView setContentMode:UIViewContentModeScaleAspectFit]; 

    CGRect imageViewFrame = cell.imageView.frame; 
    imageViewFrame.size.width = 220; 
    imageViewFrame.size.height = 150 
    [cell.imageView setFrame:imageViewFrame]; 

    [cell.textLabel setText:item.title]; 

    return cell; 
} 

上面的代碼導致下面的佈局，並且在表格視圖中滾動時圖像有時會發生變化。

而是非結構化的佈局，我想的圖像，以這樣的排列：

我在做什麼錯這個ReusableCell？

EDIT1：

我試圖創建的ImageView並添加此ImageView的爲上海華向cell.contentView。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"NewsTableViewCell"; 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
    if (cell == nil) { 
     cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 
    } 

    NewsItem *item = [self.fetchedResultsController objectAtIndexPath:indexPath]; 

    UIImage *placeholderImage = [UIImage imageNamed:@"ImagePlaceholderThumb"]; //220x150 

    UIImageView *imageView = [[UIImageView alloc] initWithImage:placeholderImage]; 

    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:item.imageUrl]]; 
    [imageView setImage:[[UIImage alloc] initWithData:data]]; 
    [imageView setBackgroundColor:[UIColor blackColor]]; 
    [imageView setContentMode:UIViewContentModeScaleAspectFit]; 

    CGRect imageViewFrame = imageView.frame; 
    imageViewFrame.size.width = placeholderImage.size.width; 
    imageViewFrame.size.height = placeholderImage.size.height; 
    [imageView setFrame:imageViewFrame]; 

    [cell.contentView addSubview:imageView]; 

    [cell.textLabel setText:item.title]; 

    return cell; 
} 

上面的代碼導致以下：

它像一些圖像是在兩個小區中可見。他們似乎不守我的imageViewFrame設置大小。你知道爲什麼嗎？

Answer 1

速戰速決將使用內容模式UIViewContentModeScaleAspectFill。圖像將被拉伸到一個或兩個維度以填充整個圖像視圖邊界。

你真的需要繼承UITableViewCell這樣做的權利。

THRE是懶解決方案添加新UIImageView和使用間隔，如凱勒告訴你他的回答（隨時接受他的答案，這僅僅是遺漏碼）。

的tableView:cellForRowAtIndexPath:提取物：

... 
cell.textLabel.text = [NSString stringWithFormat:@"Cell #%i", indexPath.row]; 
cell.imageView.image = [UIImage imageNamed:@"spacer.png"]; /* spacer is 64 x 44 */ 
/* image view width should be ~ 64 px, otherwise it will overlap the text */ 
UIImageView *iv = [[UIImageView alloc] initWithFrame:(CGRect){.size={64, tableView.rowHeight}}]; 
switch (indexPath.row) { 
    case 0: 
     iv.image = [UIImage imageNamed:@"waterfall.png"]; 
     break; 
    /* etc... */ 
} 
if (indexPath.row < 3) { 
    /* add black bg to cell w/ images */ 
    iv.backgroundColor = [UIColor blackColor]; 
} 
iv.contentMode = UIViewContentModeScaleAspectFit; 
[cell.contentView addSubview:iv]; 
... 

表看起來就像這樣：

你需要設置在現有的細胞圖像視圖的佔位符（以上spacer.png）。它會將文本標籤推向右側。

您可以使用方面填充和消除背景色位：

iv.contentMode = UIViewContentModeScaleAspectFill; 

表看起來錯誤的，因爲圖像繪製outsite界限：

只是夾在邊界以獲得更好的結果：

iv.clipsToBounds = YES; 

Answer 2

爲每個單元格創建一個UIImageView子視圖並將其添加到contentView。每個UIImageView都包含具有一致幀的圖像，但帶有選項UIViewContentModeScaleAspectFit。然後只需將UIImageView的背景顏色設置爲黑色。

我剛剛證實了這一點，但您還需要創建一個佔位符間隔圖像，以確保textLabel不會出現問題。只需使它與圖像的尺寸相同（使用字母框）。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static NSString *CellIdentifier = @"Cell"; 

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
    if (cell == nil) { 
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; 

    //spacer 
    cell.imageView.image = [UIImage imageNamed:@"placeholder"]; 

    //imageview 
    UIImageView *thumbnail = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 80, 44)]; 
    thumbnail.tag = kThumbTag; 
    thumbnail.backgroundColor = [UIColor blackColor]; 
    thumbnail.contentMode = UIViewContentModeScaleAspectFit; 
    [cell.contentView addSubview:thumbnail]; 
    } 

    // Configure the cell... 

    cell.textLabel.text = [NSString stringWithFormat:@"Cell %d", indexPath.row]; 

    cell.imageView.frame = CGRectMake(0, 0, 80, 44); 

    UIImageView *thumb = (UIImageView*)[cell.contentView viewWithTag:kThumbTag]; 
    if (indexPath.row == 0) { 
    [thumb setImage:[UIImage imageNamed:@"image1.png"]]; 
    } else { 
    [thumb setImage:[UIImage imageNamed:@"image2.png"]]; 
    } 

    return cell; 
} 

顯然，這個例子是不是懶加載圖像（我不知道你是從一個URL加載它們）。爲此，我會使用EGOImageView或其他類似的子類。