- Inscription
- 19 Novembre 2016
- Messages
- 1 247
- Réactions
- 1 460
- Points
- 12 310
Le Swift : Développement d'une application iOS | Les composants controller | Partie 1
Le Swift : Développement d'une application iOS | Les composants les plus utilisés | Partie 2
Le Swift : Développement d'une application iOS | Zoom sur des composants #1 | Partie 3 (TableView)
Le Swift : Développement d'une application iOS | Zoom sur des composants #2 | Partie 4 (ContainerView)
Le Swift : Développement d'une application iOS | Utilisation des buttons, textfields... | Partie 5
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.
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.
}
*/
}
Nous allons commencer par l'ajout d'une action lors de l'appuie sur une cellule:Pour ajouter une action lorsque l'ont appuie sur une cellule nous allons utilisé la fonction tableview didSelectRowAt. 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.
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()
}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.
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()
}Voila vous avez appris a exécuter une action lorsque l'utilisateur sélectionne une cellule 
Pour cette 2 ème partie de tutoriel nous allons apprendre a faire une action suivant la cellule qui est sélectionnée:
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.
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
Donc voici un exemple de code qui va nous afficher une alerte en nous indiquant le numéro de la cellule.
Donc voici un exemple de code qui va nous afficher une alerte en nous indiquant le numéro de la cellule.
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()
}Je vous laisse ensuite lancer votre application et voir le résultat
Pour la 3 ème partie de ce tutoriel nous allons voir comment ajoutée la fonction de glisser (Swipe) a nos cellules:
Pour ce faire nous allons utiliser a la fonction assignée a cela qui est tableview editActionsForRowAt. Je vais vous montrer un code pour ajouter un Bouton et vous l'expliquez en détails !
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]
}Ici nous avons déclarer notre bouton sous le nom favorite puis nous lui donnons la valeur d'une UITableViewRowAction. L'UITableViewRowAction possède 3 paramètre qui sont :
- Le style : default, normal, destructive
- Le title : le titre de votre bouton
- L'handler : Action lors de l'appuie sur le bouton. Il possède 2 paramètres action et index.
UITableViewRowAction possède aussi de nombreuse variable modifiable comme la couleur du background, modifiable avec backgroundColor.
Au final notre code correspond a, un bouton de type normal ayant le titre Suivre 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 : []
Voila j'espère que cette explication de la tableview vous auras appris ou même aidée a mieux utilisée ce composant !
Dernière édition:
