Comment personnaliser le séparateur de tableView dans l’iPhone

Par défaut, il n’y a qu’un seul séparateur de ligne dans uitableview.

Mais je veux mettre ma ligne personnalisée comme séparateur.

C’est possible? Comment?

Si vous souhaitez faire plus que modifier la couleur du séparateur à l’aide de la propriété separatorColor de UITableView, vous pouvez définir la propriété separatorStyle sur UITableViewCellSeparatorStyleNone , puis:

  • créer des UITableViewCell personnalisés qui incluent votre séparateur personnalisé
  • créer d’autres UITableViewCell incluant votre séparateur personnalisé

Par exemple, si votre table affiche actuellement 5 lignes, vous pouvez la mettre à jour pour afficher 9 lignes et les lignes des index 1, 3, 5 et 7, des cellules séparasortingces.

Reportez -vous à la section Sous-classement de UITableViewCell dans le Guide de programmation des vues de table pour plus d’informations sur la création de rapports UITableViewCell personnalisés.

Une meilleure solution consiste à utiliser la largeur et la hauteur actuelles de la cellule. Quelque chose comme ça:

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)]; lineView.backgroundColor = [UIColor darkGrayColor]; [cell.contentView addSubview:lineView]; 

Si vous avez besoin de couleurs de séparateur différentes pour différentes rangées OU si vous souhaitez que le séparateur rest visible lorsque la rangée est mise en surbrillance, essayez ceci:

 self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; // We have to use the borderColor/Width as opposed to just setting the // backgroundColor else the view becomes transparent and disappears during // the cell's selected/highlighted animation UIView *separatorView = [[UIView alloc] initWithFrame:CGRectMake(0, 43, 1024, 1)]; separatorView.layer.borderColor = [UIColor redColor].CGColor; separatorView.layer.borderWidth = 1.0; [cell.contentView addSubview:separatorView]; 

Cela suppose que la couleur d’arrière-plan de votre cellule est transparente.


La solution ci-dessus est née d’une expérimentation approfondie. Voici quelques notes sur mes conclusions qui, j’en suis sûr, aideront les gens:

Dans l’état normal «non sélectionné»

  • Le contentView (ce qui est dans votre XIB sauf si vous l’avez codé autrement) est dessiné normalement
  • Le selectedBackgroundView est HIDDEN
  • Le backgroundView est visible (à condition que votre contentView soit transparent, vous voyez le backgroundView ou (si vous n’avez pas défini d’arrière-plan, vous verrez la couleur d’arrière-plan du UITableView lui-même)

Une cellule est sélectionnée, ce qui suit se produit immédiatement sans aucune animation:

  • Toutes les vues / sous-vues dans contentView ont leur couleur de fond backgroundColor effacée (ou définie sur transparente), libellée etc.
  • Le selectedBackgroundView devient visible (cette vue est toujours la taille maximale de la cellule (un cadre personnalisé est ignoré, utilisez une sous-vue si vous en avez besoin). Notez également que backgroundColor des sous-vues ne sont pas affichées pour une raison quelconque. comme le contentView). Si vous n’avez pas défini deVueNavale sélectionnée, Cocoa va créer / insérer le fond dégradé bleu (ou gris) et l’afficher pour vous)
  • Le backgroundView est inchangé

Lorsque la cellule est désélectionnée, une animation pour supprimer la mise en évidence commence:

  • La propriété alpha selectedBackgroundView est animée de 1.0 (entièrement opaque) à 0.0 (totalement transparent).
  • Le backgroundView est à nouveau inchangé (l’animation ressemble donc à un crossfade entre selectedBackgroundView et backgroundView)
  • Une fois l’animation terminée, le contenu est redessiné dans l’état “non sélectionné” et son subview backgroundColor redevient visible (cela peut rendre votre animation horrible, il est donc conseillé de ne pas utiliser UIView.backgroundColor dans votre contenuView)

Ces réponses ont pour résultat que le rectangle de surbrillance est écrasé par le séparateur que vous ajoutez à votre cellule (sur iOS 6 avec mes tests au moins). Vous devez définir le separatorColor sur [UIColor clearColor] pour que les cellules soient toujours séparées par 1px, vous pouvez alors dessiner votre séparateur dans l’espace:

 - (void)viewDidLoad { self.tableView.separatorColor = [UIColor clearColor]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // snip CALayer *separator = [CALayer layer]; separator.backgroundColor = [UIColor redColor].CGColor; separator.frame = CGRectMake(0, 43, self.view.frame.size.width, 1); [cell.layer addSublayer:separator]; return cell; } 

Vous ajoutez le code cellForRowAtIndexPath delegate cellForRowAtIndexPath de tableView pour créer une vue d’image personnalisée de hauteur 1px et de largeur 200px pour everyCell

 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 1)]; lineView.backgroundColor = [UIColor blackColor]; [cell.contentView addSubview:lineView]; 

