¿Hay alguna forma de agregar espacio entre UITableViewCell?

He creado una tabla y cada celda solo contiene una imagen. La imagen se asigna a la celda de esta manera:

cell.imageView.image = [myImages objectAtIndex:indexPath.row];

pero esto hace que la imagen se agrande y se ajuste a toda la celda, y no hay espacio entre las imágenes.

O digamos de esta manera, la altura de la imagen es, por ejemplo, 50, y quiero agregar 20 espacios entre las imágenes. ¿Hay alguna forma de lograr esto?

Versión rápida

Actualizado para Swift 3

Esta respuesta es algo más general que la pregunta original por el bien de los futuros espectadores. Es un ejemplo complementario al ejemplo básico UITableView para Swift .

Visión general

La idea básica es crear una nueva sección (en lugar de una nueva fila) para cada elemento de la matriz. Las secciones se pueden espaciar utilizando la altura del encabezado de sección.

Cómo hacerlo

• Configure su proyecto como se describe en el ejemplo UITableView para Swift . (Es decir, agregue UITableVieway conecte la tableViewsalida al controlador de vista).

• En Interface Builder, cambie el color de fondo de la vista principal a azul claro y el UITableViewcolor de fondo a claro.

• Reemplace el código ViewController.swift con lo siguiente.

ViewController.swift

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // These strings will be the data for the table view cells
    let animals: [String] = ["Horse", "Cow", "Camel", "Sheep", "Goat"]
    
    let cellReuseIdentifier = "cell"
    let cellSpacingHeight: CGFloat = 5
    
    @IBOutlet var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // These tasks can also be done in IB if you prefer.
        self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellReuseIdentifier)
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    // MARK: - Table View delegate methods
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return self.animals.count
    }
    
    // There is just one row in every section
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }
    
    // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return cellSpacingHeight
    }
    
    // Make the background color show through
    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let headerView = UIView()
        headerView.backgroundColor = UIColor.clear
        return headerView
    }
    
    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell:UITableViewCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as UITableViewCell!
        
        // note that indexPath.section is used rather than indexPath.row
        cell.textLabel?.text = self.animals[indexPath.section]
        
        // add border and color
        cell.backgroundColor = UIColor.white
        cell.layer.borderColor = UIColor.black.cgColor
        cell.layer.borderWidth = 1
        cell.layer.cornerRadius = 8
        cell.clipsToBounds = true
        
        return cell
    }
    
    // method to run when table view cell is tapped
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // note that indexPath.section is used rather than indexPath.row
        print("You tapped cell number \(indexPath.section).")
    }
}

Tenga en cuenta que indexPath.sectionse usa en lugar de indexPath.rowobtener los valores adecuados para los elementos de la matriz y las posiciones de tap.

¿Cómo conseguiste el relleno / espacio extra a la derecha y a la izquierda?

Lo obtuve de la misma manera que agrega espacio a cualquier vista. Usé restricciones de diseño automático. Simplemente use la herramienta pin en el Creador de interfaces para agregar espacio para las restricciones iniciales y finales.

Mi solución fácil usando Swift :

// Inside UITableViewCell subclass

override func layoutSubviews() {
    super.layoutSubviews()

    contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
}

Resultado

La forma en que logro agregar espacio entre celdas es hacer numberOfSections = "Your array count" y hacer que cada sección contenga solo una fila. Y luego defina headerView y su altura.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return yourArry.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 1;
}

-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return cellSpacingHeight;
}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *v = [UIView new];
    [v setBackgroundColor:[UIColor clearColor]];
    return v;
}

Necesitaba hacer el mismo concepto de tener UITableCells tener un "espacio" entre ellos. Como literalmente no puede agregar espacio entre celdas, puede simularlo manipulando la altura de celda de UITableView y luego agregando una UIView a contentView de su celda. Aquí hay una captura de pantalla de un prototipo que hice en otro proyecto de prueba cuando estaba simulando esto:

Aquí hay un código (Nota: hay muchos valores codificados para fines de demostración)

