Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Le Swift : Développement d'une application iOS | Table View en profondeur | Partie 6
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Mathieu ?" data-source="post: 7015370" data-attributes="member: 712193"><p style="text-align: center">[ATTACH=full]103363[/ATTACH]</p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 15px"><a href="https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-les-composants-controller-partie-1.584830/" target="_blank">Le Swift : Développement d'une application iOS | Les composants controller | Partie 1</a></span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 15px"><a href="https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-les-composants-les-plus-utilises-partie-2.584853/" target="_blank">Le Swift : Développement d'une application iOS | Les composants les plus utilisés | Partie 2</a></span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 15px"><a href="https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-zoom-sur-des-composants-1-partie-3.584886/" target="_blank">Le Swift : Développement d'une application iOS | Zoom sur des composants #1 | Partie 3</a> (TableView)</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><span style="font-size: 15px"><a href="https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-zoom-sur-des-composants-2-partie-4.585020/" target="_blank">Le Swift : Développement d'une application iOS | Zoom sur des composants #2 | Partie 4</a> (ContainerView)</span></span></p> <p style="text-align: center"><span style="font-family: 'Poppins'"><a href="https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-utilisation-des-buttons-textfields-partie-5.585039/" target="_blank">Le Swift : Développement d'une application iOS | Utilisation des buttons, textfields... | Partie 5</a></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Dans ce tutoriel nous allons voir comment ajouter des fonctionnalité a notre Table View (Controller). Pour commencer vous devez avoir lue le tutoriel de la partie 3, nous prendrons le code de cette partie.</span></p> <p style="text-align: center"></p><p>Code Partie 3 :</p><p>[code=swift]</p><p>//</p><p>// TUTOTableViewController.swift</p><p>// tutoRG</p><p>//</p><p>// Created by Marent on 28/12/2016.</p><p>// Copyright © 2016 Marent. All rights reserved.</p><p>//</p><p></p><p>import UIKit</p><p></p><p>class TUTOTableViewController: UITableViewController {</p><p></p><p> override func viewDidLoad() {</p><p> super.viewDidLoad()</p><p></p><p> // Uncomment the following line to preserve selection between presentations</p><p> // self.clearsSelectionOnViewWillAppear = false</p><p></p><p> // Uncomment the following line to display an Edit button in the navigation bar for this view controller.</p><p> // self.navigationItem.rightBarButtonItem = self.editButtonItem()</p><p> }</p><p></p><p> override func didReceiveMemoryWarning() {</p><p> super.didReceiveMemoryWarning()</p><p> // Dispose of any resources that can be recreated.</p><p> }</p><p></p><p> // MARK: - Table view data source</p><p></p><p> override func numberOfSections(in tableView: UITableView) -> Int {</p><p> // #warning Incomplete implementation, return the number of sections</p><p> return 1</p><p> }</p><p></p><p> override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {</p><p> // #warning Incomplete implementation, return the number of rows</p><p> return 4 //Mettez le nombre que vous shouaitez !</p><p> }</p><p></p><p></p><p> override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {</p><p> let cell = tableView.dequeueReusableCell(withIdentifier: "cellname")! as UITableViewCell</p><p></p><p> // Configure the cell...</p><p> cell.textlabel?.text = "Swift Tuto"</p><p> return cell</p><p> }</p><p></p><p></p><p> /*</p><p> // Override to support conditional editing of the table view.</p><p> override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {</p><p> // Return false if you do not want the specified item to be editable.</p><p> return true</p><p> }</p><p> */</p><p></p><p> /*</p><p> // Override to support editing the table view.</p><p> override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {</p><p> if editingStyle == .delete {</p><p> // Delete the row from the data source</p><p> tableView.deleteRows(at: [indexPath], with: .fade)</p><p> } else if editingStyle == .insert {</p><p> // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view</p><p> }</p><p> }</p><p> */</p><p></p><p> /*</p><p> // Override to support rearranging the table view.</p><p> override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {</p><p></p><p> }</p><p> */</p><p></p><p> /*</p><p> // Override to support conditional rearranging of the table view.</p><p> override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {</p><p> // Return false if you do not want the item to be re-orderable.</p><p> return true</p><p> }</p><p> */</p><p></p><p> /*</p><p> // MARK: - Navigation</p><p></p><p> // In a storyboard-based application, you will often want to do a little preparation before navigation</p><p> override func prepare(for segue: UIStoryboardSegue, sender: Any?) {</p><p> // Get the new view controller using segue.destinationViewController.</p><p> // Pass the selected object to the new view controller.</p><p> }</p><p> */</p><p></p><p>}</p><p>[/code]</p><p style="text-align: center"></p><p><u><span style="font-family: 'MyriadPro Light'">Nous allons commencer par l'ajout d'une action lors de l'appuie sur une cellule:</span></u></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Pour ajouter une action lorsque l'ont appuie sur une cellule nous allons utilisé la fonction tableview <strong>didSelectRowAt</strong>. Je vais commencer avec un exemple simple qui est que lorsque l'on appuie sur une cellule n'importe laquelle elle nous affiche une alerte.</span></p><p></p><p>[CODE=swift] override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)</p><p> {</p><p> let alert:UIAlertView = UIAlertView()</p><p> </p><p> alert.title = "Alertes de test"</p><p> aler*spam*ssage = "Tu a clicker sur une cellule"</p><p> alert.addButton(withTitle: "OK chef !")</p><p> alert.show()</p><p> }[/CODE]</p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Comment vous pouvez le voir la cellule ne c'est pas désélectionner après que l'on est eu l'alerte d'afficher. Pour ce faire vous devez ajouter une ligne lui disant que lorsqu'une cellule est sélectionnée elle se désélectionne juste après.</span></p><p></p><p>[CODE=swift] override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)</p><p> {</p><p> tableView.deselectRow(at: indexPath, animated: false)</p><p> let alert:UIAlertView = UIAlertView() </p><p> alert.title = "Alertes de test"</p><p> aler*spam*ssage = "Tu a clicker sur une cellule"</p><p> alert.addButton(withTitle: "OK chef !")</p><p> alert.show()</p><p> }[/CODE]</p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Voila vous avez appris a exécuter une action lorsque l'utilisateur sélectionne une cellule <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite400" alt="::):" title="Smile ::):" loading="lazy" data-shortname="::):" /></span></p> <p style="text-align: center"></p><p><u><span style="font-family: 'MyriadPro Light'">Pour cette 2 ème partie de tutoriel nous allons apprendre a faire une action suivant la cellule qui est sélectionnée:</span></u></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Pour ce faire nous allons utiliser le paramètre IndexPath qui nous est gentiment donner. Pour récupérer le numéro de la cellule sélectionnée rien de plus simple IndexPath.row cela nous retourne un int entre 0 et le nombre de cellule que vous avez choisit moins 1. Je m'explique si vous avez choisit de mettre 4 cellule, les cellules seront numérotés a partir de 0, c'est a dire 0,1,2 et 3.</span></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Pour organiser notre code nous allons utiliser le Swicth comme déclaration (statement) au lieu du if qui peut rendre notre code pas très très jolie hein <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" /></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Donc voici un exemple de code qui va nous afficher une alerte en nous indiquant le numéro de la cellule.</span></p> <p style="text-align: center"></p><p>[CODE=swift] override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)</p><p> {</p><p> tableView.deselectRow(at: indexPath, animated: false)</p><p> let alert:UIAlertView = UIAlertView()</p><p> </p><p> alert.title = "Alertes de test"</p><p> aler*spam*ssage = "Tu a clicker sur la cell numéro: \(indexPath.row) !"</p><p> alert.addButton(withTitle: "OK chef !")</p><p> alert.show()</p><p> }[/CODE]</p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Je vous laisse ensuite lancer votre application et voir le résultat <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite400" alt="::):" title="Smile ::):" loading="lazy" data-shortname="::):" /></span></p> <p style="text-align: center"></p><p><u><span style="font-family: 'MyriadPro Light'">Pour la 3 ème partie de ce tutoriel nous allons voir comment ajoutée la fonction de glisser (Swipe) a nos cellules:</span></u></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Pour ce faire nous allons utiliser a la fonction assignée a cela qui est tableview <strong>editActionsForRowAt</strong>. Je vais vous montrer un code pour ajouter un Bouton et vous l'expliquez en détails !</span></p><p>[CODE=swift]</p><p> override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {</p><p> </p><p> let favorite = UITableViewRowAction(style: .normal, title: "\u{1F441}\nSuivre", handler: { (action, index) in</p><p> </p><p> print("Faire une action au click !")</p><p> </p><p> })</p><p> favorite.backgroundColor = UIColor(hex: 0x2f78a0)</p><p> </p><p> return [favorite]</p><p> }</p><p>[/CODE]</p><p></p><p><span style="font-family: 'MyriadPro Light'">Ici nous avons déclarer notre bouton sous le nom <strong>favorite</strong> puis nous lui donnons la valeur d'une <strong>UITableViewRowAction.</strong> L'<strong><strong>UITableViewRowAction </strong></strong>possède 3 paramètre qui sont : </span></p><ul> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro Light'">Le style : default, normal, destructive</span></li> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro Light'">Le title : le titre de votre bouton</span></li> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro Light'">L'handler : Action lors de l'appuie sur le bouton. Il possède 2 paramètres action et index.</span></li> </ul> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><strong>UITableViewRowAction </strong>possède aussi de nombreuse variable modifiable comme la couleur du background, modifiable avec <strong>backgroundColor. </strong></span></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Au final notre code correspond a, un bouton de type normal ayant le titre <strong>[fa]fa-eyes[/fa] Suivre </strong>et qui lors de l'appuie envoie un message au débogueur "Faire une action au click !". Nous avons enfin régler la couleur du background sur : <strong><span style="color: #2f78a0">[]</span></strong></span></p><p></p><p style="text-align: center"><strong><span style="font-family: 'MyriadPro'"> Voila j'espère que cette explication de la tableview vous auras appris ou même aidée a mieux utilisée ce composant ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite400" alt="::):" title="Smile ::):" loading="lazy" data-shortname="::):" /></span></strong></p> <p style="text-align: center"></p></blockquote><p></p>
[QUOTE="Mathieu ?, post: 7015370, member: 712193"] [CENTER][ATTACH=full]103363[/ATTACH] [FONT=Poppins][SIZE=4][URL='https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-les-composants-controller-partie-1.584830/']Le Swift : Développement d'une application iOS | Les composants controller | Partie 1[/URL] [URL='https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-les-composants-les-plus-utilises-partie-2.584853/']Le Swift : Développement d'une application iOS | Les composants les plus utilisés | Partie 2[/URL] [URL='https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-zoom-sur-des-composants-1-partie-3.584886/']Le Swift : Développement d'une application iOS | Zoom sur des composants #1 | Partie 3[/URL] (TableView) [URL='https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-zoom-sur-des-composants-2-partie-4.585020/']Le Swift : Développement d'une application iOS | Zoom sur des composants #2 | Partie 4[/URL] (ContainerView)[/SIZE] [URL='https://reality-gaming.fr/threads/le-swift-developpement-dune-application-ios-utilisation-des-buttons-textfields-partie-5.585039/']Le Swift : Développement d'une application iOS | Utilisation des buttons, textfields... | Partie 5[/URL][/FONT] [FONT=MyriadPro Light]Dans ce tutoriel nous allons voir comment ajouter des fonctionnalité a notre Table View (Controller). Pour commencer vous devez avoir lue le tutoriel de la partie 3, nous prendrons le code de cette partie.[/FONT] [/CENTER] Code Partie 3 : [code=swift] // // TUTOTableViewController.swift // tutoRG // // Created by Marent on 28/12/2016. // Copyright © 2016 Marent. All rights reserved. // import UIKit class TUTOTableViewController: UITableViewController { override func viewDidLoad() { super.viewDidLoad() // Uncomment the following line to preserve selection between presentations // self.clearsSelectionOnViewWillAppear = false // Uncomment the following line to display an Edit button in the navigation bar for this view controller. // self.navigationItem.rightBarButtonItem = self.editButtonItem() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } // MARK: - Table view data source override func numberOfSections(in tableView: UITableView) -> Int { // #warning Incomplete implementation, return the number of sections return 1 } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { // #warning Incomplete implementation, return the number of rows return 4 //Mettez le nombre que vous shouaitez ! } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cellname")! as UITableViewCell // Configure the cell... cell.textlabel?.text = "Swift Tuto" return cell } /* // Override to support conditional editing of the table view. override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool { // Return false if you do not want the specified item to be editable. return true } */ /* // Override to support editing the table view. override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) { if editingStyle == .delete { // Delete the row from the data source tableView.deleteRows(at: [indexPath], with: .fade) } else if editingStyle == .insert { // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view } } */ /* // Override to support rearranging the table view. override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) { } */ /* // Override to support conditional rearranging of the table view. override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool { // Return false if you do not want the item to be re-orderable. return true } */ /* // MARK: - Navigation // In a storyboard-based application, you will often want to do a little preparation before navigation override func prepare(for segue: UIStoryboardSegue, sender: Any?) { // Get the new view controller using segue.destinationViewController. // Pass the selected object to the new view controller. } */ } [/code] [CENTER][/CENTER] [U][FONT=MyriadPro Light]Nous allons commencer par l'ajout d'une action lors de l'appuie sur une cellule:[/FONT][/U] [CENTER][FONT=MyriadPro Light]Pour ajouter une action lorsque l'ont appuie sur une cellule nous allons utilisé la fonction tableview [B]didSelectRowAt[/B]. Je vais commencer avec un exemple simple qui est que lorsque l'on appuie sur une cellule n'importe laquelle elle nous affiche une alerte.[/FONT][/CENTER] [CODE=swift] override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { let alert:UIAlertView = UIAlertView() alert.title = "Alertes de test" aler*spam*ssage = "Tu a clicker sur une cellule" alert.addButton(withTitle: "OK chef !") alert.show() }[/CODE] [CENTER][FONT=MyriadPro Light]Comment vous pouvez le voir la cellule ne c'est pas désélectionner après que l'on est eu l'alerte d'afficher. Pour ce faire vous devez ajouter une ligne lui disant que lorsqu'une cellule est sélectionnée elle se désélectionne juste après.[/FONT][/CENTER] [CODE=swift] override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { tableView.deselectRow(at: indexPath, animated: false) let alert:UIAlertView = UIAlertView() alert.title = "Alertes de test" aler*spam*ssage = "Tu a clicker sur une cellule" alert.addButton(withTitle: "OK chef !") alert.show() }[/CODE] [CENTER][FONT=MyriadPro Light]Voila vous avez appris a exécuter une action lorsque l'utilisateur sélectionne une cellule ::):[/FONT] [/CENTER] [U][FONT=MyriadPro Light]Pour cette 2 ème partie de tutoriel nous allons apprendre a faire une action suivant la cellule qui est sélectionnée:[/FONT][/U] [CENTER][FONT=MyriadPro Light]Pour ce faire nous allons utiliser le paramètre IndexPath qui nous est gentiment donner. Pour récupérer le numéro de la cellule sélectionnée rien de plus simple IndexPath.row cela nous retourne un int entre 0 et le nombre de cellule que vous avez choisit moins 1. Je m'explique si vous avez choisit de mettre 4 cellule, les cellules seront numérotés a partir de 0, c'est a dire 0,1,2 et 3.[/FONT][/CENTER] [CENTER][FONT=MyriadPro Light]Pour organiser notre code nous allons utiliser le Swicth comme déclaration (statement) au lieu du if qui peut rendre notre code pas très très jolie hein :trollface:[/FONT] [FONT=MyriadPro Light]Donc voici un exemple de code qui va nous afficher une alerte en nous indiquant le numéro de la cellule.[/FONT] [/CENTER] [CODE=swift] override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { tableView.deselectRow(at: indexPath, animated: false) let alert:UIAlertView = UIAlertView() alert.title = "Alertes de test" aler*spam*ssage = "Tu a clicker sur la cell numéro: \(indexPath.row) !" alert.addButton(withTitle: "OK chef !") alert.show() }[/CODE] [CENTER][FONT=MyriadPro Light]Je vous laisse ensuite lancer votre application et voir le résultat ::):[/FONT] [/CENTER] [U][FONT=MyriadPro Light]Pour la 3 ème partie de ce tutoriel nous allons voir comment ajoutée la fonction de glisser (Swipe) a nos cellules:[/FONT][/U] [CENTER][FONT=MyriadPro Light]Pour ce faire nous allons utiliser a la fonction assignée a cela qui est tableview [B]editActionsForRowAt[/B]. Je vais vous montrer un code pour ajouter un Bouton et vous l'expliquez en détails ![/FONT][/CENTER] [CODE=swift] override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? { let favorite = UITableViewRowAction(style: .normal, title: "\u{1F441}\nSuivre", handler: { (action, index) in print("Faire une action au click !") }) favorite.backgroundColor = UIColor(hex: 0x2f78a0) return [favorite] } [/CODE] [FONT=MyriadPro Light]Ici nous avons déclarer notre bouton sous le nom [B]favorite[/B] puis nous lui donnons la valeur d'une [B]UITableViewRowAction.[/B] L'[B][B]UITableViewRowAction [/B][/B]possède 3 paramètre qui sont : [/FONT] [LIST] [*][FONT=MyriadPro Light]Le style : default, normal, destructive[/FONT] [*][FONT=MyriadPro Light]Le title : le titre de votre bouton[/FONT] [*][FONT=MyriadPro Light]L'handler : Action lors de l'appuie sur le bouton. Il possède 2 paramètres action et index.[/FONT] [/LIST] [CENTER][FONT=MyriadPro Light][B]UITableViewRowAction [/B]possède aussi de nombreuse variable modifiable comme la couleur du background, modifiable avec [B]backgroundColor. [/B][/FONT][/CENTER] [CENTER][FONT=MyriadPro Light]Au final notre code correspond a, un bouton de type normal ayant le titre [B][fa]fa-eyes[/fa] Suivre [/B]et qui lors de l'appuie envoie un message au débogueur "Faire une action au click !". Nous avons enfin régler la couleur du background sur : [B][COLOR=#2f78a0][][/COLOR][/B][/FONT][/CENTER] [CENTER][B][FONT=MyriadPro] Voila j'espère que cette explication de la tableview vous auras appris ou même aidée a mieux utilisée ce composant ! ::):[/FONT][/B] [/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Le Swift : Développement d'une application iOS | Table View en profondeur | Partie 6
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut