Customiser le design des tableViewCell !

Luc-ALuc-A Membre
septembre 2017 modifié dans API UIKit #1

Bonjour à  tous !


 


Pour réaliser un design customiser des tableViewCell, il y a deux solutions. On peut créer une section de la tableView par row. Mais il y a aussi une autre solution, un peu plus longue à  mettre en place au niveau du code, mais qui sera plus simple à  mettre en place si la tableView est composée de plusieurs sections.


 


 


1. Il faut rendre invisible les lignes qui séparent les cells.



override func viewDidLoad() {
super.viewDidLoad()

self.tableView.separatorStyle = .none
}

2. Il faut créer une imageView dans le Content View de la Cell. Il faut aussi mettre les contraintes : aligner horizontalement et verticalement, et largeur et hauteur proportionnelles au container.


 


3. Pour les marges en haut et en bas, c'est-à -dire l'espace entre les cells, Il faut que la hauteur de l'image ne soit pas égale à  la hauteur du container, c'est-à -dire du Content View.


 


4. Pour les marges à  gauche et à  droite, il faut soit modifier la hauteur de l'image, comme précédemment, soit ajouter des marges à  gauche et à  droite directement sur la tableView elle-même. Personnellement, je préfère la deuxième solution, car les marges sont en pixels, et donc, c'est plus précis que le pourcentage de l'image.


 


5. Pour arrondir les bords de l'image, comme les text field, il faut dans la viewCell :



self.viewWithTag(1)!.layer.masksToBounds = true
self.viewWithTag(1)!.layer.cornerRadius = 5.0

Ne pas oublier d'utiliser le tag de l'imageView !


 


6. Pour faire une tableView avec deux couleurs, il faut transmettre l'indexPath à  la classe de la cell, et vérifier si cet index est pair ou impair selon le résultat souhaité. Exemple pour les nombres pairs :



if index % 2 == 0 {
imageView.layer.backgroundColor = UIColor(red: 223/255, green: 227/255, blue: 235/255, alpha: 1).cgColor
} else {
imageView.layer.backgroundColor = UIColor(red: 246/255, green: 247/255, blue: 249/255, alpha: 1).cgColor
}

Et le résultat (sans bordure et sans arrondi) :

Connectez-vous ou Inscrivez-vous pour répondre.