Primero, necesitaba configurar el heightForRowAtIndexPathpara permitir diferentes alturas en UITableViewCell.

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{

    NSString *text = [self.newsArray  objectAtIndex:[indexPath row]];
    if ([text isEqual:@"December 2012"])
    {
        return 25.0;
    }

    return 80.0;
}

A continuación, quiero manipular el aspecto de UITableViewCells, así que lo hago en el willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPathmétodo.

- (void)tableView:(UITableView *)tableView willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (cell.IsMonth)
    {
        UIImageView *av = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 20, 20)];
        av.backgroundColor = [UIColor clearColor];
        av.opaque = NO;
        av.image = [UIImage imageNamed:@"month-bar-bkgd.png"];
        UILabel *monthTextLabel = [[UILabel alloc] init];
        CGFloat font = 11.0f;
        monthTextLabel.font = [BVFont HelveticaNeue:&font];

        cell.backgroundView = av;
        cell.textLabel.font = [BVFont HelveticaNeue:&font];
        cell.textLabel.textColor = [BVFont WebGrey];
    }


    if (indexPath.row != 0)
    {
        cell.contentView.backgroundColor = [UIColor clearColor];
        UIView *whiteRoundedCornerView = [[UIView alloc] initWithFrame:CGRectMake(10,10,300,70)];
        whiteRoundedCornerView.backgroundColor = [UIColor whiteColor];
        whiteRoundedCornerView.layer.masksToBounds = NO;
        whiteRoundedCornerView.layer.cornerRadius = 3.0;
        whiteRoundedCornerView.layer.shadowOffset = CGSizeMake(-1, 1);
        whiteRoundedCornerView.layer.shadowOpacity = 0.5;
        [cell.contentView addSubview:whiteRoundedCornerView];
        [cell.contentView sendSubviewToBack:whiteRoundedCornerView];

    }
}

Tenga en cuenta que hice mi whiteRoundedCornerView height 70.0 y eso es lo que causa el espacio simulado porque la altura de la celda es en realidad 80.0 pero mi contentView es 70.0, lo que le da la apariencia.

Puede haber otras formas de lograr esto aún mejor, pero así es como descubrí cómo hacerlo. Espero que pueda ayudar a alguien más.

Tendrás que configurar el marco a tu imagen. El código no probado es

cell.imageView.frame = CGRectOffset(cell.frame, 10, 10);

Yo estaba en el mismo barco. Al principio intenté cambiar a secciones, pero en mi caso terminó siendo más dolor de cabeza de lo que pensaba originalmente, así que he estado buscando una alternativa. Para seguir usando filas (y no meterse con cómo accede a los datos de su modelo), esto es lo que funcionó para mí simplemente usando una máscara :

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
{
    let verticalPadding: CGFloat = 8

    let maskLayer = CALayer()
    maskLayer.cornerRadius = 10    //if you want round edges
    maskLayer.backgroundColor = UIColor.black.cgColor
    maskLayer.frame = CGRect(x: cell.bounds.origin.x, y: cell.bounds.origin.y, width: cell.bounds.width, height: cell.bounds.height).insetBy(dx: 0, dy: verticalPadding/2)
    cell.layer.mask = maskLayer
}

Todo lo que le queda por hacer es aumentar la altura de la celda en el mismo valor que desea verticalPadding, y luego modificar su diseño interno para que cualquier vista que tenga espacio en los bordes de la celda aumente ese mismo espacio verticalPadding/2. Un inconveniente menor: obtienes verticalPadding/2relleno tanto en la parte superior como en la parte inferior de tableView, pero puedes solucionarlo rápidamente configurando tableView.contentInset.bottom = -verticalPadding/2y tableView.contentInset.top = -verticalPadding/2. Espero que esto ayude a alguien!

Creo que la solución más sencilla si solo busca un poco de espacio y probablemente el más económico sería simplemente establecer el color del borde de la celda en el color de fondo de sus tablas y luego establecer el ancho del borde para obtener el resultado deseado.

    cell.layer.borderColor = blueColor.CGColor
    cell.layer.borderWidth = 3

Si aún no está usando encabezados de sección (o pies de página), puede usarlos para agregar un espacio arbitrario a las celdas de la tabla. En lugar de tener una sección con n filas, cree una tabla con n secciones con una fila cada una.

