IOS13 Youssef - Fichier-pdf.fr

IOS13
Youssef
 BALOUKI   GI 2020

Introduction
Qu’est-ce que l’iPhone ?
IPhone est une gamme de smartphones commercialisée par
Apple depuis le 29 juin 2007.
    Processeur
    Système d’exploitation : iOS
    Support réseau : EDGE/CDMA/3G/LTE/4G, Wifi,
    Bluetooth
    Ecran tactile capacitif multipoint
    Appareil photo qui fonctionne également comme une
    caméra,
    Système de géolocalisation intégré
    iPod intégré qui permet bite d'écouter et de télécharger
    de la musique
    Gyroscope
    Accéléromètre
    Capteur de luminosité ambiante
    Etc….

Introduction

iOS
Le système d'exploitation développé par Apple
  pour ses appareils mobiles : l'iPhone, de l'iPad, ainsi
  que de l'iPod Touch.
Il est dérivé de OS X
 Anciennement iPhone OS, Ce nom a été changé le
  7 juin 2010 pour iOS

Introduction
Xcode
         Les modules
           StoryBoard
          Simulateur/Debugger
           Instrument Profiler
           Analyse statistique
           Gestionnaire de versions intégrés
             Git, Subversion
          Accès directe à la documentation

Construction des interfaces
Deux approches

Une approche basée sur storyboard
  Par dessin comme
  On ne me maitrise pas totalement la construction de
  l’interface
 Une approche par pure programmation
   On fait tout à la main
   Maitrise complet du design de l’interface
   Mais plus compliqué (réservé aux experts)

Les bases de Storyboard
Interface graphique
   Dessiner ses écrans
   Positionnement par contraintes
   Scénariser l’application
   Lier les éléments de l’interface au code métier
Génération de code “AutoLayout”
    Introduit avec iOS 6 (2012)
    Positionnement relatif des éléments de l’interface
       •Relations entre les éléments
       •Contraintes par rapport à l’écran

Modèles de iPhone

• iPhone           iPhone 7 et 7 Plus
• iPhone 3G        iPhone 8 et 8 Plus
• iPhone 3GS
                   iPhone X
• iPhone 4         iPhone XS et XS Max
• iPhone 4s                              iPhone11
• iPhone 5         iPhone XR
• iPhone 5c        iPhone11, 11 Pro et
• iPhone 5s        11 Pro Max
• iPhone 6         iPhone SE - 2de gen
• iPhone 6Plus
• iPhone 6s
• iPhone 6s Plus
• iPhone SE

Version iOS
•   Juin 2007      v 1.x
•   Juillet 2008   v 2.x
•   Juin 2009      v 3.x
•   Juin 2010      v 4.x
•   Oct 2011       v 5.x   Sept 2019

•   Sept 2012      v6.x
•   Juin 2013      v7.x
•   Juin 2014      v8.x
•   juin 2015      v9.x
•   Sept 2016      v10.x
•   Juin 2017      v11.x
•   Juin 2018      v12.x
•   juin 2019      v13.x

Les tailles des écrans

Rejoindre le programme développeur
    Apple

¨   Inscription gratuite
         • Vous donne votre identifiant développeur Apple
         (AppleID).
         • Vous donne accès aux outils logiciels de base
         (comme Xcode et iOS SDK) dont vous avez besoin
         pour développer des applications pour iOS.
         • Vous permet de tester vos applications iOS en
         utilisant des simulateurs dans Xcode et devices
         • Vous fournit la documentation Apple relative au
         développement iOS.
         • Vous permet de signaler les bugs et de participer
         aux événements Apple

Rejoindre le programme développeur
    Apple

¨   Inscription payée (nécessite un paiement annuel de
     99 $ à Apple)
         • Vous permet d'accéder aux outils développeur,
         aux logiciels pré-release et au support technique.
         • Vous permet de placer vos applications iOS
         achevées dans l'App Store.
         • Vous permet d'accéder au portail par le biais
         duquel vous créez le profil d'approvisionnement
         de développement, qui est nécessaire à
         l'exécution de vos applications sur des
         périphériques iOS de développement.

