Comment faire une calculatrice dans Xcode avec Swift : 9 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Dans ce tutoriel rapide, je vais vous montrer comment créer une calculatrice simple à l'aide de Swift dans Xcode. Cette application est conçue pour être presque identique à l'application de calculatrice d'origine pour iOS. Vous pouvez soit suivre les instructions étape par étape et construire la calculatrice avec moi, soit simplement passer à la dernière étape et copier et coller le code dans votre contrôleur de vue. Cependant, si vous faites cela, assurez-vous de connecter tous vos éléments sur le storyboard avec votre contrôleur de vue.

Étape 1: Création du projet

La première étape de la création de notre calculatrice consiste à créer le projet dans Xcode. Vous pouvez le faire en cliquant sur "Créer un nouveau projet Xcode" et en le nommant comme vous le souhaitez. J'ai nommé le mien "Calculatrice". L'étape suivante consiste à sélectionner « Application à vue unique » pour le type d'application. Conservez toutes les autres informations comme valeur par défaut.

Étape 2: mise en page du storyboard

L'étape 2 de la création de notre calculatrice vous oblige à concevoir une mise en page de base dans le storyboard. Avant de commencer, je vous recommande de remplacer votre appareil de simulation par l'iPhone 7 Plus. Commencez par faire glisser un bouton sur le storyboard et changez ses dimensions en 89 x 89. Changez sa couleur d'arrière-plan en mercure sur l'inspecteur d'attributs et sa couleur de police en tungstène. Ensuite, ajustez la police sur Helvetica Light 30. Continuez à copier et coller le bouton jusqu'à ce que vous ayez un total de 20. Ajustez la disposition de ces boutons de sorte que vous ayez cinq lignes et quatre colonnes.

Étape 3: Conception et esthétique du storyboard

Supprimez le deuxième bouton de la rangée du bas et développez le premier bouton pour occuper cet espace. Remplacez la valeur d'espace réservé de ce bouton par zéro. Continuez à modifier les valeurs numériques et les symboles de chaque bouton jusqu'à ce qu'il soit pratiquement identique à l'image ci-dessus. Dans l'inspecteur d'attributs, la couleur grise la plus foncée est l'argent, la couleur orange est la mandarine et la couleur de la police est changée en neige sur les boutons orange. Ensuite, cliquez sur le contrôleur de vue et changez sa couleur d'arrière-plan en noir. Ajoutez une étiquette au-dessus des boutons et ajustez sa taille à votre convenance. Alignez le texte à droite et changez la police de l'étiquette en Helvetica light 70. Si vous le souhaitez, vous pouvez ajouter des contraintes à tous les éléments afin que l'application ait la même apparence pour tous les appareils.

Étape 4: Connecter et intégrer des éléments

Ouvrez l'inspecteur d'attributs et modifiez la balise pour chaque bouton numérique. La balise doit être 1 de plus que la valeur numérique réelle. Par exemple, le bouton #0 doit avoir une valeur de balise de 1, le bouton #1 doit avoir une valeur de balise de 2, le bouton #2 doit avoir une valeur de balise de 3, et ainsi de suite. Ensuite, appuyez sur Ctrl, cliquez sur le bouton #0 et faites-le glisser sur le contrôleur de vue. Une fenêtre contextuelle devrait apparaître à l'écran. Remplacez la connexion par « action », le type par « UIButton », l'événement par « Touch Up Inside », les arguments par « Sender » et son nom par « numbers ». Vous pouvez changer le nom comme vous le souhaitez, mais cela signifie que vous devrez à nouveau changer le nom lors de l'appel de la fonction plus tard dans le programme. Ensuite, contrôlez, cliquez et faites glisser chaque bouton numérique dans la fonction que nous venons de créer. Maintenant, contrôlez, cliquez et faites glisser l'étiquette dans le programme, mais PAS dans la fonction. Cela signifie que vous introduisez simplement l'étiquette dans la fonction en tant que variable distincte. Rappelez-vous, si jamais vous êtes confus au sujet du code, j'ai laissé tout mon code pour que vous puissiez l'utiliser sur la dernière étape de ce Instructable.

Étape 5: Établissement des variables

Afin de rendre nos boutons numériques fonctionnels, nous devrons connecter leur valeur à l'étiquette dans notre fonction 'chiffres'. Vous pouvez le faire en créant d'abord une variable 'numberOnScreen' et en la rendant de type double et égal à 0: var numberOnScreen: Double = 0; Et n'oubliez pas, si le code ici n'est pas clair, je vous ai laissé le code complet de la dernière étape pour que vous l'utilisiez à votre guise. Ensuite, établissez une autre variable 'performingMath' de type bool et rendez-la fausse: var performantMath = false; Créez également une autre variable appelée 'previousNumber' de type double et définissez-la sur 0: var previousNumber: Double = 0; La dernière variable que vous devez créer est la variable « opération ». Définissez-le égal à 0: opération var = 0;

Étape 6: Fonction des boutons numériques

Une fois que vous avez défini les variables appropriées, vous pouvez ensuite copier et coller ce code dans votre fonction "nombres":

