Cómo crear una calculadora en Swift 5

Anticipándonos al inicio del curso básico "Desarrollador iOS", publicamos un artículo escrito por nuestro autor independiente.







¡Hola! Ha pasado más de un año desde el lanzamiento de Swift 5, que trajo muchas cosas nuevas a los desarrolladores. En este artículo quiero hablar sobre el desarrollo móvil para IOS, cómo funciona, qué se necesita para esto y mucho más. El artículo está dirigido a personas que recién comienzan a programar en Swift 5 .



Requisitos de hardware y sistema operativo



De una forma u otra, para crear una aplicación para IOS de cualquier versión, necesita una computadora con Mac OS (y preferiblemente la última versión, de lo contrario, alguna parte de las herramientas de desarrollo y Xcode pueden comenzar a funcionar de manera completamente impredecible). La necesidad de un sistema que ejecute Mac OS es motivo de controversia y odio por parte de otros desarrolladores que no están acostumbrados a tener capacidades limitadas debido al sistema operativo. La mayoría de las veces, hay varias formas: comprar o ensamblar un Hackintosh (sin embargo, en el caso del autoensamblaje, quiero advertirle que no será fácil ensamblar una computadora de este tipo sin un problema constante de controladores). He visto tanto la instalación de una imagen del sistema operativo en una máquina virtual como la instalación de Mac OS en una computadora portátil normal, sin problemas de controladores.Sin embargo, esta ruta requerirá algunas habilidades de hardware y amenaza con carecer de soporte al 100% para futuras versiones de Mac OS.



Una forma alternativa, por supuesto, es comprar una computadora originalmente de Apple. Si desea una computadora portátil, probablemente sepa qué hacer (pero quiero advertirle de inmediato que Xcode ocupa inmediatamente unos 25 gigabytes y puede ocupar fácilmente los 44 gigabytes si descarga simuladores adicionales en los dispositivos). el tamaño de 128 gigabytes debería ser solo para el desarrollo de IOS sin piezas adicionales como node_modules, caché de Pycharm y Unity, homebrew y otras cosas para desarrolladores, lo que ocupa una tonelada de espacio en disco. Si va a hacer otra cosa, necesitará un disco al menos desde 256 gigabytes o más).



Opciones de entorno de desarrollo



Además de la forma más o menos clásica de desarrollar aplicaciones en Xcode usando Swift y usando las bibliotecas Cocoa y CocoaTouch, ahora hay muchas otras formas de desarrollar casi sin usar Xcode (solo sin Xcode ya no se puede construir una aplicación). Existen varias tecnologías:



  • Xamarin . Las aplicaciones en esta plataforma están escritas usando C #. Con Xamarin, puede crear cualquier aplicación nativa de Android o aplicación IOS. El desarrollo se puede realizar con Visual Studio. A pesar de tales ventajas, lo más probable. algunos fragmentos de la aplicación deberán escribirse por separado para cada plataforma
  • React Native. React , -. . , - , - . , .
  • Flutter. , Flutter Dart Google. , , . , Flutter — React Native, . Dart, -
  • PhoneGap/Cordova. Nitobi, Adobe. , PhoneGap, Apache Cordova, WebView,
  • Unity. IOS, . , . gamedev.




Apple recomienda utilizar el lenguaje de programación Swift para desarrollar aplicaciones. Swift es un lenguaje de programación relativamente nuevo que no se lanzó oficialmente hasta 2014. Se puede usar para el desarrollo de Mac OS, IOS y también es compatible con Linux (por lo que si tiene, digamos, un Linux no muy específico, puede descargar y probar el idioma de manera segura, por ejemplo, desde este enlace).



Swift en sí es un lenguaje típico de nueva generación, como Golang.

Inicialmente, el lenguaje fue concebido como un lenguaje más fácil de leer y resistente a errores para el programador que el Objetivo C. Al mismo tiempo, Swift puede trabajar en el mismo proyecto tanto con C como con el Objetivo C.



En lugar de intentar dar una descripción de este lenguaje (que a primera vista es C ++, simplemente modificado a las realidades modernas con una función de escritura automática de moda), sugiero al lector que estudie la muy buena documentación de Apple, que describe en detalle cómo funciona el lenguaje. y cuál es su sintaxis. La versión en inglés se puede encontrar aquí , la traducción al ruso se puede encontrar aquí . Una vez que se familiarice con los conceptos básicos del lenguaje Swift, podemos pasar a lo que estamos aquí para hoy: crear nuestra calculadora simple usando Xcode.



