[Swift] UItableView with expand list

mardi 16 août 2016

Voici un exemple de résultat souhaité:

uitableViewCell_expand_collapse

Dans un storyboard on peut mettre deux tableviewCell même si on utilisera un dans un certain cas et l’autre dans une autre.
Par exemple: dans le cas de la réalisation d’une liste d’items de type expand qui ouvre un item de la liste en affichant plus de détail.

Dans ce cas, on peut créer deux tableviewCell avec un affichage simple et une description short de l’item ensuite un bouton expand qui ouvrira le détail de l’item au travers d’un autre tableviewcell.

Et donc la condition pour savoir si l’item est ouvert ou pas se fera dans la fonction delegate de la tableview qui se charge d’afficher chaque item de la liste

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 

Ensuite, il faut aussi modifier la hauteur de chaque item de liste si expand ou pas

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat

Il faut aussi gérer l’action lorsqu’on clique sur un item de liste du tableview

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
	tableView.deselectRowAtIndexPath(indexPath, animated: true)
    self.movementToggleStates[indexPath.row] = true;
    tableView.reloadRowsAtIndexPaths([indexPath], withRowAnimation: UITableViewRowAnimation.None)
}

Dans ce cas-ci on déselectionne l’item de liste visuellement, on met à true le tableau pour dire qu’il est ouvert (expand). Ensuite on reload juste la cellule à ouvrir. Et le tour est joué.

Dans mon cas aussi la vue qui affiche le détail d’une cellule reprenait aussi le contenu de la short description ainsi que l’icone du expand qui change.
Du coup, il faut que dans notre autre tableviewCell on retrouve le même design de la cellule short.
Donc au niveau UI, il faut reprendre les même composants, par contre point de vue développement, la tableViewCell qui contiendra le détail de la cellule peut hériter de la première cellule ce qui permettra de reprendre tout ce qu’on a déjà fait dans la cellule Short dans celle du détail.
De plus, il est aussi possible au niveau UI de faire pointer vos composants de la cellule detail vers les IBoutlets de la tableViewCell parent (short). Et pour cela, on fait ctrl+drag du composant se trouvant dans la tableviewcell detail vers la tableview parent (short)!

Petit rappel, si on défini un IBOutlet dans un controlleur, il faut pas oublié de faire le lien aussi pour datasource et delegate dans l’interface builder depuis votre tableview vers le viewcontroller et ensuite il suffit d’implémenter les méthodes delegate.

Tags: Swift , UITableView