67 votes

Comment personnaliser tableView séparateur dans l'iPhone

Par défaut, il est un seul séparateur de ligne dans uitableview.

Mais je tiens à mettre mon personnalisés en ligne comme séparateur.

Est-il possible? Comment?

Merci d'avance de m'aider.

82voto

Daniel Richardson Points 2558

Si vous voulez faire plus que le changement de la couleur du séparateur à l'aide de la separatorColor propriété de la UITableView vous pouvez alors régler le separatorStyle propriété UITableViewCellSeparatorStyleNone , et ensuite, soit:

  • créer des UITableViewCells qui comprennent personnalisé de votre élément de séparation à l'intérieur de leur
  • créer une variante de UITableViewCells qui comprennent votre séparateur personnalisé

Par exemple, si votre tableau affiche actuellement 5 lignes vous pourriez mettre à jour pour afficher les 9 lignes et les lignes à l'indice 1, 3, 5, 7 serait le séparateur de cellules.

Voir sous-classement UITableViewCell dans la Vue de Table Guide de Programmation pour plus d'informations sur la façon de créer des UITableViewCells.

34voto

Jerry Destremps Points 268

Une meilleure solution est d'utiliser la cellule actuelle de la largeur et de la hauteur. Quelque chose comme ceci:

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];

31voto

Oliver Pearmain Points 5096

Si vous avez besoin de différents élément de séparation des couleurs pour les différentes lignes OU vous souhaitez que l'élément de séparation de rester visible lorsque la ligne est mise en surbrillance sur appuyez sur, puis 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 votre cellule de la couleur d'arrière-plan est transparent.


La solution ci-dessus est venu de sortir de nombreuses expérimentations. Voici quelques notes sur mes résultats que je suis sûr qu'ils vont aider les gens:

Dans la normale "non sélectionné"

  • Le contentView (ce qui est dans votre XIB, à moins que vous codé autrement) est dessinée normalement
  • Le selectedBackgroundView est CACHÉ
  • Le backgroundView est visible (donc, à la condition que votre contentView est transparent, vous voyez le backgroundView ou (si vous n'avez pas défini un backgroundView vous verrez la couleur de fond de la UITableView lui-même)

Une cellule est sélectionnée, les éléments suivants se produit immédiatement avec tout le matériel d'animation:

  • Tous les points de vue/des sous-vues au sein de la contentView ont leur backgroundColor effacé (ou transparent), label, etc la couleur du texte du changement de leur couleur de votre choix
  • Le selectedBackgroundView devient visible (ce point de vue est toujours la pleine taille de la cellule (une image personnalisée est ignoré, l'utilisation d'une sous-vue si vous avez besoin). Notez également la backgroundColor de sous-vues ne sont pas affichées pour une raison quelconque, peut-être qu'ils transparente comme le contentView). Si vous n'avez pas de définir un selectedBackgroundView puis le Cacao va créer/insérer le bleu (ou gris) gradient de fond et d'afficher le faire pour vous)
  • Le backgroundView est inchangé

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

  • Le selectedBackgroundView propriété alpha est animé de 1.0 (complètement opaque) 0,0 (totalement transparent).
  • Le backgroundView est de nouveau stable (donc l'animation ressemble à un fondu enchaîné entre selectedBackgroundView et backgroundView)
  • Seulement une fois que l'animation est terminée le contentView redessiner dans le "non-sélection" de l'état et de ses sous-vue backgroundColor de devenir à nouveau visible (ce qui peut causer votre animation à l'air horrible, donc il est conseillé que vous n'utilisez pas de UIView.backgroundColor dans votre contentView)

14voto

mxcl Points 5921

Ces réponses suite à la mettre en évidence rect écrasée par le séparateur que vous ajoutez à votre cellule (sur iOS 6 avec mes tests au moins). Vous devez définir l' separatorColor de [UIColor clearColor] de sorte que les cellules sont toujours séparés par 1px, vous pouvez dessiner votre séparateur dans le fossé:

- (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;
}

8voto

carbonr Points 1853

Vous ajoutez le code suivant cellForRowAtIndexPath délégué de la tableView pour créer un affichage de l'image de 1px de hauteur et de 200px de largeur 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 comment lourd c'est sur la performance.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X