Développez votre première application pour iOS

Si vous vous lancez dans le développement d'applis, vous pouvez être sûr que vous aurez besoin un jour des outils que je vais vous présenter dans ce chapitre .

La TableView

Le nom doit déjà vous dire quelque chose. La TableView est simplement l'affichage de plusieurs infos ou données sous forme de liste. Ce n'est pas forcément l'objet le plus simple à mettre en place.

Allez dans le storyboard, glissez déposez une tableview dans le controller présenté lors du clic sur le bouton paramètres, cliquez sur , cliquez sur tous les bords et écrivez 0 pour haut et bas et -20 pour gauche et droite :

ça nous permet tout bêtement de faire en sorte que la UITableView occupe tout l'écran.

Créez ensuite un nouveau fichier Parametres.swift avec la classe Parametres et liez-la au storyboard : sélectionnez le controller contenant la UITableView et dans le troisième onglet dans le volet de droite, dans le champ "class", tapez "Parametres". Appuyez sur entrée.

C'est là que ça devient amusant. Pour implémenter la tableview, vous allez avoir besoin de deux protocoles : UITableViewDelegate et UITableViewDataSource. Le délégué de la UITableView va nous permettre de gérer le clic sur un élément de la table par exemple, de contrôler l'aspect des cellules ou encore de gérer les en-têtes de notre UITableView. Le protocole UITableViewDataSource, quant à lui nous permet de remplir la table.

Pour faire simple, on va dire que notre controller Parametres hérite des deux protocoles :

class Parametres : UIViewController, UITableViewDataSource, UITableViewDelegate

Pour se conformer à UITableViewDataSource, nous devons implémenter les fonctions suivantes :

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 0
}

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

Maintenant, voyons comment remplir notre table. Je vais faire 2 sections. Une section "Aide" et une autre "Infos". Pour gérer les sections j'utilise :

//Nombre de sections en tout
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 2
}


//Titres des en-têtes de chaque section
func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    //On récupère le numéro de section concerné
    switch section {
    case 0: return "Get some help"
    case 1: return "Informations"
    default: return ""
    }
}

On implémente enfin les cellules :

//Nombre de rangées par section
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    switch section {
    case 0: return 2 //Deux items dans la premiere section
    case 1: return 1 //Un item dans la deuxieme
    default: return 0
    }
}

//Cellule à l'index concerné
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    //On crée une cellule basique
    let cell = UITableViewCell(style: .Default, reuseIdentifier: "basic")
    //On va lui attribuer un texte en function de sa place
    cell.textLabel?.text = indexPath.section == 0 ? (indexPath.row == 0 ? "Contact us" : "Visit our Website") : "Get more infos" return cell
}

Juste au cas où vous n'êtes pas très friand d'opérateur ternaire, voici exactement la même chose :

//Cellule à l'index concerné
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    //On crée une cellule basique
    let cell = UITableViewCell(style: .Default, reuseIdentifier: "basic")
    //On va lui attribuer un texte en function de sa place
    if indexPath.section == 0 {
        if indexPath.row == 0 {
            cell.textLabel?.text = "Contact us"
        } else {
            cell.textLabel?.text = "Visit our Website"
        }
    } else {
        cell.textLabel?.text = "Get more infos"
    }
}

Dans le storyboard, sélectionnez le contrôleur Parametres et décochez l'attribut Adjust Scrollview insets qui ajoute une marge au-dessus de la table. Vous pouvez choisir le style que vous voulez, personnellement, je préfère "Grouped". Sélectionnez la TableView, allez dans le dernier onglet et liez "data source" et "delegate" au controller.

Internet simplement

La page d'informations affichera simplement du texte. Mais à propos de l'aide, le bouton "visit our website" doit bien emmener quelque part. Deux choix s'offrent à nous :

• ouvrir le navigateur du téléphone,

• ou créer notre propre navigateur.

Pour ouvrir le navigateur de l'appareil, c'est très simple :

UIApplication.sharedApplication().openURL(NSURL(string: "https://openclassrooms.com/")!)

Pour créer notre propre navigateur, c'est plus corsé.

On va créer un nouveau contrôleur (dans le storyboard drag & drop). On va créer une segue entre le bouton aide et le contrôleur pour y accéder directement. On va lui ajouter une toolbar fixe tout en bas, vous allez télécharger ces deux nouvelles images (prev et next) et et ajouter 2 bar button item dans la barre du bas. Le premier servira à revenir en arrière et le second à aller à la page suivante.

Nommez les images "back" et "next" par exemple, depuis le premier UIBarButtonItem, supprimez le texte et attribuez-lui l'image "back". Faites la même chose pour next.

