web-dev-qa-db-fra.com

Comment augmenter la hauteur du séparateur UITableView?

Je veux plus d'espace (10px) entre chaque cell. Comment puis-je faire ceci?

Et j'ai ajouté ce code

tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
iphoneuitableview
45
vinay

Je ne pense pas que ce soit possible en utilisant l'API standard. Je suppose que vous auriez besoin de sous-classer UITableViewCell et d'ajouter une vue qui simule un séparateur au bas de la cellule. 

Vous voudrez peut-être vérifier cette question, elle semble liée et contient un exemple de code: iPhone + UITableView + placez une image pour séparateur

10
Mayjak

Le meilleur moyen pour moi, il suffit d’ajouter ceci dans cellForRowAtIndexPath ou dans willDisplayCell

CGRect sizeRect = [UIScreen mainScreen].applicationFrame;    
NSInteger separatorHeight = 3;
UIView * additionalSeparator = [[UIView alloc] initWithFrame:CGRectMake(0,cell.frame.size.height-separatorHeight,sizeRect.size.width,separatorHeight)];
additionalSeparator.backgroundColor = [UIColor grayColor];
[cell addSubview:additionalSeparator];

Pour Swift 3.0: 

let screenSize = UIScreen.main.bounds
let separatorHeight = CGFloat(3.0)
let additionalSeparator = UIView.init(frame: CGRect(x: 0, y: self.frame.size.height-separatorHeight, width: screenSize.width, height: separatorHeight))
additionalSeparator.backgroundColor = UIColor.gray
self.addSubview(additionalSeparator)

Vous devez ajouter ceci à la méthode de la cellule awakeFromNib () pour éviter la recréation.

24
Dmitry Soloviov

J'ai vu beaucoup de solutions maladroites comme le sous-classement UITableView avec des cellules cachées, et d'autres moins optimales incl. dans ce fil. 

Lors de l'initialisation de UITableView, définissez la propriété rowHeight de UITableView sur une hauteur égale à = hauteur de la cellule + hauteur du séparateur/espace souhaitée.

N'utilisez pas la classe UITableViewCell standard mais sous-classez la classe UITableViewCell et remplacez sa méthode layoutSubviews. Là, après avoir appelé super (n'oubliez pas cela), définissez la hauteur de la cellule elle-même à la hauteur souhaitée.

BONUS UPDATE 18/OCT/2015:

Vous pouvez être un peu intelligent à ce sujet. La solution ci-dessus met essentiellement le "séparateur" au bas de la cellule. En réalité, la hauteur de la ligne est gérée par TableViewController, mais la cellule est redimensionnée pour être un peu plus basse. Il en résulte que le séparateur/espace vide se trouve en bas. Mais vous pouvez également centrer verticalement toutes les vues secondaires afin de laisser le même espace en haut et en bas. Par exemple, 1 pt et 1 pt.

Vous pouvez également créer des propriétés de confort isFirst, isLast sur votre sous-classe de cellules. Vous définissez ces options sur Oui dans cellForRowAtIndexPath . De cette façon, vous pouvez gérer les cas Edge pour les séparateurs supérieurs et inférieurs dans la méthode layoutSubviews, car cela aurait accès à ces propriétés . pour le haut ou le bas - parce que parfois le département de conception veut N + 1 séparateurs alors que le nombre de cellules est seulement N. Il faut donc traiter le premier ou le premier d'une manière spéciale. Mais il est préférable de le faire dans les cellules à la place de tableViewHeader ou TableViewFooter.

22
Earl Grey

Vous pouvez le faire entièrement dans le storyboard. Voici comment:

  • allez au storyboard et sélectionnez la tableview
  • Affichez l'inspecteur de taille et, à partir de là, définissez la hauteur de la ligne pour dire 140.
  • ensuite, affichez l’Inspecteur des attributs et, à partir de là, définissez votre séparateur sur Ligne simple et Style simple, puis choisissez une couleur.
  • puis dans le storyboard (ou dans la structure du document), sélectionnez la cellule
  • et de nouveau dans l'inspecteur de taille, sous la cellule d'affichage de table, définissez Hauteur de ligne personnalisée sur 120.

C'est tout. Votre séparateur aura 20 unités de hauteur.

7
Konsol Labapen

Dans Swift

Le moyen le plus simple et le plus simple pour moi était d'ajouter l'extrait de code ci-dessous dans cellForRowAtIndexPath ou dans willDisplayCell:

override func tableView(tableView: UITableView,
                        willDisplayCell cell: UITableViewCell,
                        forRowAtIndexPath indexPath: NSIndexPath)
{
        let additionalSeparatorThickness = CGFloat(3)
        let additionalSeparator = UIView(frame: CGRectMake(0,
                                                           cell.frame.size.height - additionalSeparatorThickness,
                                                           cell.frame.size.width,
                                                           additionalSeparatorThickness))
        additionalSeparator.backgroundColor = UIColor.redColor()
        cell.addSubview(additionalSeparator)
}
7
King-Wizard

