Cómo agregar espacios entre UITableViewCell

objective-c

Question

¿Hay alguna forma de agregar espacio entre UITableViewCell ?

Creé 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 encaje en 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?

Answer 1

Versión Swift

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 suplementario al ejemplo básico de UITableView para Swift .

Visión de conjunto

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 la sección.

Cómo hacerlo

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

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

• 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.section se utiliza en lugar de indexPath.row para obtener los valores adecuados para los elementos de la matriz y las posiciones de tap.

¿Cómo obtuviste el relleno / espacio adicional a la derecha e izquierda?

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

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

Answer 3

Creo que la solución más directa si solo buscas un espacio pequeño y probablemente el menos costoso sería simplemente establecer el color del borde de la celda para el color de fondo de tu tabla y establecer el ancho del borde para obtener el resultado deseado.

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

Answer 4

Deberá establecer el marco en su imagen. El código no probado es

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

Answer 5

Ejemplo en swift 3 ..

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

4. ver el código del controlador es más abajo

      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 fuente completa para Github: enlace

   https://github.com/enamul95/CustomSectionTable

Answer 6

Este artículo ayudó, es más o menos lo que las otras respuestas dijeron pero resumieron 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 inicio UIEdgeInsetsMake permite agregar relleno a los cuatro puntos.

func UIEdgeInsetsMake (_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> UIEdgeInsets

Descripción
Crea un recuadro de borde 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
arriba: El recuadro en la parte superior de un objeto.
izquierda: el recuadro a la izquierda de un objeto
parte inferior: el recuadro en la parte inferior de un objeto.
derecha: el recuadro a la derecha de un objeto.

Devoluciones
Un recuadro para un botón o vista

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

Xcode 9.3 / Swift 4

Answer 7

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

Answer 8

La forma en que logro agregar espaciado entre celdas es hacer numberOfSections = "Su matriz cuenta" 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;
}

Answer 9

Mi situación era que utilicé UIView personalizado para ver ForFeader en la sección también heightForHeader en la sección return constant height decir 40, el problema fue que cuando no hay datos todas las vistas del encabezado se tocaron entre sí. así que quería espaciar 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í.

Answer 10

Mi solución fácil usando Swift :

// Inside UITableViewCell subclass
override func layoutSubviews() {
    super.layoutSubviews()

    let f = contentView.frame
    let fr = UIEdgeInsetsInsetRect(f, UIEdgeInsetsMake(10, 10, 10, 10))
    contentView.frame = fr
}

o un código de línea

override func layoutSubviews() {
    super.layoutSubviews()

    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}

Resultado

Answer 11

Necesitaba hacer el mismo concepto de tener UITableCells con un "espacio" entre ellos. Como no puede literalmente agregar espacio entre las celdas, puede falsificarlo manipulando la altura de la celda de UITableView y luego agregando una UIView a la vista de contenido 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 establecer heightForRowAtIndexPath para 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 la willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath método willDisplayCell:(NewsUITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath .

- (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 altura de WhiteRoundedCornerView 70.0 y que es lo que causa el espacio simulado porque la altura de la celda es en realidad 80.0 pero mi contentView es 70.0 que le da la apariencia.

Puede haber otras formas de lograr esto incluso mejor, pero es solo cómo encontré cómo hacerlo. Espero que pueda ayudar a alguien más.

Answer 12

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

Answer 13

Si no está utilizando los encabezados (o pies de página) de sección, puede usarlos para agregar 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.

Implemente el tableView:heightForHeaderInSection: para controlar el espaciado.

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

Answer 14

Tres enfoques que puedo pensar:

1. Cree una celda de tabla personalizada que represente 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 UIView simple que proporcione el espaciado deseado, y agréguela como una subvista de la vista de la imagen

3. Quiero sugerir que manipules 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?

Answer 15

Utilice UITableViewDelegate, heightForRowAtIndexPath y devuelva el alto de la fila.

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

Answer 16

Verifique mi solución en GitHub con la subclasificación de UITableView y el uso de las características de tiempo de ejecución de Objective-C.
Básicamente, utiliza la estructura de datos privada de Apple UITableViewRowData que 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 distribuir el espaciado de sus celdas de la forma que desee sin configurarlo en las clases de celdas:

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

Answer 17

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

Answer 18

SWIFT 4

cell.frame = UIEdgeInsetsInsetRect(cell.frame, UIEdgeInsetsMake(10, 10, 10, 10))