si performantMath == vrai {

label.text = String(sender.tag-1)

numberOnScreen = Double(label.text !) !

performantMath = faux

}

autre {

étiquette.texte = étiquette.texte ! + Chaîne(sender.tag-1)

numberOnScreen = Double(label.text !) !

}

Essentiellement, ce morceau de code affiche certains numéros sur l'étiquette lorsque le bouton approprié est enfoncé. Cependant, nous devons encore pouvoir utiliser tous les autres boutons et rendre la calculatrice fonctionnelle. Nous le ferons dans les prochaines étapes.

Étape 7: Intégration des boutons de fonctionnement

Ouvrez l'inspecteur d'attributs et modifiez la balise de tous les boutons divers. Le bouton clair doit avoir une étiquette de 11, le bouton de division doit avoir une étiquette de 12, le bouton de multiplication doit avoir une étiquette de 13, le bouton de soustraction doit avoir une étiquette de 14, le bouton d'addition doit avoir une étiquette de 15, et le bouton égal doit avoir une étiquette de 16. Ensuite, appuyez sur Ctrl, cliquez sur le bouton Effacer et faites-le glisser sur le contrôleur de vue. Une fenêtre contextuelle devrait apparaître à l'écran. Modifiez la connexion en « action », le type en « UIButton », l'événement en « Touch Up Inside », les arguments en « Sender » et son nom en « boutons ». Vous pouvez changer le nom comme vous le souhaitez, mais cela signifie que vous devrez à nouveau changer le nom lors de l'appel de la fonction plus tard dans le programme. Ensuite, contrôlez, cliquez et faites glisser chaque bouton divers dans la fonction que nous venons de créer.

Étape 8: Fonction des boutons divers

Après avoir connecté tous les boutons divers étiquetés à leur fonction appropriée, vous pouvez commencer à insérer le code dans la fonction « boutons »:

previousNumber = Double(label.text!)!

if sender.tag == 12 { // Diviser

label.text = "/";

}

if sender.tag == 13 { //Multiplier

label.text = "x";

}

if sender.tag == 14 { // Soustraire

label.text = "-";

}

if sender.tag == 15 { //Ajouter

label.text = "+";

}

opération = expéditeur.tag

performantMath = vrai;

}

else if sender.tag == 16 {

if opération == 12{ // Diviser

label.text = String (numéro précédent / nombre à l'écran)

}

else if operation == 13{ //Multiplier

label.text = String (numéro précédent * nombre à l'écran)

}

else if operation == 14{ //Soustraire

label.text = String(previousNumber - numberOnScreen)

}

else if operation == 15{ //Ajouter

label.text = String (numéro précédent + nombre à l'écran)

}

}

sinon si sender.tag == 11{

label.text = ""

nombre précédent = 0;

nombre à l'écran = 0;

opération = 0;

}

Essentiellement, ce morceau de code affiche l'un des boutons divers lorsqu'il est enfoncé et procède au calcul de la réponse finale et l'affiche sur l'étiquette.

Étape 9: Code complet

Si vous ne vouliez pas passer en revue et construire la calculatrice étape par étape avec moi, vous pouvez simplement ajouter les éléments à votre storyboard et copier et coller le code complet dans votre contrôleur de vue. Voici le code:

importer UIKit

classe ViewController: UIViewController {

var numberOnScreen: Double = 0;

var Numéro précédent: Double = 0;

var performantMath = false;

opération var = 0;

Numéros de fonction @IBAction (_ expéditeur: UIButton) {

si performantMath == vrai {

label.text = String(sender.tag-1)

numberOnScreen = Double(label.text !) !

performantMath = faux

}

autre {

étiquette.texte = étiquette.texte ! + Chaîne(sender.tag-1)

numberOnScreen = Double(label.text !) !

}

}

Étiquette de var faible @IBOutlet: UILabel !

@IBAction func boutons (_ expéditeur: UIButton) {

if label.text != "" && sender.tag != 11 && sender.tag != 16{

previousNumber = Double(label.text!)!

if sender.tag == 12 { // Diviser

label.text = "/";

}

if sender.tag == 13 { //Multiplier

label.text = "x";

}

if sender.tag == 14 { // Soustraire

label.text = "-";

}

if sender.tag == 15 { //Ajouter

label.text = "+";

}

opération = expéditeur.tag

performantMath = vrai;

}

else if sender.tag == 16 {

if opération == 12{ // Diviser

label.text = String (numéro précédent / nombre à l'écran)

}

else if operation == 13{ //Multiplier

label.text = String(previousNumber * numberOnScreen)

}

else if operation == 14{ // Soustraire

label.text = String(previousNumber - numberOnScreen)

}

else if operation == 15{ //Ajouter

label.text = String (numéro précédent + nombre à l'écran)

}

}

sinon si sender.tag == 11{

label.text = ""

nombre précédent = 0;

nombre à l'écran = 0;

opération = 0;

}

}

remplacer la fonction viewDidLoad() {

super.viewDidLoad()

// Effectuez toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un nib.

}

remplacer la fonction didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

// Élimine toutes les ressources pouvant être recréées.

}

}