Comment créer une calculatrice dans Swift 5

En prévision du début du cours de base "développeur iOS", nous publions un article rédigé par notre auteur indépendant.







salut! Plus d'un an s'est écoulé depuis la sortie de Swift 5, qui a apporté beaucoup de nouveautés aux développeurs. Dans cet article, je veux parler du développement mobile pour IOS, de son fonctionnement, de ce qui est nécessaire pour cela, et bien plus encore. L'article est destiné aux personnes qui commencent tout juste leur programmation dans Swift 5 .



Système d'exploitation et configuration matérielle requise



D'une manière ou d'une autre, pour créer une application pour IOS de n'importe quelle version, vous avez besoin d'un ordinateur exécutant le système d'exploitation Mac OS (et de préférence la dernière version, sinon une partie des outils du développeur et Xcode peuvent commencer à fonctionner de manière complètement imprévisible). Le besoin d'un système exécutant Mac OS est la cause de controverses et de haine de la part d'autres développeurs qui ne sont pas habitués à être limités dans leurs capacités à cause du système d'exploitation. Le plus souvent, il existe plusieurs façons: acheter ou assembler un Hackintosh (cependant, dans le cas de l'auto-assemblage, je tiens à vous avertir qu'il ne sera pas facile d'assembler un tel ordinateur sans un problème de pilote constant). J'ai vu à la fois installer une image du système d'exploitation dans une machine virtuelle et faire rouler Mac OS sur un ordinateur portable ordinaire, sans aucun problème de pilote.Cependant, ce chemin exigera certaines compétences matérielles de votre part et risque de manquer de prise en charge à 100% pour les futures versions de Mac OS.



Une autre façon, bien sûr, est d'acheter un ordinateur originaire d'Apple. Si vous vouliez un ordinateur portable, vous savez probablement quoi faire (mais je veux vous avertir tout de suite que Xcode prend immédiatement environ 25 gigaoctets, et qu'il peut facilement occuper les 44 gigaoctets si vous téléchargez des simulateurs supplémentaires sur les appareils. la taille de 128 gigaoctets ne devrait être que pour le développement IOS sans aucun élément supplémentaire comme node_modules, Pycharm et Unity cache, homebrew et autres choses pour les développeurs, ce qui prend une tonne d'espace disque. Si vous voulez faire autre chose, vous aurez besoin d'un disque au moins à partir de 256 gigaoctets ou plus).



Options d'environnement de développement



En plus de la manière plus ou moins classique de développer des applications dans Xcode en utilisant Swift et en utilisant les bibliothèques Cocoa et CocoaTouch, il existe maintenant de nombreuses autres façons de développer presque sans utiliser Xcode (seulement sans Xcode, vous ne pouvez plus créer d'application). Il existe plusieurs technologies:



  • Xamarin . Les applications sur cette plate-forme sont écrites en C #. Avec Xamarin, vous pouvez créer n'importe quelle application native Android ou IOS. Le développement peut être effectué à l'aide de Visual Studio. Malgré ces avantages, très probablement. certains fragments d'application devront être écrits séparément pour chaque plateforme
  • React Native. React , -. . , - , - . , .
  • Flutter. , Flutter Dart Google. , , . , Flutter — React Native, . Dart, -
  • PhoneGap/Cordova. Nitobi, Adobe. , PhoneGap, Apache Cordova, WebView,
  • Unity. IOS, . , . gamedev.




Apple recommande d'utiliser le langage de programmation Swift pour développer des applications. Swift est un langage de programmation relativement nouveau qui n'a été officiellement publié qu'en 2014. Il peut être utilisé pour le développement pour Mac OS, IOS, et il existe également un support pour Linux (donc si vous avez, disons, Linux pas très spécifique, vous pouvez télécharger et essayer le langage en toute sécurité, par exemple, à partir de ce lien).



Swift lui-même est un langage typique de nouvelle génération, tel que Golang.

Initialement, le langage a été conçu comme un langage plus facile à lire et résistant aux erreurs pour le programmeur qu'Objective C.Dans le même temps, Swift peut travailler dans le même projet avec C et Objective C.



Au lieu d'essayer de donner une description de ce langage (qui à première vue est C ++, juste modifié aux réalités modernes avec une fonction de saisie automatique à la mode), je suggère au lecteur d'étudier la très belle documentation d'Apple, qui décrit en détail le fonctionnement du langage et quelle est sa syntaxe. La version anglaise peut être trouvée ici , la traduction russe peut être trouvée ici . Une fois que vous vous êtes familiarisé avec les bases du langage Swift, nous pouvons passer à ce que nous sommes ici pour aujourd'hui: créer notre calculatrice simple à l'aide de Xcode.



Créer une calculatrice



Pour créer une application, nous avons besoin de Xcode, qui peut être téléchargé gratuitement depuis l'AppStore. Ne soyez pas intimidé par sa note - même si les cinq premières critiques donnent 1 étoile, cela ne signifie pas que vous serez choqué. Peut-être que la syntaxe et les astuces ne sont vraiment pas incluses trop rapidement lors de l'édition - mais en général, Xcode m'a laissé des impressions plusieurs fois plus favorables que le même Android Studio (même si peut-être que je ne sais pas comment le cuisiner). Si vous avez soudainement envie d'essayer le développement en dehors de Xcode et que vous préférez les produits JetBrains, vous pouvez essayer AppCode - il prend en charge l'interopérabilité avec Xcode, fonctionne avec Swift et Objective C, et de nombreuses autres fonctionnalités intéressantes. Personnellement, je ne l'ai pas essayé, mais si vous avez un abonnement à tous les logiciels de JetBrains, pourquoi ne pas le télécharger et l'exécuter.



Vous avez donc installé Xcode. Vous pouvez maintenant commencer à développer. Démarrez un nouveau projet et sélectionnez Application à page unique:







après cela, vous serez invité à entrer des données sur votre application. Si c'est la première fois que vous lancez Xcode, vous devrez y entrer l'identifiant Apple. Après cela, vous devez renseigner les informations sur le nom de votre projet (dans notre cas, juste Calculator) et le nom de votre entreprise et application. Vous pouvez écrire ce que vous voulez ici si vous n'avez pas l'intention de publier cette application à l'avenir. J'ai choisi Swift comme langue et Storyboard comme interface utilisateur. J'ai jeté les tests jusqu'à présent parce que je suis super , car il n'y a vraiment rien à tester ici.







Après avoir créé notre application, vous pouvez accéder au fichier dansCalculator.xcodeprojet ajustez tous les paramètres si vous le souhaitez. Pour l'instant, j'ai tout laissé tel quel, en développant pour la dernière version d'IOS 13.6 pour Iphone et Ipad. En principe, vous pouvez exclure l'iPad pour le moment - notre interface ne sera probablement pas très bonne dessus. Cependant, je tiens à vous avertir que si vous publiez soudainement, les employés d'Apple testent des applications pour l'iPhone à des fins de vérification, afin qu'elles soient au moins fonctionnelles sur l'Ipad. Mais avant cela, vous devez toujours dépenser 99 $ en clés de développeur).



Après avoir créé l'application, vous pouvez immédiatement appeler l'émulateur afin de suivre ce qui se passe. Pour ce faire, vous pouvez simplement appuyer sur la combinaison de touches CMD + R. En haut à gauche, vous pouvez sélectionner les appareils sur lesquels vous exécutez l'émulateur, et vous pouvez également connecter votre véritable appareil physique via un câble et tester immédiatement dessus).



Il existe de nombreuses façons de créer une interface et des widgets, j'utiliserai une option neutre - créer un support principal, le placer sur tout l'écran, puis commencer par programme à positionner mes widgets. Par conséquent, nous allons d'abord dans le fichier Main.storyboardet rendons la vue principale noire, afin de placer plus facilement nos éléments:







Après cela, nous ajouterons une vue, avec laquelle nous travaillerons principalement. Pour ce faire, cliquez sur le signe plus en haut à droite, à travers lequel vous pouvez ajouter des widgets, et ajouter un nouveau widget, tapez uiview dans la recherche :







Après cela, nous faisons glisser ce widget sur l'écran principal, et nous devons l'étendre en plein écran. Pour cela, nous devons travailler avec constaint. Pour ce faire, cliquez sur l'icône en bas à gauche, qui ressemble un peu au vaisseau de Dark Vador, et attribuez 0 de chaque côté:







après cela, votre nouveau widget s'agrandira pour s'adapter à tout l'écran. Ensuite, comme la dernière fois, nous devons changer la couleur de notre widget, seulement maintenant en Clear Color afin qu'il ne nous gêne pas et que nous puissions y placer des widgets.



Vous pouvez maintenant accéder au fichierViewController.swift, dans lequel nous aurons tout le reste de la programmation. Tout d'abord, nous devons utiliser un marqueur spécial @IBOutletpour pouvoir lier le Storyboard à notre code. Pour ce faire, il faut écrire la ligne suivante:



@IBOutlet var holder: UIView!


Nous pouvons maintenant lier le code au widget. Pour ce faire, en fait, vous devez connecter notre support avec le support. Pour ce faire, viewControllerfaites un clic droit sur et faites glisser le support sur notre écran:







Enfin, nous avons fini de lier le code au Storyboard et nous pouvons commencer la programmation.



Ensuite, nous ajouterons deux variables, dont la première sera juste un nombre dans lequel la première valeur peut être écrite, et la seconde sera la valeur résultante. La troisième variable sera un peu plus précise, car nous utiliserons une déclaration optionnelle (vous pouvez lire de quel type d'animal il s'agit, vous pouvez en savoir plus ici). Facultatif peut contenir n'importe quelle valeur ou nil. Les options garantissent également que les valeurs nulles sont traitées explicitement. De plus, nous ajouterons dès le début une liste des opérations mathématiques prises en charge par la calculatrice:



    var firstNumber = 0
    var resultNumber = 0
    var currentOperations: Operation?
        enum Operation {
        case add, subtract, multiply, divide
    }


Ensuite, nous devons créer une étiquette, dans laquelle nous montrerons les nombres et le résultat des calculs. Par défaut, il y aura 0 et une police assez grande. Tout le reste, je pense, est parfaitement clair:



    private var resultLabel: UILabel = {
        let label = UILabel()
        label.text = "0"
        label.textColor = .white
        label.textAlignment = .right
        label.font = UIFont(name: "Helvetica", size: 100)
        return label
    }()



Après cela, en ignorant la méthode intégrée qui nous appelle le rendu (dont je parle viewDidLoad), nous devons appeler une méthode qui appellera une fonction qui dessinera tous les boutons sur lesquels les fonctions du gestionnaire se bloqueront.



    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        setupNumberPad() //,      
    }


Après cela, nous avons la fonction setupNumberPad. Tout d'abord, je vais définir une constante pour la taille de notre police, de sorte que plus tard, le cas échéant, vous puissiez immédiatement augmenter / diminuer la taille de la police dans l'application, car je travaille sans mise en page. Après cela, je vais créer une taille de bouton - sa largeur sera égale à un quart de la taille de l'écran de notre application.



    private func setupNumberPad() {
        let FontSize:CGFloat = 25 
        //      
        let buttonSize: CGFloat = view.frame.size.width / 4 
        //    1/4
        let zeroButton = UIButton(frame: CGRect(x: 0, y: holder.frame.size.height-buttonSize, width: buttonSize*3, height: buttonSize))
        //  UIButton     
        zeroButton.setTitleColor(.black, for: .normal) 
        //    
        zeroButton.backgroundColor = .white
        //   
        zeroButton.setTitle("0", for: .normal) 
        //    0
        zeroButton.titleLabel?.font = UIFont(name: "Helvetica", size: FontSize)
        // , family    
        zeroButton.tag = 1 
        //         
        holder.addSubview(zeroButton)  //    holder 
        zeroButton.addTarget(self, action: #selector(zeroTapped), for: .touchUpInside) 
        //       
 


0 occupe un tiers de l'écran afin que nous puissions aller dans la colonne de droite pour les opérandes mathématiques. Ensuite, nous devons rendre tous les boutons d'une manière ou d'une autre. Bien sûr, il serait possible de les dessiner un par un, mais alors cela s'avérera long et morne. Parce que nous aurons juste une série de nombres de 1 à 9, alors la décision d'utiliser des cycles est tout à fait à la surface. Je vais donner le premier cycle avec des commentaires, et depuis les deux autres sont essentiellement une répétition, je vais leur donner juste sous la coupe:



        for x in 0..<3 {
            let button_row_1 = UIButton(frame: CGRect(x: buttonSize * CGFloat(x), y: holder.frame.size.height-(buttonSize*2), width: buttonSize, height: buttonSize))
            //   x     x
            button_row_1.setTitleColor(.black, for: .normal) //
            button_row_1.backgroundColor = .white // 
            button_row_1.setTitle("\(x+1)", for: .normal) //  
            holder.addSubview(button_row_1) //    
            button_row_1.tag = x+2 // .. 1  ,   2
            button_row_1.addTarget(self, action: #selector(numberPressed(_:)), for: .touchUpInside)
            // 
        }


Le reste du code de nos numéros




       for x in 0..<3 {
            let button_row_2 = UIButton(frame: CGRect(x: buttonSize * CGFloat(x), y: holder.frame.size.height-(buttonSize*3), width: buttonSize, height: buttonSize))
            button_row_2.setTitleColor(.black, for: .normal)
            button_row_2.backgroundColor = .white
            button_row_2.setTitle("\(x+4)", for: .normal)
            button_row_2.addSubview(button_row_2)
            button_row_2.tag = x+5
            button_row_2.addTarget(self, action: #selector(numberPressed(_:)), for: .touchUpInside)
        }
        
        for x in 0..<3 {
            let button_row_3 = UIButton(frame: CGRect(x: buttonSize * CGFloat(x), y: holder.frame.size.height-(buttonSize*4), width: buttonSize, height: buttonSize))
            button_row_3.setTitleColor(.black, for: .normal)
            button_row_3.backgroundColor = .white
            button_row_3.setTitle("\(x+7)", for: .normal)
            holder.addSubview(button_row_3)
            button_row_3.tag = x+8
            button_row_3.addTarget(self, action: #selector(numberPressed(_:)), for: .touchUpInside)
        }
    




Après cela, nous devons placer notre bouton CE, sur lequel nous réinitialiserons les données entrées. Nous le placerons en haut, et nous décrirons sa charge fonctionnelle un peu plus tard. Pour l'instant, il suffit de le positionner et de connecter les gestionnaires:



        let clearButton = UIButton(frame: CGRect(x: 0, y: holder.frame.size.height-(buttonSize*5), width: view.frame.size.width - buttonSize, height: buttonSize))
        clearButton.setTitleColor(.black, for: .normal)
        clearButton.backgroundColor = .init(red: 0, green: 2, blue: 0.8, alpha: 1) //       rgb
         clearButton.titleLabel?.font = UIFont(name: "Helvetica", size: FontSize-4) //     
        clearButton.setTitle("CE", for: .normal)
        holder.addSubview(clearButton) //     holder
        clearButton.addTarget(self, action: #selector(clearResult), for: .touchUpInside) //  


Nous en avons terminé avec cette partie répétitive ennuyeuse, maintenant nous sommes prêts pour une autre chose - nos opérandes avec lesquels nous pouvons effectuer des opérations mathématiques. Pour commencer, nous mettons les opérandes nécessaires à l'intérieur du tableau, d'où nous les prendrons. Nous placerons les boutons d'opérande eux-mêmes dans une colonne et ajouterons une fonction de gestionnaire qui répondra à l'appui sur nos opérandes. Je vais faire les boutons dans une agréable couleur de surprise enfantine, jaune, et la taille est un peu plus grande que nos chiffres.



        let operations = ["=","+", "-", "x", "÷"] //  

        for x in 0..<5 {
            let button_operand = UIButton(frame: CGRect(x: buttonSize * 3, y: holder.frame.size.height-(buttonSize * CGFloat(x+1)), width: buttonSize, height: buttonSize))
            button_operand.setTitleColor(.black, for: .normal)
            button_operand.backgroundColor = .init(red: 2, green: 0.8, blue: 0, alpha: 1) // 
            button_operand.setTitle(operations[x], for: .normal)
            holder.addSubview(button_operand)
            button_operand.tag = x+1 
            // ,       
            button_operand.titleLabel?.font = UIFont(name: "Helvetica", size: FontSize)
            button_operand.addTarget(self, action: #selector(operationPressed(_:)), for: .touchUpInside)
        }


Après ces opérations globales, il suffit de positionner le Label, dans lequel nous allons écrire le résultat, et fermer la fonction:



    resultLabel.frame = CGRect(x: 20, y: clearButton.frame.origin.y - 110.0, width: view.frame.size.width - 40, height: 100)
    holder.addSubview(resultLabel)
} //    


Vous pouvez maintenant passer aux gestionnaires:



Travailler avec des gestionnaires



Tout cela n'était essentiellement qu'une mise en page, maintenant nous devons insuffler de la logique dans l'application. Pour ce faire, nous utiliserons des méthodes du runtime Objective C pour simplifier notre code. Si vous ne comprenez pas ce qui se passe, je peux vous recommander cet article à lire.



Alors, voici nos fonctions:



    @objc func clearResult() {
        resultLabel.text = "0" //    0
        currentOperations = nil //    
        firstNumber = 0 //      0
    }
    
    @objc func zeroTapped() {
        //    
        if resultLabel.text != "0" {
            if let text = resultLabel.text {
                resultLabel.text = "\(text)\(0)" //  
            }
        }
    }


Ensuite, nous devons ajouter une fonction de gestionnaire à nos boutons:



    @objc func numberPressed(_ sender: UIButton) {
        let tag = sender.tag - 1
        
        if resultLabel.text == "0" {
            resultLabel.text = "\(tag)"
        }
        else if let text = resultLabel.text {
        //   
            resultLabel.text = "\(text)\(tag)"
        }
    }



Vient ensuite la logique métier la plus importante de notre application. Nous utiliserons la construction switch pour contrôler nos opérations mathématiques:



 @objc func operationPressed(_ sender: UIButton) {
        let tag = sender.tag
        
        if let text = resultLabel.text, let value = Int(text), firstNumber == 0 {
            //   
            firstNumber = value
            resultLabel.text = "0"
        }
        
        if tag == 1 {
            if let operation = currentOperations {
                var secondNumber = 0
                if let text = resultLabel.text, let value = Int(text) {
                    secondNumber = value
                }
                
                switch operation {
                case .add:
                    
                    firstNumber = firstNumber + secondNumber
                    secondNumber = 0 //  
                    resultLabel.text = "\(firstNumber)" 
                    currentOperations = nil
                    firstNumber = 0 //     Label 
                    
                    break
                    
                case .subtract:
                    firstNumber = firstNumber - secondNumber
                    secondNumber = 0
                    resultLabel.text = "\(firstNumber)"
                    currentOperations = nil
                    firstNumber = 0
                    
                    break
                    
                case .multiply:
                    firstNumber = firstNumber * secondNumber
                    secondNumber = 0
                    resultLabel.text = "\(firstNumber)"
                    currentOperations = nil
                    firstNumber = 0
                    
                    break
                    
                case .divide:
                    firstNumber = firstNumber / secondNumber
                    secondNumber = 0
                    resultLabel.text = "\(firstNumber)"
                    currentOperations = nil
                    firstNumber = 0
                    break
                }
            }
        }
        else if tag == 2 {
            currentOperations = .add 
            //     .    ,    
        }
        else if tag == 3 {
            currentOperations = .subtract
        }
        else if tag == 4 {
            currentOperations = .multiply
        }
        else if tag == 5 {
            currentOperations = .divide
        }
    }
}



C'est tout! Le code source de cette application se trouve sur ce lien. En conséquence, l'apparence s'est avérée comme ceci:







Par tradition, je vais donner plusieurs ressources utiles qui peuvent être utiles à un développeur IOS débutant:








Un démarrage rapide pour le développement iOS. Webinaire gratuit







All Articles