¿Cómo puedo hacer ImageView de UITableViewCell un tamaño fijo, incluso cuando la imagen es más pequeña

Tengo un montón de imágenes que estoy usando para las vistas de la imagen de la celda, no son más grandes que 50×50. por ejemplo, 40×50, 50×32, 20×37 …..

Cuando cargo la vista de tabla, el texto no se alinea porque el ancho de las imágenes varía. También me gustaría que aparezcan pequeñas imágenes en el centro en lugar de a la izquierda.

Este es el código que estoy probando dentro de mi método ‘cellForRowAtIndexPath’

cell.imageView.autoresizingMask = ( UIViewAutoresizingNone ); cell.imageView.autoresizesSubviews = NO; cell.imageView.contentMode = UIViewContentModeCenter; cell.imageView.bounds = CGRectMake(0, 0, 50, 50); cell.imageView.frame = CGRectMake(0, 0, 50, 50); cell.imageView.image = [UIImage imageWithData: imageData]; 

Como pueden ver, he intentado algunas cosas, pero ninguna de ellas funciona.

No es necesario reescribir todo. Recomiendo hacer esto en su lugar:

Publique esto dentro de su archivo .m de su celda personalizada.

 - (void)layoutSubviews { [super layoutSubviews]; self.imageView.frame = CGRectMake(0,0,32,32); } 

Esto debería hacer el truco muy bien. :]

Para aquellos de ustedes que no tienen una subclase de UITableViewCell :

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { [...] CGSize itemSize = CGSizeMake(40, 40); UIGraphicsBeginImageContextWithOptions(itemSize, NO, UIScreen.mainScreen.scale); CGRect imageRect = CGRectMake(0.0, 0.0, itemSize.width, itemSize.height); [cell.imageView.image drawInRect:imageRect]; cell.imageView.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); [...] return cell; } 

El código anterior establece que el tamaño sea 40×40.

Swift 2

  let itemSize = CGSizeMake(25, 25); UIGraphicsBeginImageContextWithOptions(itemSize, false, UIScreen.mainScreen().scale); let imageRect = CGRectMake(0.0, 0.0, itemSize.width, itemSize.height); cell.imageView?.image!.drawInRect(imageRect) cell.imageView?.image! = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); 

O puede usar otro enfoque (no probado) sugerido por @Tommy:

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { [...] CGSize itemSize = CGSizeMake(40, 40); UIGraphicsBeginImageContextWithOptions(itemSize, NO, 0.0) [...] return cell; } 

Swift 3+

 let itemSize = CGSize.init(width: 25, height: 25) UIGraphicsBeginImageContextWithOptions(itemSize, false, UIScreen.main.scale); let imageRect = CGRect.init(origin: CGPoint.zero, size: itemSize) cell?.imageView?.image!.draw(in: imageRect) cell?.imageView?.image! = UIGraphicsGetImageFromCurrentImageContext()!; UIGraphicsEndImageContext(); 

El código anterior es la versión Swift 3+ de lo anterior.