c'est assez vieux. Néanmoins, je posterai mon approche.

Augmentez simplement un peu la hauteur de votre cellule et attribuez-lui un calque de masque, comme suit:

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

    // Configure the cell...
    let maskLayer = CAShapeLayer()
    let bounds = cell.bounds
    maskLayer.path = UIBezierPath(roundedRect: CGRect(x: 2, y: 2, width: bounds.width-4, height: bounds.height-4), cornerRadius: 5).cgPath
    cell.layer.mask = maskLayer

    return cell
}

Donc, dans cet exemple, ma taille de séparateur sera 4.

S'amuser!

4
pocashi

Un peu vieux fil, mais puisque je n’ai trouvé que des solutions de hacky dans ce fil, Ici la solution qui me convenait le mieux (sans UIView supplémentaire dans chaque cellule)

Swift 3:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    //configure your cell...

    cell.layer.shadowColor = UIColor.red.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 1)
    cell.layer.shadowOpacity = 1
    cell.layer.shadowRadius = 0
    cell.layer.masksToBounds = false

    return cell
}

EDIT: Malheureusement, cela ne fonctionne pas si vous faites défiler vers le haut dans un tableau. De toute façon, je laisse la réponse ici, car cela pourrait être une solution si le contenu de votre tableau est limité.

Voir L'ombre sur une UITableViewCell disparaît lors du défilement pour plus d'informations.

3
ndreisg

Pour une cellule de table avec une hauteur de 50 et un espace de 5 pixels entre les lignes. La largeur est de 320.

Définissez le fond des cellules pour qu'il soit clair:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    cell.backgroundColor = [UIColor clearColor];
}

Définissez la hauteur des cellules, c'est la taille de la ligne PLUS le délimiteur:

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 55;
}

Et définissez dans cellForRowAtIndexPath une zone, avec la taille de la ligne (délimiteur MINUS) pour dessiner dans la couleur d’arrière-plan:

UILabel *headerBackgroundLabel = [[UILabel alloc] initWithFrame:CGRectMake(0,0,320,50)];
backgroundBox.backgroundColor = [UIColor grayColor];
[cell addSubview:backgroundBox];
2
Vincent

Je le fais d'une manière beaucoup plus simple et plus flexible. Certains peuvent appeler cela un bidouillage. Je l'appelle pragmatique. 

Je cache le UITableViewSeparator standard. J'ajoute ensuite une sous-vue à ma cellule, en utilisant la disposition automatique, épinglez-la en haut. Fixez la hauteur à ce que je désire. Épinglez-le sur les bords avec une marge de chaque côté. Change sa couleur de fond. J'ai un séparateur simple avec la hauteur que je désire.

Vous pouvez vous demander quelle est l'efficacité d'avoir un autre UIView dans la hiérarchie des cellules. Est-ce que cela va vraiment faire une différence notable? Probablement pas - vous venez de toute façon de sortir le séparateur standard de la hiérarchie des tables. 

1
bandejapaisa

Swift 4

Il n'est pas possible d'augmenter le séparateur par défaut. Au lieu de cela, vous devez ajouter une sous-vue qui ressemblera à un séparateur pour chaque cellule (et éventuellement rendre la cellule plus haute). Vous pouvez le faire par exemple dans cellForRowAtIndexPath ou dans une sous-classe UITableViewCell.

Si vous autorisez la sélection de la cellule, vous devez également ajouter la sous-vue pour l'état sélectionné, sinon le séparateur disparaîtrait lorsque la cellule est sélectionnée. C'est pourquoi selectedBackgroundView est également configuré.

Ajoutez ceci dans votre sous-classe UITableViewController:

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.separatorStyle = .none
}

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

    cell.backgroundView = UIView(backgroundColor: .white)
    cell.backgroundView?.addSeparator()

    cell.selectedBackgroundView = UIView(backgroundColor: .blue)
    cell.selectedBackgroundView?.addSeparator()

    // configure the cell

    return cell
}

Ajoutez ces extensions dans le même fichier en bas:

private extension UIView {
    convenience init(backgroundColor: UIColor) {
        self.init()
        self.backgroundColor = backgroundColor
    }

    func addSeparator() {
        let separatorHeight: CGFloat = 2
        let frame = CGRect(x: 0, y: bounds.height - separatorHeight, width: bounds.width, height: separatorHeight)
        let separator = UIView(frame: frame)
        separator.backgroundColor = .gray
        separator.autoresizingMask = [.flexibleTopMargin, .flexibleWidth]

        addSubview(separator)
    }
}
0
Marián Černý