UITableViewCell avec des images de différentes dimensions

Je suis en train d'utiliser mon ReusableCell pour les cellules avec des images de différentes dimensions. Les images sont mis à l'intérieur d'un 220x150 boîte noire avec mise à l'échelle 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;
}

Le code ci-dessus les résultats dans une mise en page comme ci-dessous et les images sont parfois changer lorsque le défilement de l'affichage de la table.

Au lieu de cela non structurées, mise en page, je voudrais que les images soient alignés comme ceci:

UITableViewCell avec des images de différentes dimensions

Ce que je fais de mal avec cette ReusableCell?

EDIT1:

Je suis en train de créer une imageView et ajouter ce imageView comme un superview à la cellule.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;
}

Le code ci-dessus est la suivante:

UITableViewCell avec des images de différentes dimensions

C'est comme certaines des images sont visibles dans les deux cellules. Il semble qu'ils ne sont pas en gardant la taille j'ai mis dans l' imageViewFrame. Savez-vous pourquoi?

source d'informationauteur dhrm

18

Une solution rapide serait d'utiliser le contenu en mode UIViewContentModeScaleAspectFill. L'image sera étirée en une ou deux dimensions pour remplir l'ensemble de l'affichage de l'image de limites.

Vous avez vraiment besoin de sous-classement UITableViewCell à faire de ce droit.

Thre est un paresseux solution de l'ajout d'un nouveau UIImageView et à l'aide d'une entretoise, Keller a dit dans sa réponse (n'hésitez pas à accepter sa réponse, c'est juste le code manquant).

Extrait de 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];
...
```
La table ressemblera à ceci:

Vous devez définir l'espace réservé (spacer.png ci-dessus) dans les cellules d'affichage de l'image. Il va pousser l'étiquette de texte à droite.

Vous pouvez utiliser aspect de remplissage et de supprimer la couleur d'arrière-plan de bits:
```
iv.contentMode =  UIViewContentModeScaleAspectFill;
```
La table regarde mal, parce que l'image est tirée outsite les limites:

Juste clip de limites pour obtenir un meilleur résultat:
```
iv.clipsToBounds = YES;
```

Créer une UIImageView sous-vue pour chaque cellule et à la contentView. Chaque UIImageView contient une image avec une image, mais avec l'option UIViewContentModeScaleAspectFit. Ensuite il suffit de Régler la couleur de fond de la UIImageView noir.

Je confirme cela fonctionne, mais vous devez également créer un espace réservé à l'entretoise image assurez-vous que le textLabel se déplace hors de la voie. Il suffit de faire les mêmes dimensions de votre image (avec la lettre de la boxe).

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

Évidemment, cet exemple n'est pas paresseux le chargement des images (je ne savais pas que vous étiez de les charger à partir d'une URL). Pour cela, je voudrais utiliser une sous-classe avec EGOImageView ou quelque chose de semblable.

Vous devez vous connecter pour publier un commentaire.