Así es como lo hice. Esta técnica se encarga de mover el texto y las tags de texto detalladas a la izquierda:

 @interface SizableImageCell : UITableViewCell {} @end @implementation SizableImageCell - (void)layoutSubviews { [super layoutSubviews]; float desiredWidth = 80; float w=self.imageView.frame.size.width; if (w>desiredWidth) { float widthSub = w - desiredWidth; self.imageView.frame = CGRectMake(self.imageView.frame.origin.x,self.imageView.frame.origin.y,desiredWidth,self.imageView.frame.size.height); self.textLabel.frame = CGRectMake(self.textLabel.frame.origin.x-widthSub,self.textLabel.frame.origin.y,self.textLabel.frame.size.width+widthSub,self.textLabel.frame.size.height); self.detailTextLabel.frame = CGRectMake(self.detailTextLabel.frame.origin.x-widthSub,self.detailTextLabel.frame.origin.y,self.detailTextLabel.frame.size.width+widthSub,self.detailTextLabel.frame.size.height); self.imageView.contentMode = UIViewContentModeScaleAspectFit; } } @end ... - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil) { cell = [[[SizableImageCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; } cell.textLabel.text = ... cell.detailTextLabel.text = ... cell.imageView.image = ... return cell; } 

vista de imagen agregar como una vista secundaria a la celda tableview

 UIImageView *imgView=[[UIImageView alloc] initWithFrame:CGRectMake(20, 5, 90, 70)]; imgView.backgroundColor=[UIColor clearColor]; [imgView.layer setCornerRadius:8.0f]; [imgView.layer setMasksToBounds:YES]; [imgView setImage:[UIImage imageWithData: imageData]]; [cell.contentView addSubview:imgView]; 

La celda completa no necesita ser rehecha. Puede usar la propiedad indentationLevel e indentationWidth de tableViewCells para cambiar el contenido de su celda. Luego agrega su imageView personalizado al lado izquierdo de la celda.

A Simply Swift ,

Paso 1: Crear una subclase de UITableViewCell
Paso 2: Agregue este método a la Subclase de UITableViewCell

 override func layoutSubviews() { super.layoutSubviews() self.imageView?.frame = CGRectMake(0, 0, 10, 10) } 

Paso 3: Crea un objeto de celda usando esa SubClass en cellForRowAtIndexPath ,

 Ex: let customCell:CustomCell = CustomCell(style: UITableViewCellStyle.Default, reuseIdentifier: "Cell") 

Paso 4: Disfruta

Mejor crea una vista de imagen y agrégala como una vista secundaria a la celda. Luego puedes obtener el tamaño de fotogtwig deseado.

 UIImage *image = cell.imageView.image; UIGraphicsBeginImageContext(CGSizeMake(35,35)); // draw scaled image into thumbnail context [image drawInRect:CGRectMake(5, 5, 35, 35)]; // UIImage *newThumbnail = UIGraphicsGetImageFromCurrentImageContext(); // pop the context UIGraphicsEndImageContext(); if(newThumbnail == nil) { NSLog(@"could not scale image"); cell.imageView.image = image; } else { cell.imageView.image = newThumbnail; } 

Esto funcionó para mí en forma rápida:

Cree una subclase de UITableViewCell (asegúrese de vincular su celda en el guión gráfico)

 class MyTableCell:UITableViewCell{ override func layoutSubviews() { super.layoutSubviews() if(self.imageView?.image != nil){ let cellFrame = self.frame let textLabelFrame = self.textLabel?.frame let detailTextLabelFrame = self.detailTextLabel?.frame let imageViewFrame = self.imageView?.frame self.imageView?.contentMode = .ScaleAspectFill self.imageView?.clipsToBounds = true self.imageView?.frame = CGRectMake((imageViewFrame?.origin.x)!,(imageViewFrame?.origin.y)! + 1,40,40) self.textLabel!.frame = CGRectMake(50 + (imageViewFrame?.origin.x)! , (textLabelFrame?.origin.y)!, cellFrame.width-(70 + (imageViewFrame?.origin.x)!), textLabelFrame!.height) self.detailTextLabel!.frame = CGRectMake(50 + (imageViewFrame?.origin.x)!, (detailTextLabelFrame?.origin.y)!, cellFrame.width-(70 + (imageViewFrame?.origin.x)!), detailTextLabelFrame!.height) } } } 

En cellForRowAtIndexPath, dequeue la celda como su nuevo tipo de celda:

  let cell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath) as! MyTableCell 

Obviamente, cambie los valores numéricos para adaptarse a su diseño

Creé una extensión con la respuesta de @GermanAttanasio. Proporciona un método para cambiar el tamaño de una imagen al tamaño deseado, y otro método para hacer lo mismo al agregar un margen transparente a la imagen (esto puede ser útil para vistas de tabla donde también se desea que la imagen tenga un margen).

 import UIKit extension UIImage { /// Resizes an image to the specified size. /// /// - Parameters: /// - size: the size we desire to resize the image to. /// /// - Returns: the resized image. /// func imageWithSize(size: CGSize) -> UIImage { UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.mainScreen().scale); let rect = CGRectMake(0.0, 0.0, size.width, size.height); drawInRect(rect) let resultingImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return resultingImage } /// Resizes an image to the specified size and adds an extra transparent margin at all sides of /// the image. /// /// - Parameters: /// - size: the size we desire to resize the image to. /// - extraMargin: the extra transparent margin to add to all sides of the image. /// /// - Returns: the resized image. The extra margin is added to the input image size. So that /// the final image's size will be equal to: /// `CGSize(width: size.width + extraMargin * 2, height: size.height + extraMargin * 2)` /// func imageWithSize(size: CGSize, extraMargin: CGFloat) -> UIImage { let imageSize = CGSize(width: size.width + extraMargin * 2, height: size.height + extraMargin * 2) UIGraphicsBeginImageContextWithOptions(imageSize, false, UIScreen.mainScreen().scale); let drawingRect = CGRect(x: extraMargin, y: extraMargin, width: size.width, height: size.height) drawInRect(drawingRect) let resultingImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return resultingImage } } 

El UITableViewCell regular funciona bien para posicionar cosas, pero cell.imageView no parece comportarse como usted lo desea. Descubrí que es bastante sencillo hacer que UITableViewCell se distribuya correctamente al darle a cell.imageView una imagen del tamaño adecuado, como

 // Putting in a blank image to make sure text always pushed to the side. UIGraphicsBeginImageContextWithOptions(CGSizeMake(kGroupImageDimension, kGroupImageDimension), NO, 0.0); UIImage *blank = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); cell.imageView.image = blank; 

Luego puede conectar su propio UIImageView que funcione correctamente con

 // The cell.imageView increases in size to accomodate the image given it. // We don't want this behaviour so we just attached a view on top of cell.imageView. // This gives us the positioning of the cell.imageView without the sizing // behaviour. UIImageView *anImageView = nil; NSArray *subviews = [cell.imageView subviews]; if ([subviews count] == 0) { anImageView = [[UIImageView alloc] init]; anImageView.translatesAutoresizingMaskIntoConstraints = NO; [cell.imageView addSubview:anImageView]; NSLayoutConstraint *aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:cell.imageView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]; [cell.imageView addConstraint:aConstraint]; aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:cell.imageView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]; [cell.imageView addConstraint:aConstraint]; aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:kGroupImageDimension]; [cell.imageView addConstraint:aConstraint]; aConstraint = [NSLayoutConstraint constraintWithItem:anImageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:kGroupImageDimension]; [cell.imageView addConstraint:aConstraint]; } else { anImageView = [subviews firstObject]; } 

Establezca la imagen en unImageView y hará lo que espera que haga un UIImageView. Sea el tamaño que desee, independientemente de la imagen que le dé. Esto debería ir en tableView: cellForRowAtIndexPath:

Esta solución esencialmente dibuja la imagen como ‘aspecto apropiado’ dentro del rect dado.

 CGSize itemSize = CGSizeMake(80, 80); UIGraphicsBeginImageContextWithOptions(itemSize, NO, UIScreen.mainScreen.scale); UIImage *image = cell.imageView.image; CGRect imageRect; if(image.size.height > image.size.width) { CGFloat width = itemSize.height * image.size.width / image.size.height; imageRect = CGRectMake((itemSize.width - width) / 2, 0, width, itemSize.height); } else { CGFloat height = itemSize.width * image.size.height / image.size.width; imageRect = CGRectMake(0, (itemSize.height - height) / 2, itemSize.width, height); } [cell.imageView.image drawInRect:imageRect]; cell.imageView.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); 

Aquí está el método de trabajo de @germanattanasio, escrito para Swift 3

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { ... cell.imageView?.image = myImage let itemSize = CGSize(width:42.0, height:42.0) UIGraphicsBeginImageContextWithOptions(itemSize, false, 0.0) let imageRect = CGRect(x:0.0, y:0.0, width:itemSize.width, height:itemSize.height) cell.imageView?.image!.draw(in:imageRect) cell.imageView?.image! = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() } 

Si usa cell.imageView?.translatesAutoresizingMaskIntoConstraints = false , puede establecer restricciones en el imageView. Aquí hay un ejemplo de trabajo que utilicé en un proyecto. Evité la creación de subclases y no tuve que crear guiones gráficos con celdas de prototipos, pero me tomó bastante tiempo para ponerme en funcionamiento, por lo que probablemente sea mejor usar solo si no hay una forma más simple o más concisa disponible para ti.

 override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { return 80 } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = UITableViewCell(style: .subtitle, reuseIdentifier: String(describing: ChangesRequiringApprovalTableViewController.self)) let record = records[indexPath.row] cell.textLabel?.text = "Title text" if let thumb = record["thumbnail"] as? CKAsset, let image = UIImage(contentsOfFile: thumb.fileURL.path) { cell.imageView?.contentMode = .scaleAspectFill cell.imageView?.image = image cell.imageView?.translatesAutoresizingMaskIntoConstraints = false cell.imageView?.leadingAnchor.constraint(equalTo: cell.contentView.leadingAnchor).isActive = true cell.imageView?.widthAnchor.constraint(equalToConstant: 80).rowHeight).isActive = true cell.imageView?.heightAnchor.constraint(equalToConstant: 80).isActive = true if let textLabel = cell.textLabel { let margins = cell.contentView.layoutMarginsGuide textLabel.translatesAutoresizingMaskIntoConstraints = false cell.imageView?.trailingAnchor.constraint(equalTo: textLabel.leadingAnchor, constant: -8).isActive = true textLabel.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true textLabel.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true let bottomConstraint = textLabel.bottomAnchor.constraint(equalTo: margins.bottomAnchor) bottomConstraint.priority = UILayoutPriorityDefaultHigh bottomConstraint.isActive = true if let description = cell.detailTextLabel { description.translatesAutoresizingMaskIntoConstraints = false description.bottomAnchor.constraint(equalTo: margins.bottomAnchor).isActive = true description.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true cell.imageView?.trailingAnchor.constraint(equalTo: description.leadingAnchor, constant: -8).isActive = true textLabel.bottomAnchor.constraint(equalTo: description.topAnchor).isActive = true } } cell.imageView?.clipsToBounds = true } cell.detailTextLabel?.text = "Detail Text" return cell }