Implementar el tableView:heightForHeaderInSection: método para controlar el espaciado.

También puede implementar tableView:viewForHeaderInSection:para controlar cómo se ve el espaciado.

Lo resolví así en Swift 4.

Creo una extensión de UITableViewCell e incluyo este código:

override open var frame: CGRect {
    get {
        return super.frame
    }
    set (newFrame) {
        var frame =  newFrame
        frame.origin.y += 10
        frame.origin.x += 10
        frame.size.height -= 15
        frame.size.width -= 2 * 10
        super.frame = frame
    }
}

override open func awakeFromNib() {
    super.awakeFromNib()
    layer.cornerRadius = 15
    layer.masksToBounds = false
}

Espero que te ayude.

Ejemplo en swift 3 ..

1. Crear una aplicación de vista única
2. agregar tableview en el controlador de vista
3. agregar una celda personalizada para la celda tablview

4. ver el código del controlador es abajo como

      class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
   
      @IBOutlet weak var tableView: UITableView!
   
   
       var arraytable = [[String:Any]]()
        override func viewDidLoad() {
        super.viewDidLoad()
   
        arraytable = [
        ["title":"About Us","detail":"RA-InfoTech Ltd -A Joint Venture IT Company formed by Bank Asia Ltd"],
        ["title":"Contact","detail":"Bengal Center (4th & 6th Floor), 28, Topkhana Road, Dhaka - 1000, Bangladesh"]
   ]
   
   
   
   
   
   
      tableView.delegate = self
      tableView.dataSource = self
   
      //For Auto Resize Table View Cell;
     tableView.estimatedRowHeight = 44
      tableView.rowHeight = UITableViewAutomaticDimension
   
      //Detault Background clear
      tableView.backgroundColor = UIColor.clear
   }

   func numberOfSections (en tableView: UITableView) -> Int {return arraytable.count}

      func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
    }
   
   // Set the spacing between sections
    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
   return 10
   }
   
   // Make the background color show through
     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
   let headerView = UIView()
   headerView.backgroundColor = UIColor.clear
   
   return headerView
   }
   
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell")! as! CustomCell
   
        cell.tv_title.text = arraytable[indexPath.section]["title"] as! String?
       cell.tv_details.text = arraytable[indexPath.section]["detail"] as! String?
   
      //label height dynamically increase
      cell.tv_details.numberOfLines = 0
   
   
   
   
      //For bottom border to tv_title;
      let frame =  cell.tv_title.frame
       let bottomLayer = CALayer()
      bottomLayer.frame = CGRect(x: 0, y: frame.height - 1, width: frame.width, height: 1)
       bottomLayer.backgroundColor = UIColor.black.cgColor
      cell.tv_title.layer.addSublayer(bottomLayer)
   
     //borderColor,borderWidth, cornerRadius
     cell.backgroundColor = UIColor.lightGray
     cell.layer.borderColor = UIColor.red.cgColor
     cell.layer.borderWidth = 1
     cell.layer.cornerRadius = 8
     cell.clipsToBounds = true
   
     return cell
     }
   
      }

5. Descargar la fuente completa a Github: enlace

   https://github.com/enamul95/CustomSectionTable

Se me ocurren tres enfoques:

1. Cree una celda de tabla personalizada que presente la vista de la celda completa de la manera que desee

2. En lugar de agregar la imagen a la vista de imagen, borre las subvistas de la vista de imagen, cree una vista personalizada que agregue un UIImageView para la imagen y otra vista, quizás una simple UIView que proporcione el espacio deseado y agréguelo como una subvista de La vista de la imagen.

3. Quiero sugerir que manipule el UIImageView directamente para establecer un tamaño / relleno fijo, pero no estoy cerca de Xcode, así que no puedo confirmar si esto funcionaría.

¿Tiene sentido?

Sí, puede aumentar o disminuir el espacio (relleno) entre dos celdas creando una vista base en la vista de contenido en la celda. Establezca un color claro para el fondo de la vista de contenido y puede ajustar la altura de la vista base para crear espacio entre las celdas.

