web-dev-qa-db-fra.com

espacement entre UITableViewCells

Je crée une application ios dans Swift et souhaite ajouter un espacement entre des cellules comme Facebook (photo ci-dessous).

J'utilise une pointe personnalisée pour les messages. Je sais utiliser UITableViewController. Je pense que j'utiliserais un style de séparation mais cela ne produirait pas l'effet. Je suis resté bouche bée pendant des heures et je ne trouve pas un seul tutoriel logique pour Swift! Quelqu'un pourrait-il expliquer comment ils l'ont fait dans leur application en utilisant Swift? Merci!

enter image description here

iosfacebookuitableviewswiftuitabbarcontroller
24
Now2407

Ceci est ma solution avec résultat: (basé sur la réponse de Jorge Casariego)

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! CustomApplicationCell

    cell.contentView.backgroundColor = UIColor.clear

    let whiteRoundedView : UIView = UIView(frame: CGRectMake(10, 8, self.view.frame.size.width - 20, 149))

    whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 0.8])
    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 2.0
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubviewToBack(whiteRoundedView)

    return cell
}

hauteur de la rangée de la table: 165 points

hauteur de la section d'en-tête, hauteur de la section du pied de page: 10 points

et résultat

 enter image description here

Edit For Swift 3 Syntax:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomApplicationCell

    cell.contentView.backgroundColor = UIColor.clear

    let whiteRoundedView : UIView = UIView(frame: CGRect(x: 10, y: 8, width: self.view.frame.size.width - 20, height: 120))

    whiteRoundedView.layer.backgroundColor = CGColor(colorSpace: CGColorSpaceCreateDeviceRGB(), components: [1.0, 1.0, 1.0, 0.9])
    whiteRoundedView.layer.masksToBounds = false
    whiteRoundedView.layer.cornerRadius = 2.0
    whiteRoundedView.layer.shadowOffset = CGSize(width: -1, height: 1)
    whiteRoundedView.layer.shadowOpacity = 0.2

    cell.contentView.addSubview(whiteRoundedView)
    cell.contentView.sendSubview(toBack: whiteRoundedView)

    return cell
}

Voici un nouveau moyen d'afficher des vues sous forme de carte de matériau:

Créer CardView.Swift

@IBDesignable
class CardView: UIView {

    @IBInspectable var cornerRadius: CGFloat? = 5

    @IBInspectable var shadowOffsetWidth: Int? = 0
    @IBInspectable var shadowOffsetHeight: Int? = 2
    @IBInspectable var shadowColor: UIColor? = .black
    @IBInspectable var shadowOpacity: Float? = 0.3

    override func layoutSubviews() {
        layer.cornerRadius = cornerRadius!
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius!)

        layer.masksToBounds = false
        layer.shadowColor = shadowColor?.cgColor
        layer.shadowOffset = CGSize(width: shadowOffsetWidth!, height: shadowOffsetHeight!);
        layer.shadowOpacity = shadowOpacity!
        layer.shadowPath = shadowPath.cgPath
    }
}

Ajoutez maintenant la classe CardView à votre UIView.

31
ibrahimyilmaz

Avec Swift 2, vous pouvez effectuer l’espacement entre UITableViewCells de la manière suivante:

Dans votre TableViewController, copiez ceci:

    // In this case I returning 140.0. You can change this value depending of your cell
    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 140.0
    }

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {

        cell.contentView.backgroundColor = UIColor.clearColor()

        let whiteRoundedView : UIView = UIView(frame: CGRectMake(0, 10, self.view.frame.size.width, 120))

        whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), [1.0, 1.0, 1.0, 1.0])
        whiteRoundedView.layer.masksToBounds = false
        whiteRoundedView.layer.cornerRadius = 2.0
        whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1)
        whiteRoundedView.layer.shadowOpacity = 0.2

        cell.contentView.addSubview(whiteRoundedView)
        cell.contentView.sendSubviewToBack(whiteRoundedView)
    }

Voici le résultat:

 enter image description here

27
Jorge Casariego

J'ai passé au moins une heure à étudier le sujet. Enfin, j'ai eu l'idée d'utiliser une bordure transparente:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "faqCell", for: indexPath)

    // ...

    cell.layer.borderWidth = CGFloat(TABLE_CELLSPACING)
    cell.layer.borderColor = tableView.backgroundColor?.cgColor

    return cell
}

Cela fonctionne parfaitement dans Swift 3/Xcode 8.

Image: Voici à quoi ça ressemble de mon côté

9
Nick Ivanov

Si vous voulez un espacement correct/légal, pas une astuce, vous pouvez essayer UICollectionView au lieu de UITableView.

UICollectionView est plus générique que UITableView et vous pouvez personnaliser ce que vous voulez.

2
Huy Le

Il y a beaucoup de bonnes réponses ici. 

Le moyen le plus simple que j'ai trouvé était de créer une vue conteneur dans la contentView de la cellule dans Interface Builder. Ensuite, placez le contenu significatif de toutes vos cellules à l'intérieur et limitez-vous à cette vue.

Limitez la vue du conteneur en fonction de vos besoins en matière de remplissage.

Quelque chose comme:

 enter image description here

 enter image description here

Ensuite, dans votre tableViewCellForRow, ajoutez ce qui suit (en supposant que votre sortie de vue conteneur s'appelle containerView).

    currentCell.containerView?.layer.cornerRadius = 8 // Your choice here.
    currentCell.containerView?.clipsToBounds = true

// Ajoute des bordures, des ombres, etc. si tu veux.

Ressemble à 

 rounder corners

2
Ron Holmes

Version Objective-C pour le code Jorge Casariego Swift:


//play with the 'y' parameter of the whiteRoundedView to change the spacing 
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.contentView.backgroundColor = [UIColor colorWithRed:225/255.0 green:225/255.0 blue:225/255.0 alpha:1.0];
    UIView  *whiteRoundedView = [[UIView alloc]initWithFrame:CGRectMake(5, 2, self.view.frame.size.width-10, cell.contentView.frame.size.height)];
    CGFloat colors[]={1.0,1.0,1.0,1.0};//cell color white
    whiteRoundedView.layer.backgroundColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), colors);
    whiteRoundedView.layer.masksToBounds = false;
    whiteRoundedView.layer.cornerRadius = 5.0;
    whiteRoundedView.layer.shadowOffset = CGSizeMake(-1, 1);
    whiteRoundedView.layer.shadowOpacity = 0.2;
    [cell.contentView addSubview:whiteRoundedView];
    [cell.contentView sendSubviewToBack:whiteRoundedView];
}
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //assign the right cell identifier
    UITableViewCell *cell = [[self tableView]dequeueReusableCellWithIdentifier:CellIdentifier];
    return cell.bounds.size.height;
}
1
repoguy

J'ai créé une sous-classe de UITableViewCell et un fichier nib pour l'accompagner. Faites glisser un UIView dans le contentView de la cellule et commencez par lui donner la même taille que contentView. Cela agira comme un conteneur et deviendra le "nouveau" contentView. Vous pouvez y mettre ce dont vous avez besoin, comme vous le feriez normalement dans le contentView d'un UITableViewCell. 

Vous pouvez maintenant ajuster la hauteur de la vue du conteneur pour laisser l'espacement souhaité au bas de la cellule. Enfin, changez la couleur de fond de contentView en clearColor, ce qui complétera l'effet.

1
doraemon

code pour Swift 4 

override var frame: CGRect {
        get {
            return super.frame
        }
        set (newFrame) {
            var frame =  newFrame
            frame.Origin.y += 4
            frame.size.height -= 2 * 5
            super.frame = frame
        }
    }
1
Games Hub