Cómo agregar espacio entre UITableViewCell


182

¿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?


1
Para Swift 2.2, vea mi respuesta aquí: stackoverflow.com/a/37673417/2696626
ibrahimyilmaz

Respuestas:


160

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 .

ingrese la descripción de la imagen aquí

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.


Hola, me preguntaba si esto sería posible sin convertir todas las filas en secciones. Tengo bordes en cada tableViewCell, por lo que aumentar la altura no ayudará. Tengo muchas personalizaciones con mi celular y no quiero convertirlo en secciones. ¡Gracias!
Ujjwal-Nadhani

3
@ user2901306, al principio tenía mis dudas al usar este método, porque sentía que debería ser capaz de usar solo filas y aumentar un margen o algo así. Sin embargo, no encontré una manera de hacerlo y este método funcionó bastante bien. No tiene que cambiar las personalizaciones en su celular. Básicamente solo necesita agregar numberOfSectionsInTableViewy return 1para el número de filas. Luego, use indexPath.sectionpara obtener el índice de celda actual. Pruébalo una vez. Creo que descubrirá que no necesita hacer muchos cambios en su configuración actual. Esto es definitivamente más fácil que subclasificar.
Suragch

Usar cell.layer.xxx en cellForRow puede darte un golpe de rendimiento. Mejor establecer estos valores en el XIB
Abhishek Bedi

@AbhishekBedi, siempre he encontrado que las layermanipulaciones son bastante rápidas. ¿Estás diciendo esto porque notaste un éxito en el rendimiento o como una buena práctica general? Incluso si los configura en una XIB, aún deben configurarse cuando se crea la celda.
Suragch

1
@FateNuller, no estoy en desacuerdo contigo. La respuesta de Husam se ve bastante bien.
Suragch

150

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 ingrese la descripción de la imagen aquí


11
Buena solución En caso de que alguien tenga problemas, tuve que llamar super.layoutSubviews()primero para asegurarme de que toda la vista se presentara correctamente antes de configurar su marco.
ruttopia

@Husam Tu solución funcionó para mí. Pero tengo un problema cuando selecciono la celda. He establecido el borde para contentView y cada vez que seleccione la celda, el borde será más pequeño. ¿Cómo puedo arreglarlo?
Bad_Developer

@SonHoang Es posible que deba reemplazar didSetpor selectedvariable y llamada layoutSubviews()en el interior!
Husam

1
Hola Husam Gracias por la gran solución. ¿No me digas cómo cambiar el color del contenido agregado entre las celdas?
A.Kant

1
Esta es una solución mucho mejor que la respuesta aceptada. La respuesta aceptada tiene casi 100 líneas de código y esta es solo una. Increíble.
YungGun

135

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

22
Esto funciona muy bien. Tuve que cambiar un poco la cellForRowAtIndexPath, no la matriz normal [indexPath.row] sino la matriz [indexPath.section]. De lo contrario, mostrará el primer elemento de la matriz en todas las secciones.
Tom Spee

@TomSpee: ¿cómo resolvió ese problema en cellForRowAtIndexPath?

55
@TKutal - Al igual que el código normal en cellForRowAtIndexPath pero cambia indexPath.row a indexPath.section
Tom Spee el

Aunque esto logra lo que el autor de la pregunta desea, no creo que Apple recomiende este enfoque. Corrígeme si me equivoco, pero creo que las "secciones" están destinadas a separar lógicamente las "secciones" de datos que estás representando en tu tabla. No debe usar "secciones" para diseñar los espacios entre cada celda de datos que, de lo contrario, deberían mostrarse en una sola sección. Creo que el mejor enfoque, aunque más difícil, sería subclasificar UITableViewCell y simular el separador de vista de tabla agregando una vista en la parte inferior de la celda.
FateNuller

2
Entonces Apple no debería quejarse, sino crear un método conveniente para variar el espacio entre filas.
Arnie Schwarzvogel

44

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:

Espaciado entre UITableViewCells

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.


Solo para su información, para un gran número de celdas, desearía establecer la vista de contenido dentro de la subclase de celdas en lugar de willDisplayCell. El rendimiento comienza a tener un gran éxito haciéndolo de esta manera
mientras