Note : je ne sais pas combien il est lourd sur la performance.

Je ne sais pas si cela peut être fait “automatiquement” avec certains réglages. Mais une suggestion serait de définir le séparateur de ligne comme aucun, et dans les bordures de vos cellules dessiner réellement votre séparateur de ligne que vous voulez.

Si vous utilisez des cellules personnalisées dans Swift: Une autre approche consiste à étendre UITableViewCell avec une fonction capable de dessiner une ligne en haut de cette cellule.

 import UIKit extension UITableViewCell { func addSeparatorLineToTop(){ let lineFrame = CGRectMake(0, 0, bounds.size.width, 1) let line = UIView(frame: lineFrame) line.backgroundColor = UIColor.myGray_300() addSubview(line) } } 

Ensuite, vous pouvez append cette ligne à n’importe quelle cellule personnalisée, par exemple, dans awakeFromNib

 override func awakeFromNib() { super.awakeFromNib() addSeparatorLineToTop() } 

Cette solution est intéressante car elle ne perturbe pas votre storyboard et limite votre code supplémentaire à 1 ligne.

Sur un écran de rétine, même une ligne de 0,5 unité entraînera une ligne de deux pixels, due à l’anti-aliasing. Pour le rendre en un seul pixel sur les deux écrans, déplacez-le d’un quart d’unité:

 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, self.contentView.frame.size.height - (1.0 - 0.25), self.contentView.frame.size.wi lineView.backgroundColor = [UIColor colorWithRed:(230.0/255.0f) green:(233/255.0f) blue:(237.0/255.0f) alpha:1.0f]; [self.contentView addSubview:lineView]; 

Testé sur iOS 7 (GM):

 @implementation MyTableViewController - (void)viewDidLayoutSubviews { for (UIView *view in self.view.subviews) { if ([view isKindOfClass:NSClassFromSsortingng(@"_UITableViewCellSeparatorView")]) view.backgroundColor = [UIColor redColor]; } } @end 

REMARQUE: il semble que UITableView déplace les séparateurs vers les cellules dans certaines configurations, ce qui rendrait ce code inopérant à moins que vous ne descendiez également dans tous les UITableViewCells.

La cellule ci-dessous est une sous-classe de UITableViewCell où chaque cellule peut avoir son propre séparateur avec plusieurs styles (actuellement, seuls .None et .Default sont pris en charge). Il est écrit en Swift et suppose l’utilisation d’Autolayout.

https://gist.github.com/evgeniyd/fa36b6f586a5850bca3f

Comment utiliser la classe:

  1. définir le style de séparateur de l’object UITableViewCellSeparatorStyle.None sur UITableViewCellSeparatorStyle.None

     tableView.separatorStyle = .None 
  2. Créer une sous-classe de MPSTableViewCell

  3. Quelque part dans awakeFromNib() définissez le style de séparation de la cellule

Remarque: le code ci-dessous suppose que la cellule est chargée depuis xib / storyboard

  class FASWorkoutCell: FASTableViewCell { required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) } override func awakeFromNib() { super.awakeFromNib() separatorType = .Default } // ... } 

Si vous utilisez un object UITableViewCell personnalisé, vous pouvez simplement append UIView au bas de UItableViewCell.xib et placer la couleur d’arrière-plan comme couleur de votre choix.

Par exemple, sur xib, j’ajoute un UIView en bas et définit la hauteur en 1. En utilisant autolayout, je mets la contrainte gauche à 12, la contrainte inférieure à 0, la contrainte droite à 0 et la hauteur à 1.

Version rapide:

 private let kSeparatorTag = 123 private let kSeparatorHeight: CGFloat = 1.5 func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { if cell.viewWithTag(kSeparatorTag) == nil //add separator only once { let separatorView = UIView(frame: CGRectMake(0, cell.frame.height - kSeparatorHeight, cell.frame.width, kSeparatorHeight)) separatorView.tag = kSeparatorId separatorView.backgroundColor = UIColor.redColor() separatorView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] cell.addSubview(separatorView) } }