Según la respuesta de Husam: el uso de la capa de celda en lugar de la vista de contenido permite agregar un borde alrededor de la celda completa y el accesorio si es necesario. Este método requiere un ajuste cuidadoso de las restricciones inferiores de la celda, así como de esos insertos, de lo contrario, la vista no será adecuada.

@implementation TableViewCell

- (void)awakeFromNib { 
    ... 
}

- (void) layoutSubviews {
    [super layoutSubviews];

    CGRect newFrame = UIEdgeInsetsInsetRect(self.layer.frame, UIEdgeInsetsMake(4, 0, 4, 0));
    self.layer.frame = newFrame;
}

@end

Cambie el número de filas en la sección a 1. Ha cambiado el número de secciones en lugar del número de filas.

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        1
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 2
    }

Aquí pones espacio entre filas

 func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return 50
    }

Creo que esta es la solución más limpia:

class MyTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
    }
}

Este artículo ayudó, es más o menos lo que dijeron las otras respuestas, pero resumir y conciso

https://medium.com/@andersongusmao/left-and-right-margins-on-uitableviewcell-595f0ba5f5e6

En él, solo los aplica a los lados izquierdo y derecho, pero el UIEdgeInsetsMakeinit permite agregar relleno a los cuatro puntos.

func UIEdgeInsetsMake (_ arriba: CGFloat, _ izquierda: CGFloat, _ abajo: CGFloat, _ derecha: CGFloat) -> UIEdgeInsets

Descripción
Crea un recuadro para un botón o vista. Un recuadro es un margen alrededor de un rectángulo. Los valores positivos representan márgenes más cercanos al centro del rectángulo, mientras que los valores negativos representan márgenes más alejados del centro.

Parámetros
top: el recuadro en la parte superior de un objeto.
left: el recuadro a la izquierda de un objeto
inferior: el recuadro en la parte inferior de un objeto.
right: el recuadro a la derecha de un objeto.

Devuelve
un recuadro para un botón o vista

Tenga en cuenta que UIEdgeInsets también se puede utilizar para lograr lo mismo.

Xcode 9.3 / Swift 4

No es necesario usar un montón de secciones diferentes. Las otras respuestas usan inserciones de marco y CGRect y capas y ... BLAH. No está bien; use el diseño automático y un UITableViewCell personalizado. En ese UITableViewCell, en lugar de ver su contenido dentro de la vista de contenido, cree una nueva vista de contenedor (una vista de UIV), subvista la vista de contenedor dentro de la vista de contenido, luego subvista todas sus vistas dentro de la vista de contenedor.

Para hacer el espaciado ahora, simplemente edite los márgenes de diseño de la vista del contenedor, así:

class CustomTableViewCell: UITableViewCell {
    let containerView = UIView()
    let imageView = UIImageView()

    required init?(coder aDecoder: NSCoder) {super.init(coder: aDecoder)}

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        containerView.translatesAutoResizingMaskIntoConstraints = false
        imageView.translatesAutoResizingMaskIntoConstraints = false
        contentView.addSubview(containerView)
        containerView.addSubview(imageView)

        contentView.layoutMargins = UIEdgeInsets(top: 15, left: 3, bottom: 15, right: 3)
        containerView.layoutMargins = UIEdgeInsets(top: 15, left: 17, bottom: 15, right: 17) // It isn't really necessary unless you've got an extremely complex table view cell. Otherwise, you could just write e.g. containerView.topAnchor

        let cg = contentView.layoutMarginsGuide
        let lg = containerView.layoutMarginsGuide
        NSLayoutConstraint.activate([
            containerView.topAnchor.constraint(equalTo: cg.topAnchor),
            containerView.leadingAnchor.constraint(equalTo: cg.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: cg.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: cg.bottomAnchor),
            imageView.topAnchor.constraint(equalTo: lg.topAnchor),
            imageView.leadingAnchor.constraint(equalTo: lg.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: lg.trailingAnchor),
            imageView.bottomAnchor.constraint(equalTo: lg.bottomAnchor)
        ])
    }
}

Intente buscar en - (UIEdgeInsets) layoutMargins; en la celda