@ BBH1023 La capa de sombra se multiplica cada vez que aparece la vista al navegar hacia adelante y hacia atrás para ver rápidamente. ¿Cómo sugeriría cancelar eso si ya se ha aplicado una vez?
Soulshined

para poder agregar más sombras, haga esto: NSInteger tag = 120; if (indexPath.row! = 0) {if (cell.tag! = 120) {cell.contentView.backgroundColor = [UIColor clearColor]; ... [cell.contentView sendSubviewToBack: whiteRoundedCornerView]; cell.tag = tag; }}
usuario3001228

24

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

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

2
Acabo de probar con backgroundView y esta es la solución de trabajo más simple
Sam

2
Solo asegúrese de llamar a este código layoutSubviewssi está subclasificandoUITableViewCell
Mazyod

30
@ NicoHämäläinen Bueno, he desarrollado más de 20 aplicaciones en los últimos tres años, y SIEMPRE subclasifiqué UITableViewCellpara obtener el resultado que necesito :) ... La subclasificación UITableViewCelles muy común.
Mazyod

1
@ NicoHämäläinen no hay nada de malo en subclasificar UITableViewCell. Cuando esté creando una costumbre UITableViewCells, debería estar subclasificando UITableViewCell.
Popeye

1
@ NicoHämäläinen, entonces debes actualizar tu comentario. Las personas tienden a obtener información y no leen más. Dado que este sitio es un gran recurso y los desarrolladores tienden a confiar en los hechos que ven aquí, podría inducirlos a error a pensar cosas terribles ... solo mis dos monedas. Tal vez tengo histeria
chrs

11

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!


1
Funciona en Swift 5 también.
LondonGuy

1
¡¡La mejor respuesta!! Gracias. Si usa una celda personalizada, esto funciona en el "override func awakeFromNib ()"
trees_are_great

10

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

1
No es una buena idea para un fondo transparente. De lo contrario, puede funcionar.
ergunkocak

1
Esto es verdad. ¡No es una solución para todos los casos, pero funcionará para algunos! @ergunkocak
Craig

8

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.


8

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.


El texto en la celda está recortado.
Mehdico

la anulación de CGRect está funcionando y no agregué awakeFromNib one.
Eric Tan

5

Ejemplo en swift 3 ..

ingrese la descripción de la imagen aquí

  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


duplicó otra respuesta que @Suragch ya recibió respuesta para una versión rápida, por favor evite hacer duplicaciones
Amr Angry

1
Esta no es una buena solución. Si necesita una sección de encabezado con un título, esto no funcionará
kuzdu

4

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?


4

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.


4

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

3

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
    }

2

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

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

1
No pude ver ningún cambio visual después de aplicar de layoutMarginsesta manera. Tal vez porque estoy usando autolayout.
Cœur

Los márgenes no "romperían" una altura explícita para la celda, por lo que debe tener una altura automática para que las celdas funcionen
Aviel Gross

1
Tengo altura automática.
Cœur

2

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


Esta respuesta dice incorrectamente que el código es compatible con Swift 4, pero UIEdgeInsetsMake ha quedado en desuso. UIEdgeInsets se debe utilizar en su lugar.
José

developer.apple.com/documentation/uikit/… ¿ exactamente dónde dice que ha quedado en desuso? Lo uso en mis proyectos y estoy trabajando con el último Xcode, por lo tanto Swift 9.3 @ José
Mauricio Chirino

Tienes razón, lo siento, mi mal. Se prefiere UIEdgeInsets, pero eso no significa que el otro esté en desuso. SwiftLint se quejará sobre el constructor heredado cuando use UIEdgeInsetsMake.
José

1
Ok lo tengo. Elimine el voto negativo si fue usted quien emitió el voto, nunca dije que mi respuesta era la única posible.
Mauricio Chirino

Dice que no puedo cambiar mi voto a menos que usted cambie su respuesta. ¿Podrías modificar un poco la redacción?
José

2

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)
        ])
    }
}


1

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í.


1

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


1

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
}

1

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:

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

1

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


0

ingrese la descripción de la imagen aquí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!

0

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.



-2

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)
}

-4

Utilice UITableViewDelegate heightForRowAtIndexPathy devuelva el alto de la fila.

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

La pregunta es cómo agregar espacio entre las celdas en lugar de la altura de la celda
shippo7
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.