Como adicionar espaçamento entre UITableViewCell

182

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?

saili
fonte
1
Para Swift 2.2, veja minha resposta aqui: stackoverflow.com/a/37673417/2696626
ibrahimyilmaz

Respostas:

160

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 .

insira a descrição da imagem aqui

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.

Suragch
fonte
Oi, eu queria saber se isso era possível sem converter todas as suas linhas em seções. Eu tenho bordas em cada tableViewCell, portanto, aumentar a altura não ajudará. Tenho muitas personalizações no meu celular e não quero convertê-lo em seções. Obrigado!
Ujjwal-Nadhani
3
@ user2901306, também hesitei em usar esse método, porque parecia que eu deveria usar apenas linhas e aumentar uma margem ou algo assim. No entanto, não encontrei uma maneira de fazer isso e esse método funcionou muito bem. Você não precisa alterar as personalizações no seu celular. Basicamente, você só precisa adicionar numberOfSectionsInTableViewe return 1para o número de linhas. Em seguida, use indexPath.sectionpara obter o índice de células atual. Tente uma vez. Acho que você descobrirá que não precisa fazer muitas alterações na sua configuração atual. Definitivamente, é mais fácil do que subclassificar.
Suragch
Usar cell.layer.xxx no cellForRow pode fornecer um impacto no desempenho. É melhor definir esses valores no XIB
Abhishek Bedi
@AbhishekBedi, sempre achei as layermanipulações muito rápidas. Você está dizendo isso porque percebeu um impacto no desempenho ou como uma boa prática geral? Mesmo se você configurá-los em um XIB, eles ainda deverão ser configurados quando a célula for criada.
Suragch 07/02
1
@FateNuller, eu não discordo de você. A resposta de Husam parece muito boa.
Suragch 11/06/19
150

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 insira a descrição da imagem aqui

Husam
fonte
11
Ótima solução. No caso de alguém ter problemas, tive que ligar super.layoutSubviews()primeiro para garantir que toda a exibição fosse apresentada corretamente antes de definir seu quadro.
Ruttopia
@Husam Sua solução funcionou para mim. Mas eu tenho um problema quando a célula selecionada. Eu defini a borda para contentView e sempre que selecionei a célula, a borda será menor. Como posso corrigir isso?
21_17 Bad_Developer
@SonHoang Pode ser necessário substituir didSeta selectedvariável e ligar para layoutSubviews()dentro!
Husam 24/03
1
Ei, Husam. Obrigado pela ótima solução. Não me diga como alterar a cor do conteúdo adicionado entre as células?
A.Kant
1
Esta é uma solução muito melhor do que a resposta aceita. A resposta aceita tem quase 100 linhas de código e essa é apenas uma. Incrível.
YungGun 1/10
135

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;
}
JonatWang
fonte
22
Isso funciona muito bem. Eu tive que mudar um pouco o cellForRowAtIndexPath, não a matriz normal [indexPath.row], mas a matriz [indexPath.section]. Caso contrário, ele mostrará o primeiro item da matriz em todas as seções.
Tom Spee
@ TomSpee - Como você resolveu esse problema no cellForRowAtIndexPath?
5
@TKutal - Assim como o código normal em cellForRowAtIndexPath mas mudar o indexPath.row para indexPath.section
Tom Spee
Embora isso atinja o que o solicitante deseja, não acredito que a Apple recomende essa abordagem. Corrija-me se estiver errado, mas acredito que "seções" são destinadas a separar logicamente "seções" de dados que você está representando em sua tabela. Você não deve usar "seções" para estilizar os espaços entre todas as células de dados que, de outra forma, deveriam ser exibidas em uma única seção. Acho que a melhor abordagem, embora mais difícil, seria subclassificar UITableViewCell e simular o separador de exibição de tabela adicionando uma exibição na parte inferior da célula.
FateNuller 11/06/19
2
Então a Apple não deveria reclamar, mas criar um método conveniente para variar o espaço entre as linhas.
Arnie Schwarzvogel 26/08/19
44

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:

Espaçamento entre UITableViewCells

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.

Pulga
fonte
Apenas um FYI, para um número muito grande de células, você desejaria definir a exibição do conteúdo dentro da subclasse da célula em vez de willDisplayCell. O desempenho começa a ter um enorme sucesso fazê-lo desta forma, os mais células que você adiciona à fila
BBH1023
@ BBH1023 A camada de sombra multiplica-se sempre que a vista aparece ao navegar para frente e para trás para ver rapidamente. Como você sugeriria para cancelar que se ele já foi aplicado uma vez
soulshined
to privent para adicionar mais shadow faça isso: NSInteger tag = 120; if (indexPath.row! = 0) {if (cell.tag! = 120) {cell.contentView.backgroundColor = [UIColor clearColor]; ... [cell.contentView sendSubviewToBack: whiteRoundedCornerView]; cell.tag = tag; }}
user3001228
24

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