Structure de l’iOS

Cycle de vie de l'application iOS

Interface Graphique

Dans
•    l’iOS en utilise le MVC.
        Modèle , view, controlleur
• Modèle:
        Quellques sont vos données?
• Vue: UIView (storyboard)
            Où sont presentées les données?
• Controlleur UIViewController
        Comment sont presentées les données?

Interface Graphique

Interface Graphique
UViews
• Une UIView : est une surface rectangulaire dans laquelle on
peut dessiner et gerer les evènements.
• Hierarchie : une vue a une superview et des sous- views.

Interface Graphique
Storyboard
• Storyboard un fichier qui contient tous les ecrans de
l'application et les liens etablis entre chaque ecran.

Interface Graphique

Widgets

• UIButton
• UITableView
• UITextView
• UIImageView
• UIWebView
• UIScrollView
• UILabel
• UITextField
• ....

Interface Graphique

• Les outlets: proprietes du code sources lie à un
element de l’interface
Exemple: button, label ....
• Actions: Les messages quand un évenement se
produit
Exemple: “une touche sur le button ”

LE SIMULATEUR IOS

• Le simulateur est une application Mac permet de simuler
le fonctionnement d'un iPhone, d'un iPod Touch,iPad…

LE SIMULATEUR IOS
Si vous voulez utiliser le simulateur iOS, vous pouvez à
tout moment changer de device en utilisant la liste
deroulante “Scheme”

LE SIMULATEUR IOS
Simuler les gestuelles de l'utilisateur
vous pouvez utiliser des commandes dans le menu Matériel du simulateur iOS,
ou les raccourcis clavier equivalents, pour simuler les actions dans le simulateur
iOS

Mode Visuel

1.    Choisir une vue à partir du bibliothèque
2.    L’ajouter dans le storyBoard
3.   La mise en forme de la nouvelle vue dans le
4.   Story board en respectant les # device et #
     orientations

Label, TextField & Button

 UITextField, UIButton et UILabel héritent de UIView.

Label, TextField & Button

Les contrôles
UILabel
• Les contrôles Label sont utilises
pour afficher des textes sur une ou
plusieurs lignes. Leur contenu ne
peut pas être modifie par
l'utilisateur.
• Les caracteristiques d'un Label
peuvent être definies dans Interface
Builder ou bien avec le code.

Label, TextField & Button

Exemple :
monLabel.text = "Un court texte affiché dans le
contrôle Label sur deux lignes"
monLabel.numberOfLines = 2
monLabel.font = UIFont( name:"Courier", size : 14)
monLabel.textAlignment = .center

monLabel.textColor = UIColor (red: 1.0/255.0,
green: 0.0/255.0 blue: 0.0/255.0 alpha: 1.0)

Label, TextField & Button

Les contrôles
UITextField
• Les Text Field sont des
zones de texte monoligne.
• Ils sont utilises pour saisir
des donnees textuelles
courtes, comme un nom ou
un mot de passe
• Tout comme pour les
Labels, vous pouvez choisir
l'alignement, la police et la
couleur du texte, dans
Interface Builder ou avec du
code

Label, TextField & Button

Exemple :
monTextField.text = Un court texte affiché dans le
                    contrôle Label sur deux lignes"
monTextField.placeholder = "Entrez votre nom"

Label, TextField & Button

Les contrôles
UITextView
• Les Text View sont
des zones de texte
multiligne.
• Ce contrôle peut
être affiche en
lecture seule ou en
lecture/ecriture.

                              Youssef Balouki

UILabel, UITextField & UIButton

Application : UIButton & UITextField

Alerte & Actions

Application : Devinette avec alertes et actions

Slider, Stiper & Segmented