Ajoutez également une search bar qui fera office de barre de recherche et de barre d'adresse. Fixez la en haut ou en bas.

N'oubliez pas d'ajouter des contraintes. Par exemple, pour la barre de navigation, la marge du bas est égale à 0 et celles de gauche et droite sont de -20 (pour coller la barre au deux bords).

Créez un nouveau fichier swift "Navigateur.swift" pour créer la classe Navigateur qui hérite de UIViewController et qui se conforme aux protocoles UIWebViewDelegate et UISearchBarDelegate :

class Navigateur: UIViewController, UIWebViewDelegate, UISearchBarDelegate { 

Liez votre controller dans le storyboard à cette nouvelle classe, ajoutez une UIWebView qui occupera le reste de l'espace disponible. (Pour les contraintes de la UIWebView, j'ai simplement entré 0 pour les marges haut et bas et -20 pour les marges gauche et droite)

La webview est un navigateur basique. Elle permet d'afficher du HTML et de traiter du JavaScript. Ici, on lui a ajouté un délégué, qui permet de gérer les interactions, de revenir en arrière, etc…

Créez la variable "wv" de type UIWebView et liez-la au storyboard.

Cliquez sur la webview, cliquez sur le "connections inspector" (dernier onglet sur la droite), maintenez le clic sur le rond de "delegate" et relâchez sur "Navigateur" dans le volet de gauche. Faites la même chose pour la search bar. C'est l'équivalent de webview.delegate = self.

Personnalisez votre webview et cochez "Scales pages to fit" et "Detection : Links".

Par défaut, Apple n'accepte pas les connexions sans certificat SSL.

Donc rendez-vous dans Info.plist, clic droit dans une zone vide > Add a row. Dans la nouvelle ligne, commencez à écrire "App Transport Security Settings", entrée. Clic droit sur cette nouvelle ligne > Add row > "Allow Arbitrary Loads" et dans la colonne "value", changez "NO" en "YES". Vous pourrez vous connectez sur des sites HTTP sans certificat SSL.

Dans Navigateur.swift, on réimplémente searchBarSearchButtonClicked appeléee lors du clic sur "Search" sur le clavier iOS. Cette méthode nous vient du protocole UISearchBarDelegate.

func searchBarSearchButtonClicked(searchBar: UISearchBar) {
    //On récupère le texte entré dans la search bar
    if let text = searchBar.text {
        //Si le texte peut être assimilé à une url, on charge l'url
        if let url = NSURL(string: text) {
            let request = NSURLRequest(URL: url)
            wv.loadRequest(request)
        }
    }
}

Je vais vous montrer deux exemples : Google et Yahoo mais le principe est simple, je vous laisserai chercher pour les autres. Créez une variable moteurRecherche égale à "Google" puis réessayez avec "Yahoo" :

func searchBarSearchButtonClicked(searchBar: UISearchBar) {
    //On récupère le texte entré dans la search bar
    if let text = searchBar.text {
        //On vérifie que
        if let url = NSURL(string: text) {
            let request = NSURLRequest(URL: url)
            wv.loadRequest(request)
        } else {
            if moteurRecherche == "Google" {
                //On remplace les espaces par des + pour faire une recherche google
                let recGoogle = text.stringByReplacingOccurrencesOfString(" ", withString: "+")
                //On crée l'url
                let urlGoogle = NSURL(string: "https://www.google.com/#q=\(recGoogle)")
                let req = NSURLRequest(URL: urlGoogle!)
                wv.loadRequest(req)
            } else if moteurRecherche == "Yahoo" {
                let recYahoo = text.stringByReplacingOccurrencesOfString(" ", withString: "+")
                let urlYahoo = NSURL(string: "https://search.yahoo.com/search?p=\( recYahoo)")
                let req = NSURLRequest(URL: urlYahoo!)
                wv.loadRequest(req)
            }
        }
    }
}

Facile ?

Si vous êtes toujours avec moi, vous êtes maintenant capables de faire une vraie appli iOS.

D'ailleurs, c'est parti pour votre activité : laissez parler votre créativité !

‌

Note : N'hésitez pas à personnaliser un peu votre navigateur.

Si vous ne les aviez pas écrites, voici les méthodes qui permettent de revenir en arrière et de retourner en avant à lier aux boutons du storyboard :

@IBAction func arriere(sender : UIBarButtonItem) {
    if wv.canGoBack {
        wv.goBack()
    }
}

@IBAction func avant(sender : UIBarButtonItem) {
    if wv.canGoForward {
        wv.goForward()
    }
}