{"id":1525,"date":"2014-09-07T13:13:35","date_gmt":"2014-09-07T17:13:35","guid":{"rendered":"http:\/\/tim.cstj.qc.ca\/cours\/xcode\/wp\/?page_id=1525"},"modified":"2014-09-07T13:13:35","modified_gmt":"2014-09-07T17:13:35","slug":"storyboard","status":"publish","type":"page","link":"https:\/\/ve2cuy.com\/xcode\/storyboard\/","title":{"rendered":"StoryBoard"},"content":{"rendered":"

Xcode.Storyboard<\/h1>\n

Contenu<\/h1>\n

\"storyboard4boxes-thumb\"
\n <\/p>\n

    \n
  1. Naviguer (segue) avec un\u00a0\u00ab\u00a0Navigation Controller\u00a0\u00bb<\/a><\/li>\n
  2. Naviguer avec un \u00ab\u00a0TabBar Controller\u00a0\u00bb<\/a><\/li>\n
  3. Combiner \u00ab\u00a0Navigation Controller\u00a0\u00bb et \u00ab\u00a0TabBar Controller\u00a0\u00bb<\/a><\/li>\n
  4. Naviguer par programmation<\/a><\/li>\n
  5. Naviguer sous un iPad<\/a><\/li>\n<\/ol>\n

     
    \n 
    \nWikipedia:     segue<\/a><\/p>\n

    \n

    Objectifs<\/h1>\n

    \u00c0 la fin de ce module, nous devrions \u00eatre en mesure, gr\u00e2ce au ‘Storyboard’ de Xcode, de naviguer entre les \u00a0diff\u00e9rentes sc\u00e8nes d’un projet. \u00a0De plus, nous saurons comment renseigner des transitions \u00ab\u00a0segue\u00a0\u00bb diff\u00e9rentes.
    \n <\/p>\n

    \n

    <\/a><\/p>\n

    1 – Naviguer (segue) avec un\u00a0\u00ab\u00a0Navigation Controller\u00a0\u00bb<\/h1>\n

     
    \nAction 1.1<\/strong><\/span>\u00a0 – \u00a0    T\u00e9l\u00e9charger les apps du projet \u00e0 partir de github<\/a>
    \n 
    \nNote<\/strong>: \u00a0Attention, ce projet contient plusieurs apps, il faut ouvrir le bon groupe. \u00a0M\u00eame chose lors d’un test sur l’\u00e9mulateur, il faut s’assurer d’avoir s\u00e9lectionn\u00e9 la bonne app.<\/em><\/span>
    \nAstuce<\/span><\/strong> – Lors des tests, si le module n’apparait pas dans la liste des sch\u00e9mas, s\u00e9lectionner ‘Manage Schemes…’ – liste \u00e0 droite du bouton ‘stop’ – \u00a0suivi par ‘Autocreate Schemes\u00a0now…’
    \n    \"xcode-schemas\"<\/a>
    \n    \"autocreate-schemes\"<\/a>
    \n 
    \n 
    \nAction 1.2<\/strong> <\/span>– Afficher le ‘storyboard’ de l’app ‘d\u00e9parts.module 01<\/strong>‘ et y ajouter deux (2) ‘ViewController’.
    \n\"storyboard.navigationcontroller.etape01\"
    \n 
    \n 
    \nAction 1.3<\/strong><\/span> – Renseigner\u00a0la couleur de fond des trois sc\u00e8nes: bleu, rouge et vert.
    \n\"storyboard.navigationcontroller.etape01b\"
    \nNOTE: \u00a0Il faut d\u00e9sactiver la mise en page automatique: \u00a0<\/span>
    \n    \"cap10\"<\/a>
    \n 
    \nAction 1.4<\/strong><\/span> – Renommer\u00a0les objets ‘sc\u00e8nes’ pour ‘Sc\u00e8ne bleue’, …
    \n\"storyboard.navigationcontroller.etape02\"
    \n 
    \n 
    \nAction 1.5<\/strong> <\/span>– Encapsuler ‘Sc\u00e8ne bleue’ dans un ‘Navigation controller’
    \n\"storyboard.navigationcontroller.etape03\"
    \n 
    \nAction 1.6<\/strong> <\/span>– Observer le lien entre ‘Navigation Controller’ et ‘Sc\u00e8ne bleue’ ainsi que la nouvelle zone au haut de ‘Sc\u00e8ne bleue’.
    \n\"storyboard.navigationcontroller.etape04\"
    \n 
    \nAction 1.7<\/strong><\/span> – Ajouter un UIButton dans la zone de navigation et renseigner ses propri\u00e9t\u00e9s.
    \n\"storyboard.navigationcontroller.etape05\"
    \nAttention –\u00a0<\/span>Selon la version de Xcode, il est possible que la zone de navigation soit vide. \u00a0Il faudra alors ajouter un \u00e9l\u00e9ment de type ‘navigation item’ \u00e0 droite de la barre de navigation.<\/span>
    \nAction 1.8<\/strong> <\/span>– D\u00e9finir un ‘segue’ de type ‘push’ entre le bouton et ‘Sc\u00e8ne rouge’.
    \nNote<\/strong>: Attention<\/span>, il faut cliquer 2 fois sur la zone du bouton pour le s\u00e9lectionner. \u00a0V\u00e9rifier son type dans I4.
    \n 
    \n\"storyboard.navigationcontroller.etape06\"
    \n\"storyboard.navigationcontroller.etape07\"
    \n 
    \nAction 1.9<\/strong><\/span> – Renseigner les propri\u00e9t\u00e9s du ‘segue’ .
    \nNote<\/strong>: le lien entre ‘Sc\u00e8ne bleue’ et ‘Sc\u00e8ne rouge’ doit-\u00eatre s\u00e9lectionn\u00e9.
    \n\"storyboard.navigationcontroller.etape08\"
    \n 
    \nAction 1.11<\/strong>\u00a0<\/span>–\u00a0Renseigner le titre de la zone de navigation de ‘Sc\u00e8ne bleue’
    \n\"storyboard.navigationcontroller.etape09\"
    \n 
    \nAction 1.12<\/strong><\/span> – Tester l’application
    \n\"storyboard.navigationcontroller.etape10\" \"storyboard.navigationcontroller.etape11\"
    \n 
    \nAction 1.13<\/strong><\/span> – En laboratoire, \u00a0programmer le segue entre ‘Sc\u00e8ne rouge’ et ‘Sc\u00e8ne verte’ puis, tester l’application.
    \n\"storyboard.navigationcontroller.resultat.final\"
    \nAstuce<\/strong><\/span>: Il est possible de glisser un \u00ab\u00a0Navigation Controller\u00a0\u00bb de la librairie vers le ‘Storyboard’.
    \n 
    \nVoici comment faire pour retourner \u00e0 la sc\u00e8ne pr\u00e9c\u00e9dente par programmation:<\/p>\n

           \/\/ Retour au d\u00e9but\n        _ = self.navigationController?.popToRootViewController(animated: true)\n        \/\/ Retour \u00e0 la sc\u00e8ne pr\u00e9c\u00e9dente\n        _ = self.navigationController?.popViewController(animated: true)<\/pre>\n
     
    \n <\/p>\n
    \n
    <\/a><\/p>\n
    2 – Naviguer avec un \u00ab\u00a0TabBar Controller\u00a0\u00bb<\/h1>\n
    Action 2.1<\/strong><\/span> – Ouvrir le projet ‘D\u00e9parts.module 02’
    \nAction 2.2<\/strong><\/span> – Encapsulons la sc\u00e8ne bleue dans un ‘Tab Bar Controller’: Menu-Editor-Embed In-Tab Bar Controller.
    \n 
    \n\"storyboard.tabbarcontroller.etape02\"
    \n 
    \nAction 2.3<\/strong> <\/span>– Observons le nouveau contr\u00f4leur obtenu.
    \n\"storyboard.tabbarcontroller.etape03\"
    \n 
    \nAction 2.4<\/strong><\/span> – D\u00e9finissons une relation ‘segue’ entre le ‘Tab Bar controller’ et la sc\u00e8ne rouge. \u00a0Ctrl+Glisser du centre<\/strong>\u00a0du TBC vers la sc\u00e8ne \u00e0 lier.
    \n\"storyboard.tabbarcontroller.etape04\"
    \n 
    \nAction 2.5<\/strong><\/span>\u00a0– Renseignons le type ‘segue’ \u00e0 \u00ab\u00a0view controllers\u00a0\u00bb.
    \n 
    \n\"storyboard.tabbarcontroller.etape05\"
    \n 
    \nR\u00e9sultat:
    \n\"storyboard.tabbarcontroller.etape06\"
    \n <\/p>\n
    NOTE: \u00a0Il est possible (sous Xcode 8) que l’affichage soit bris\u00e9. \u00a0Renseigner une image sur l’item du ‘tab bar’ devrait corriger le probl\u00e8me.<\/span><\/strong><\/p><\/blockquote>\n
    Action 2.6<\/strong><\/span>\u00a0– R\u00e9p\u00e9tons l’action 2.5 pour la sc\u00e8ne verte.
    \n 
    \n\"storyboard.tabbarcontroller.etape07\"
    \nAction 2.7<\/strong><\/span>\u00a0–
    \n 
    \n\"storyboard.tabbarcontroller.etape08\"
    \n 
    \nAction 2.8<\/strong><\/span>\u00a0–
    \n\"storyboard.tabbarcontroller.etape11\"
    \n 
    \nAction 2.9<\/strong><\/span>\u00a0– Renseigner le titre de l’item
    \n\"storyboard.tabbarcontroller.etape09\"
    \n 
    \n 
    \n 
    \nAction 2.9b<\/strong><\/span>\u00a0– Utiliser des ic\u00f4nes syst\u00e8mes sur le bouton menu (‘Tab Bar Item’ pour pour la sc\u00e8ne et ‘Bar Item’ pour le ctrl)
    \n\"storyboard.tabbarcontroller.etape10\"
    \n 
    \nAction 2.10<\/strong><\/span>\u00a0– Tester l’app
    \n\"storyboard.tabbarcontroller.etape12\"
    \n 
    \nAction 2.11<\/strong><\/span>\u00a0– Parcourir les options.
    \n\"storyboard.tabbarcontroller.etape12b\"
    \n 
    \nAction 2.12<\/strong><\/span>\u00a0– Personnaliser l’ic\u00f4ne du bouton menu avec\u00a0des images livr\u00e9es avec l’app.
    \n\"storyboard.tabbarcontroller.etape13\"
    \n 
    \nAction 2.13<\/strong><\/span>\u00a0– Tester l’application
    \n\"storyboard.tabbarcontroller.etape14\"
    \nNote<\/strong><\/span>: \u00a0Il est possible de modifier l’ordre des items en les glissant dans la zone menu du TabBarController.
    \nAstuce<\/strong><\/span>: Il est possible de glisser un \u00ab\u00a0TabBar Controller\u00a0\u00bb de la librairie vers le ‘Storyboard’.
    \n <\/p>\n
    \n
    <\/a><\/p>\n
    3 – Combiner\u00a0\u00ab\u00a0Navigation Controller\u00a0\u00bb et \u00ab\u00a0TabBar Controller\u00a0\u00bb<\/h1>\n
    Action 3.1<\/strong><\/span>\u00a0–\u00a0Ouvrir le storyboard du module 03
    \nAction 3.2<\/strong><\/span>\u00a0– Observons la structure du ‘Storyboard’
    \n\"stotyboard.tabBar.et.navctrldepart\"
    \n 
    \nAction 3.3<\/strong><\/span>\u00a0– Encapsulons les rang\u00e9s ‘XBox’ et ‘PS4’ dans un ‘Navigation Controller’
    \n\"stotyboard.tabBar.et.navctrletape01\"
    \n 
    \nAction 3.4<\/strong><\/span>\u00a0– A) Ajoutons des ‘UIButton’ dans les sections de navigation et B) D\u00e9finissons des liens ‘segue’ \u00e0 partir des boutons.
    \n\"stotyboard.tabBar.et.navctrletape02\"
    \n 
    \nAction 3.4.2<\/strong><\/span>\u00a0– \u00c0 faire par l’\u00e9tudiant<\/p>\n