[Swift] UItableView with expand list
mardi 16 août 2016Voici un exemple de résultat souhaité:
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.