Existe alguma maneira de adicionar espaçamento entre eles UITableViewCell?

Eu criei uma tabela e cada célula contém apenas uma imagem. A imagem é atribuída à célula assim:

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

mas isso faz com que a imagem seja ampliada e ajustada à célula inteira, e não há espaçamento entre as imagens.

Ou, digamos assim, a altura da imagem é, por exemplo, 50, e eu quero adicionar 20 espaçamentos entre as imagens. Existe alguma maneira de conseguir isso?

Versão rápida

Atualizado para o Swift 3

Essa resposta é um pouco mais geral do que a pergunta original para o futuro dos espectadores. É um exemplo suplementar ao exemplo básico de UITableView para Swift .

Visão geral

A idéia básica é criar uma nova seção (em vez de uma nova linha) para cada item da matriz. As seções podem ser espaçadas usando a altura do cabeçalho da seção.

Como fazer isso

• Configure seu projeto conforme descrito no exemplo UITableView para Swift . (Ou seja, adicione um UITableViewe conecte a tableViewtomada ao View Controller).

• No Interface Builder, altere a cor de fundo da vista principal para azul claro e a UITableViewcor de fundo para limpar.

• Substitua o código ViewController.swift pelo seguinte.

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

Observe que indexPath.sectioné usado em vez de indexPath.rowobter os valores adequados para os elementos da matriz e as posições de toque.

Como você conseguiu espaço / preenchimento extra à direita e à esquerda?

Entendi da mesma maneira que você adiciona espaçamento a qualquer visualização. Eu usei restrições de layout automático. Basta usar a ferramenta pin no Interface Builder para adicionar espaçamento para as restrições iniciais e finais.

Minha solução fácil usando o 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

A maneira como consigo adicionar espaçamento entre células é fazer numberOfSections = "Your array count" e fazer com que cada seção contenha apenas uma linha. E então defina headerView e sua 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;
}

Eu precisava fazer o mesmo conceito de ter UITableCells com um "espaço" entre eles. Como você não pode literalmente adicionar espaço entre as células, pode falsificá-lo, manipulando a altura da célula do UITableView e adicionando uma UIView ao contentView da sua célula. Aqui está uma captura de tela de um protótipo que fiz em outro projeto de teste quando simulava isso:

Aqui está um código (Nota: existem muitos valores codificados para fins de demonstração)

Primeiro, eu precisava definir o heightForRowAtIndexPathpara permitir diferentes alturas no 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;
}

Em seguida, quero manipular a aparência do UITableViewCells para fazer isso no 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];

    }
}

Observe que eu criei minha altura whiteRoundedCornerView 70.0 e é isso que causa o espaço simulado porque a altura da célula é realmente 80.0, mas meu contentView é 70.0, o que lhe dá a aparência.

Pode haver outras maneiras de conseguir isso ainda melhor, mas é exatamente como eu descobri como fazê-lo. Espero que possa ajudar outra pessoa.

Você terá que definir o quadro para a sua imagem. O código não testado é

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

Eu estava no mesmo barco. No começo, tentei mudar para as seções, mas, no meu caso, acabou sendo mais uma dor de cabeça do que eu pensava inicialmente, então procurei uma alternativa. Para continuar usando linhas (e não mexer em como você acessa os dados do modelo), eis o que funcionou para mim usando uma 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
}

Tudo o que você precisa fazer é aumentar a altura da célula com o mesmo valor desejado verticalPaddinge, em seguida, modificar seu layout interno para que todas as visualizações com espaçamento nas bordas da célula tenham o mesmo espaçamento aumentado verticalPadding/2. Menor desvantagem: você recebe verticalPadding/2preenchimento na parte superior e inferior do tableView, mas pode corrigi-lo rapidamente, definindo tableView.contentInset.bottom = -verticalPadding/2e tableView.contentInset.top = -verticalPadding/2. Espero que isso ajude alguém!

Eu acho que a solução mais direta, se você está procurando um pouco de espaço e provavelmente menos caro, seria simplesmente definir a cor da borda da célula para a cor de fundo das tabelas e definir a largura da borda para obter o resultado desejado!

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

Se você ainda não estiver usando cabeçalhos (ou rodapés) de seção, poderá usá-los para adicionar espaçamento arbitrário às células da tabela. Em vez de ter uma seção com n linhas, crie uma tabela com n seções com uma linha cada.

Implemente o tableView:heightForHeaderInSection:método para controlar o espaçamento.

Você também pode implementar tableView:viewForHeaderInSection:para controlar a aparência do espaçamento.

Eu resolvi dessa maneira no Swift 4.

Crio uma extensão do UITableViewCell e incluo 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 ajude você.

Exemplo no rápido 3 ..

1. Vincar um aplicativo de visualização única
2. adicionar tableview no controlador de exibição
3. adicionar uma célula personalizada para a célula tablview

4. ver código do controlador é abaixo 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 (em tableView: UITableView) -> Int {retornar 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. Faça o download do código-fonte completo para o Github: link

   https://github.com/enamul95/CustomSectionTable

Posso pensar em três abordagens:

1. Crie uma célula de tabela personalizada que expanda a exibição de toda a célula da maneira que você deseja

2. Em vez de adicionar a imagem à visualização de imagem, limpe as subvisões da visualização de imagem, crie uma visualização personalizada que adicione um UIImageView para a imagem e outra, talvez uma UIView simples que forneça o espaçamento desejado e adicione-a como uma subvisualização de a visualização da imagem.

3. Quero sugerir que você manipule o UIImageView diretamente para definir um tamanho / preenchimento fixo, mas não estou nem perto do Xcode, portanto não posso confirmar se / como isso funcionaria.

Isso faz sentido?

Sim, você pode aumentar ou diminuir o espaçamento (preenchimento) entre duas células, criando uma exibição base na exibição de conteúdo na célula. Defina cores claras para o plano de fundo da exibição de conteúdo e ajuste a altura da exibição base para criar espaço entre as células.

Com base na resposta de Husam: Usar a camada de célula em vez da exibição de conteúdo permite adicionar uma borda em torno de toda a célula e do acessório, se necessário. Esse método requer um ajuste cuidadoso das restrições inferiores da célula e das inserções, caso contrário a visualização não será adequada.

@implementation TableViewCell

- (void)awakeFromNib { 
    ... 
}

- (void) layoutSubviews {
    [super layoutSubviews];

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

@end

Alterar o número de linhas na seção para 1 Você alterou o número de seções em vez do número de linhas

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

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

Aqui você coloca espaçamento entre linhas

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

Eu acho que esta é a solução mais limpa:

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

Este artigo ajudou, é basicamente o que as outras respostas disseram, mas resumem e são concisas

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

Nele, ele apenas os aplica nos lados esquerdo e direito, mas o UIEdgeInsetsMakeinit permite adicionar preenchimento aos quatro pontos.

func UIEdgeInsetsMake (_ parte superior: CGFloat, _ esquerda: CGFloat, _ parte inferior: CGFloat, _ direita: CGFloat) -> UIEdgeInsets

Descrição
Cria uma inserção de aresta para um botão ou vista. Uma inserção é uma margem ao redor de um retângulo. Valores positivos representam margens mais próximas do centro do retângulo, enquanto valores negativos representam margens mais distantes do centro.

Parâmetros
top: A inserção na parte superior de um objeto.
left: A inserção na parte
inferior esquerda de um objeto : A inserção na parte inferior de um objeto.
right: a inserção à direita de um objeto.

Retorna
Uma inserção para um botão ou exibição

Observe que UIEdgeInsets também pode ser usado para obter o mesmo.

Xcode 9.3 / Swift 4

Não é necessário o uso de várias seções diferentes. As outras respostas usam inserções de quadro e CGRect e camadas e ... BLAH. Não é bom; use o layout automático e um UITableViewCell personalizado. Nesse UITableViewCell, em vez de sub-visualizar seu conteúdo dentro do contentView, crie um novo containerView (um UIView), sub-visualize a visualização do contêiner dentro do contentView e sub-visualize todas as suas visualizações na visualização do contêiner.

Para fazer o espaçamento agora, basta editar as margens do layout da exibição do contêiner, da seguinte maneira:

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

Tente pesquisar em - (UIEdgeInsets) layoutMargins; na célula

Minha situação foi que eu usei o UIView personalizado para viewForHeader na seção também heightForHeader na seção return constant height, digamos 40, problema foi quando não há dados, todas as visualizações de cabeçalho foram tocadas entre si. então eu queria espaço entre a seção na ausência de dados, então eu corrigi apenas alterando o plano "tableview style" para "Group" .e funcionou para mim.

Confira minha solução no GitHub com subclassificação UITableViewe uso dos recursos de tempo de execução do Objective-C.
Basicamente, ele usa a estrutura de dados privada da Apple UITableViewRowDataque eu procurei no cabeçalho de tempo de execução privado UITableView:

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

e aqui está a classe privada desejada que contém tudo o que você precisa para planejar o espaçamento das células, da maneira que desejar, sem defini-las nas classes das células:

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

Eu estava tendo problemas para que isso funcionasse ao lado das cores de plano de fundo e das visualizações acessórias na célula. Acabou tendo que:

1) Defina a propriedade de exibição de plano de fundo das células com um UIView definido com uma cor de plano de fundo.

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

2) Reposicione essa exibição em layoutSubviews para adicionar a ideia de espaçamento

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

Usar os cabeçalhos como espaçamento funcionaria bem, acho que se você não quiser usar nenhum cabeçalho. Caso contrário, provavelmente não é a melhor ideia. O que estou pensando é criar uma exibição de célula personalizada.

Exemplos:

• Usando ponta
• Em código

Na célula personalizada, faça uma visualização em segundo plano com restrições para que não preencha a célula inteira, forneça algum preenchimento.

Em seguida, torne o fundo da tableview invisível e remova os separadores:

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

// Remove the separators
tableview.separatorStyle = .none

Se você não deseja alterar o número da seção e da linha da sua exibição de tabela (como eu fiz), aqui está o que você faz:

1) Adicione um ImageView na parte inferior da visualização da célula da tabela.

2) Crie a mesma cor da cor de fundo da exibição da tabela.

Eu fiz isso no meu aplicativo e funciona perfeitamente. Felicidades! : D

SWift-5, espaçamento 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!

Você pode simplesmente usar restrições em códigos 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

    }
}

é importante adicionar subview (contêiner) e colocar outros elementos nele.

Solução Swift 5.0

Dentro da subclasse UITableViewCell

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

adicione uma visualização interna à célula e adicione suas próprias visualizações.

Use UITableViewDelegate heightForRowAtIndexPathe retorne a altura da linha.

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