UISlider, UIStiper & UISegmented
Le slider : (de classe UISlider)
la vue qui vous permet de choisir une valeur entre 0 et 99. Bien sûr, vous pouvez choisir les
valeurs que vous voulez.

UISlider, UISteper & UISegmented
Le steper : (de classe UISteper)
Un "+" et un "-" qui incrémente ou décrémente une valeur. Valeurs comprises entre 0 et 99
également avec un pas de 1.

Application : UISlider & UISegment

FENÊTRES, VUES ET CONTRÔLES

Les contrôles
UIImageView
• Le contrôle Image
View permet
d'afficher une image.
• Les images sont
chargees via des
objets UIImage.

FENÊTRES, VUES ET CONTRÔLES
Exemple :
Image dans Assets.xcassets

  @Iboutlet image : UIImage!
             image.image = UIImage(named : ’’monImage ’’)

Image dans bundle
 let path = Bundle.main.path(forResource : ‘’imageName’’, ofType : ‘’jpg’’)
     image.image = UIImage(contentsOfFile : path)

*(Allow  Arbitrary Loads key to YES under App Transport Security Settings
dictionary in your .plist file)

Navigation Bar & Toolbar

Icône   Nom du contrôle      Fonction

        Navigation Bar       Barre de navigation, affichée juste en dessous de la
                             barre d'état

        Navigation Item      Elément affiché dans un contrôle Navigation Bar

        Toolbar              Barre d'outils contenant un ou plusieurs boutons

        Flexible Space Bar   Espace qui s'ajuste automatiquement en fonction de
        Button Item          la place disponible dans un contrôle Toolbar

Navigation Bar - Tool Bar

LES INFORMATIONS TABULAIRES
Les applications iOS ont souvent recours à des vues
tabulaires pour présenter des listes de données. Ces listes
permettent de :
   présenter   un ensemble d'options sélectionnables par
    l'utilisateur ;
   naviguer dans un ensemble de données structurées
    hiérarchiquement ;
   présenter une liste d'éléments triés selon un ou plusieurs
    critères ;
   définir plusieurs niveaux de détail pour faciliter l'affichage
    des informations sur des devices de petite taille.

LES INFORMATIONS TABULAIRES

   Table View :affiche des listes d'informations sur une colonne ;

   Picker View :affiche des informations sur une ou plusieurs colonnes,
                   sous la forme d'une roulette 3D

   Date Picker : similaire au deuxième, il est spécialisé dans 'affichage
                    des dates et d'heures.

Youssef
 BALOUKI

Sélection parmi des choix multiples
                         UIPickerView
Objectif : permettre aux utilisateurs de votre application de
sélectionner à partir d'une liste de valeurs.

1.   Ouvrir StoryBoarad, glisser un UIPickerView & UITextField
2.   Créer un IBOutlet pour UIPickerView & UITextField
3.   Lier UIPickerView & UITextField puis lier le UIPickerView
     à une dataSource & delegate
1.   Importer les fonctions datasource et delegate requises
2.   Définir les fonctions datasource et tester
3.   Créer un tableau de données puis afficher les données en utilisant
     ce tableau.

sélection parmi des choix multiples
           UIPickerView

               Youssef
                BALOUKI

Sélection parmi des choix multiples
           UIPickerView

                           Youssef
                            BALOUKI

Sélection d'une date dans un contrôle
           spécialisé :UIDatePicker
* Le contrôle Date Picker est très proche du contrôle Picker View,

   Youssef
    BALOUKI

Sélection d'une date dans un contrôle
    spécialisé :UIDatePicker

     p_dpk.datePickerMode = .date

Youssef
 BALOUKI

Sélection d'une date dans un contrôle
    spécialisé :UIDatePicker

Youssef
 BALOUKI

Sélection d'une date dans un contrôle
    spécialisé :UIDatePicker

Youssef
 BALOUKI

Recognizer Gesture

Recognizer Gesture

Sélection d’une image:
UIImagePickerController