Creando una calculadora



Para crear una aplicación, necesitamos Xcode, que se puede descargar de forma gratuita desde la AppStore. No se deje intimidar por su calificación, aunque las primeras cinco reseñas dan 1 estrella, esto no significa que se sorprenderá. Quizás la sintaxis y las sugerencias realmente no se incluyen demasiado rápido al editar, pero en general, Xcode me dejó impresiones muchas veces más favorables que el mismo Android Studio (aunque quizás no sé cómo cocinarlo). Si de repente tiene el deseo de probar el desarrollo fuera de Xcode y prefiere los productos JetBrains, puede probar AppCode: admite la interoperabilidad con Xcode, funciona con Swift y Objective C, y muchas otras características interesantes. Personalmente no lo he probado, pero si tiene una suscripción a todo el software de JetBrains, ¿por qué no descargarlo y ejecutarlo?



Entonces ha instalado Xcode. Ahora puedes empezar a desarrollar. Inicie un nuevo proyecto y seleccione Aplicación de página única:







Después de eso, se le pedirá que ingrese datos sobre su aplicación. Si es la primera vez que inicia Xcode, deberá ingresar el ID de Apple allí. Después de eso, debe completar la información sobre el nombre de su proyecto (en nuestro caso, solo Calculadora) y el nombre de su empresa y aplicación. Puede escribir lo que quiera aquí si no tiene la intención de publicar esta aplicación en el futuro. Elegí Swift como idioma y Storyboard como interfaz de usuario. He descartado las pruebas hasta ahora porque soy genial , porque realmente no hay nada que probar aquí.







Una vez que hayamos creado nuestra aplicación, puede ir al archivo enCalculator.xcodeprojy modifique cualquier configuración si lo considera oportuno. Por ahora, lo dejé todo como está, desarrollando para la última versión de IOS 13.6 para Iphone e Ipad. En principio, puede excluir el iPad por ahora; lo más probable es que nuestra interfaz no se vea muy bien en él. Sin embargo, quiero advertirle que si publica de repente, los empleados de Apple están probando aplicaciones para el Iphone para su verificación, de modo que al menos sean funcionales en el Ipad. Pero antes de eso, todavía tiene que gastar $ 99 en claves de desarrollador).



Una vez que haya creado la aplicación, puede llamar inmediatamente al emulador para realizar un seguimiento de lo que sucede. Para hacer esto, simplemente puede presionar la combinación de teclas CMD + R. En la parte superior izquierda, puede seleccionar los dispositivos en los que ejecuta el emulador, y también puede conectar su dispositivo físico real a través de un cable y probarlo inmediatamente).



Hay muchas formas de crear una interfaz y widgets en ella, usaré una opción neutral: crear un soporte principal, colocarlo en toda la pantalla y luego comenzar a colocar mis widgets mediante programación. Por lo tanto, primero vamos al archivo Main.storyboardy hacemos que la Vista principal sea negra, para poder ubicar más convenientemente nuestros elementos:







Después de eso, agregaremos una Vista, con la que trabajaremos principalmente. Para hacer esto, haga clic en el signo más en la parte superior derecha, a través del cual puede agregar widgets, y agregar un nuevo widget, escriba uiview en la búsqueda :







después de eso, arrastramos este widget a la pantalla principal, y necesitamos expandirlo a pantalla completa. Para esto tenemos que trabajar con constaint. Para hacer esto, haga clic en el ícono en la parte inferior izquierda, que se parece un poco a la nave de Darth Vader, y asigne 0 en cada lado:







después de eso, su nuevo widget se expandirá para adaptarse a toda la pantalla. A continuación, como la última vez, necesitamos cambiar el color de nuestro widget, solo que ahora a Clear Color, para que no interfiera con nosotros y podamos colocar widgets en él.



Ahora puedes ir al archivoViewController.swift, en el que tendremos todo el resto de la programación. Primero, necesitamos usar un marcador especial @IBOutletpara poder vincular el Storyboard a nuestro código. Para ello, debemos escribir la siguiente línea:



