Étape 3: Création de l’Interface
Remarque : Dans cette étape nous allons créer l’interface utilisateur pour la minuterie. Cela inclura le sélecteur de temps, ainsi que les boutons Start, Stop et Pause.
3 a. cliquez sur le fichier Main.storyboard pour l’ouvrir.
Remarque : Dans votre projet, vous recevrez les fichiers qui sont créés automatiquement. Le seul fichier que nous allons travailler avec cette étape est le fichier Main.storyboard. En bref, ce fichier permet aux objets d’interface drag-and-drop qui peuvent plus tard être connectés à notre code.
3 b. glisser-déplacer l’objet d’interface "Date Picker" dans la liste des éléments d’interface dans le coin inférieur droit de la Xcode à la fenêtre de la table de montage séquentiel.
Voir les images ci-dessus.
3 C. ajoutez l’objet "Date Picker" vers le haut de l’écran. Cliquez sur l’icône en bas de la fenêtre de Xcode qui ressemble à un triangle entre à lignes verticales, puis cliquez sur l’option « Ajouter des contraintes de manque ».
Remarque : Vous pouvez positionner l’objet "Date Picker" n’importe où sur l’écran que vous souhaiteriez. Des contraintes seront assurera que notre objet de sélecteur de dates s’insère correctement sur les écrans d’iPhone de taille différente.
3D. cliquez sur l’objet de sélecteur de dates, puis ouvrez l’onglet attributs dans le coin supérieur droit de la fenêtre de Xcode.
Remarque : L’onglet attributs sera l’option directement à gauche de l’icône qui ressemble à un souverain.
3e. passer l’option de Mode sur Count Down Timer et assurez-vous que l’option intervalle est définie à 1 Minute.
3F. faites glisser l’objet interface étiqueté "Bouton" sur votre table de montage séquentiel. Lorsqu’il est ajouté à votre table de montage séquentiel, changer l’option de titre du bouton « Démarrer » de l’onglet attributs.
Remarque : Ce bouton sera également notre bouton « Stop », et nous codera cette fonctionnalité plus tard. L’objet « Bouton » sera situé dans la même région que notre objet de sélecteur de dates. L’onglet attributs sera également situé dans la même situation qu’avec notre objet de sélecteur de dates. Vous pouvez modifier une variété d’autres paramètres pour notre bouton, y compris en utilisant votre propre bouton personnalisé. Cependant pour l’application de ce projet, nous allons utiliser le bouton du système par défaut.
3 G. faites glisser un autre bouton à votre table de montage séquentiel, comme nous l’avons fait avec le bouton de démarrage. Changer le titre de ce bouton pour mettre en Pause.
Remarque : Plus tard, nous changerons ce bouton est le bouton Resume ainsi de reprendre la minuterie. Tout comme avec la fonction Start/Stop, cela se fera dans le code.
3 H. faites glisser un objet Label sur votre table de montage séquentiel et assurez-vous qu’il est au-dessus de l’objet de sélecteur de dates. Étirer la taille de l’étiquette est la même taille que l’objet de sélecteur de dates.
Remarque : Ce label contiendra le compte à rebours. L’objet Label peut être trouvé où se trouvent les objets Button et sélecteur de dates.
3i. ajouter des contraintes à l’objet de l’étiquette en cliquant sur l’icône en bas qui ressemble à un triangle entre deux lignes verticales, puis choisissez 'Ajouter des contraintes de manque'.
3J. modifiez la propriété 'Text' de l’onglet attributs ' 00:00 '. Assurez-vous que la propriété Font est réglée sur système, et la taille de police est définie à 44.
3 K. affectez la propriété alignement centré et modifiez la propriété Background de couleur blanc.
3L. Affectez à la propriété Alpha à 0.
Remarque : Nous prendrons un regard sur le raisonnement pour cette propriétés une fois que nous commençons à coder l’application. Les images ci-dessus vont montrer ce qui doit ressembler à votre table de montage séquentiel. Vous remarquerez que les bonnes propriétés pour l’objet Label sont sur le côté droit.