cell.imageView.frame = CGRectOffset(cell.frame, 10, 10);
Chanok
fonte
2
Acabei de testar com o backgroundView e esta é a solução de trabalho mais simples
Sam
2
Apenas certifique-se chamar esse código em layoutSubviewsse você está extendendoUITableViewCell
Mazyod
30
@ NicoHämäläinen Bem, desenvolvi mais de 20 aplicativos nos últimos três anos e sempre subclassei UITableViewCellpara obter o resultado que preciso :) ... Subclassificação UITableViewCellé muito comum.
Mazyod
1
@ NicoHämäläinen não há nada de errado em subclassificar UITableViewCell. Ao criar um costume, UITableViewCellsvocê deve estar subclassificando UITableViewCell.
Popeye
1
@ NicoHämäläinen você deve atualizar seu comentário então. As pessoas tendem a pegar informações e não leem mais. Como este site é um excelente recurso e os desenvolvedores tendem a confiar nos fatos que vêem aqui, isso pode levá-los a pensar em coisas terríveis ... apenas minhas duas moedas. Talvez eu tenha histeria
chrs
11

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!

Merricat
fonte
1
Também funciona no Swift 5.
LondonGuy
1
Melhor resposta!! Obrigado. Se você estiver usando uma célula personalizada, isso funcionará na "função de substituição awakeFromNib ()"
trees_are_great
10

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
Craig
fonte
1
Não é uma boa ideia para um fundo transparente. Caso contrário, pode funcionar.
Ergunkocak
1
Isso é verdade. Não é uma solução para todos os casos, mas funcionará para alguns! @ergunkocak
Craig
8

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.

Ferruccio
fonte
8

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

JulianKro
fonte
o texto na célula é cortado.
Mehdico 22/02/19
a substituição do CGRect está funcionando e eu não adicionei o awakeFromNib.
Eric Tan
5

Exemplo no rápido 3 ..

insira a descrição da imagem aqui

  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

Enamul Haque
fonte
que duplicado outra resposta que @Suragch foi respondida antes para a versão rápida, por favor, evite fazer a duplicação
Amr irritado
1
Esta não é uma boa solução. Se você não precisa seção de cabeçalho com um título que isso vai funcionar
kuzdu
4

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?

csano
fonte
4

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.

divya d
fonte
4

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
dev_exo
fonte
3

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
    }
mkilmer
fonte
2

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

class MyTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        layoutMargins = UIEdgeInsetsMake(8, 0, 8, 0)
    }
}
Aviel Gross
fonte
1
Não pude ver nenhuma alteração visual depois de aplicar layoutMarginsdessa maneira. Talvez porque eu esteja usando o autolayout.
Cœur
As margens não "quebrariam" uma altura explícita para a célula, portanto, você precisa ter uma altura automática para as células para que isso funcione
Aviel Gross
1
Eu tenho altura automática.
Cœur
2

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

Mauricio Chirino
fonte
Esta resposta diz incorretamente que o código é compatível com o Swift 4, mas o UIEdgeInsetsMake foi preterido. UIEdgeInsets deve ser usado.
José José
developer.apple.com/documentation/uikit/… exatamente onde diz que foi preterido? Eu uso isso em meus projetos e eu estou trabalhando com a mais recente Xcode, portanto Swift 9.3 @ José
Mauricio Chirino
Você está certo, desculpe, meu mal. UIEdgeInsets é o preferido, mas isso não significa que o outro foi descontinuado. Embora o SwiftLint se queixe do construtor legado ao usar UIEdgeInsetsMake.
José
1
OK, entendi. Por favor, remova o voto negativo se você foi quem fez o favor, nunca disse que minha resposta era a única possível.
Mauricio Chirino
Diz que não posso mudar meu voto a menos que você mude sua resposta. Você pode ajustar um pouco a redação?
José
2

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)
        ])
    }
}
Yoomama
fonte
1

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

drunknbass
fonte
1

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.

Avijit Nagare
fonte
1

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

Gleb Linnik
fonte
1

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
}
Harry Bloom
fonte
1

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:

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
TJ Olsen
fonte
1

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

Deveesh
fonte
0

insira a descrição da imagem aquiSWift-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!
MALIKK HABIB UR REHMAN
fonte
0

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.

Ali Tavakoli
fonte
-1

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)
}
michalmichalek
fonte
-2

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

user3812138
fonte
-4

Use UITableViewDelegate heightForRowAtIndexPathe retorne a altura da linha.

 (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 return 100.0f ;
}
MARK IOS Developer
fonte
A questão é como adicionar espaçamento entre as células, em vez da altura da célula
shippo7