@IBOutlet var holder: UIView!


Ahora podemos vincular el código al widget. Para hacer esto, de hecho, debe conectar nuestro soporte con el soporte. Para hacer esto, haga clic derecho viewControllery arrastre el titular a nuestra pantalla:







Finalmente, hemos terminado de vincular el código al Storyboard y podemos comenzar a programar.



A continuación, agregaremos dos variables, la primera de las cuales será solo un número en el que se puede escribir el primer valor y la segunda será el valor resultante. La tercera variable será un poco más específica, porque usaremos una declaración opcional (puedes leer qué tipo de animal es, puedes leer más aquí). Opcional puede contener cualquier valor o nulo. Los opcionales también garantizan que los valores nulos se procesen explícitamente. Además, agregaremos desde el principio una lista de las operaciones matemáticas que admite la calculadora:



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


A continuación, tenemos que crear una Etiqueta, en la que mostraremos los números y el resultado de los cálculos. De forma predeterminada, habrá 0 y una fuente bastante grande. Todo lo demás, creo, está perfectamente claro:



    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
    }()



Después de eso, omitiendo el método incorporado que nos llama a renderizar (del que estoy hablando viewDidLoad), necesitamos llamar a un método que llamará a una función que dibujará todos los botones en los que se colgarán las funciones del controlador.



    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        setupNumberPad() //,      
    }


Después de eso, tenemos la función setupNumberPad. Primero, estableceré una constante para el tamaño de nuestra fuente, para que luego, en todo caso, pueda aumentar / disminuir inmediatamente el tamaño de la fuente en la aplicación, porque trabajo sin un diseño. Después de eso, crearé un tamaño de botón: su ancho será igual a un cuarto del tamaño de la pantalla de nuestra aplicación.



    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 ocupa un tercio de la pantalla para que podamos ir a la columna de la derecha para los operandos matemáticos. A continuación, necesitamos renderizar todos los botones de alguna manera. Por supuesto, sería posible dibujarlos uno por uno, pero luego resultará largo y triste. Porque solo tendremos una serie de números del 1 al 9, entonces la decisión de usar ciclos es bastante superficial. Daré el primer ciclo con comentarios. los otros dos son esencialmente una repetición, solo los daré debajo del corte:



        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)
            // 
        }


El resto del código de nuestros números




       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)
        }
    




Después de eso, debemos colocar nuestro botón CE, en el que restableceremos los datos que se ingresaron. Lo colocaremos en la parte superior, y describiremos un poco más adelante su carga funcional. Por ahora, solo necesitamos posicionarlo y conectar los manejadores:



        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) //  


Hemos terminado con esta aburrida parte repetitiva, ahora estamos listos para otra cosa: nuestros operandos con los que podemos realizar operaciones matemáticas. Para empezar, colocamos los operandos necesarios dentro del arreglo, de donde los tomaremos. Colocaremos los botones de operandos en una columna y agregaremos una función de manejador que responderá al presionar nuestros operandos. Haré los botones en un agradable color de sorpresa infantil, amarillo, y el tamaño es un poco más grande que nuestros números.



        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)
        }


Luego de estas operaciones globales, solo necesitamos posicionar la Etiqueta, en la que escribiremos el resultado, y cerrar la función:



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


Ahora puede pasar a los controladores:



Trabajando con manipuladores



Todo esto era esencialmente solo un diseño, ahora tenemos que insuflar lógica a la aplicación. Para hacer esto, usaremos métodos del tiempo de ejecución de Objective C para simplificar nuestro código. Si no comprende lo que está sucediendo, puedo recomendarle este artículo para que lo lea.



Entonces, aquí están nuestras funciones:



    @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)" //  
            }
        }
    }


A continuación, necesitamos agregar una función de controlador a nuestros botones:



    @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)"
        }
    }



El siguiente paso es la lógica empresarial más importante de nuestra aplicación. Usaremos la construcción del interruptor para controlar nuestras operaciones matemáticas:



 @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
        }
    }
}



¡Eso es todo! El código fuente de esta aplicación se puede encontrar en este enlace. Como resultado, la apariencia resultó así:







Por tradición, daré varios recursos útiles que pueden ser útiles para un desarrollador de iOS principiante:








Un comienzo rápido para el desarrollo de iOS. Seminario web gratuito







All Articles