Mi situación fue que usé UIView personalizado para ver ForHeader en la sección también heightForHeader en la sección de retorno de altura constante, digamos 40, el problema fue cuando no hay datos, todas las vistas de encabezado se tocaron entre sí. así que quería espacio entre la sección en ausencia de datos, así que lo arreglé simplemente cambiando el plano "estilo de vista de tabla" a "Grupo". Y funcionó para mí.

Vea mi solución en GitHub con la subclasificación UITableViewy el uso de las características de tiempo de ejecución de Objective-C.
Básicamente utiliza la estructura de datos privados de Apple UITableViewRowDataque obtuve buscando encabezado de tiempo de ejecución privado de UITableView:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableView.h ,

y aquí está la clase privada deseada que contiene todo lo que necesita para diseñar el espaciado de sus celdas como desee sin configurarlo en las clases de celdas:

https://github.com/JaviSoto/iOS10-Runtime-Headers/blob/master/Frameworks/UIKit.framework/UITableViewRowData.h

Estaba teniendo problemas para que esto funcione junto con los colores de fondo y las vistas de accesorios en la celda. Terminé teniendo que:

1) Establezca la propiedad de vista de fondo de las celdas con un conjunto UIView con un color de fondo.

let view = UIView()
view.backgroundColor = UIColor.white
self.backgroundView = view

2) Vuelva a colocar esta vista en layoutSubviews para agregar la idea de espaciado

override func layoutSubviews() {
    super.layoutSubviews()
    backgroundView?.frame = backgroundView?.frame.inset(by: UIEdgeInsets(top: 2, left: 0, bottom: 0, right: 0)) ?? CGRect.zero
}

Usar los encabezados como espaciado funcionaría bien, supongo que si no quieres usar ningún encabezado. De lo contrario, probablemente no sea la mejor idea. Lo que estoy pensando es crear una vista de celda personalizada.

Ejemplos:

• Usando Nib
• En codigo

En la celda personalizada, haga una vista de fondo con restricciones para que no llene toda la celda, dele algo de relleno.

Luego, haga invisible el fondo de la vista de tabla y elimine los separadores:

// Make the background invisible
tableView.backgroundView = UIView()
tableView.backgroundColor = .clear

// Remove the separators
tableview.separatorStyle = .none

Si no desea cambiar la sección y el número de fila de su vista de tabla (como lo hice yo), esto es lo que debe hacer:

1) Agregue un ImageView a la parte inferior de la vista de celda de su tabla.

2) Haga que sea del mismo color que el color de fondo de la vista de tabla.

Lo hice en mi aplicación y funciona perfectamente. ¡Salud! :RE

SWift-5, espacio entre UITableViewCell

    1. use sections instead of rows
    2. each section should return one row
    3. assign your cell data like this e.g [indexPath.section], instead of row
    4. use UITableView Method "heightForHeader" and return your desired spacing
    5. Do rest things as you were doing it

    Thanks!

Simplemente puede usar la restricción en un código como este:

class viewCell : UITableViewCell 
{

@IBOutlet weak var container: UIView!



func setShape() {
    self.container.backgroundColor = .blue
    self.container.layer.cornerRadius = 20
    container.translatesAutoresizingMaskIntoConstraints = false
    self.container.widthAnchor.constraint(equalTo:contentView.widthAnchor , constant: -40).isActive = true
           self.container.heightAnchor.constraint(equalTo: contentView.heightAnchor,constant: -20).isActive = true
           self.container.centerXAnchor.constraint(equalTo: contentView.centerXAnchor).isActive = true
           self.container.centerYAnchor.constraint(equalTo: contentView.centerYAnchor).isActive = true

    }
}

Es importante agregar una subvista (contenedor) y poner otros elementos en ella.

agregue una vista interna a la celda y luego agregue sus propias vistas.

Solución Swift 5.0

Dentro de la subclase UITableViewCell

override func layoutSubviews() {
    super.layoutSubviews()
    let padding = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
    bounds = UIEdgeInsetsInsetRect(bounds, padding)
}

Utilice UITableViewDelegate heightForRowAtIndexPathy devuelva el alto de la fila.

 (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 100.0f ;
}