Cómo hacer una calculadora en Xcode usando Swift: 9 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:44

En este tutorial rápido, le mostraré cómo crear una calculadora simple usando Swift en Xcode. Esta aplicación está diseñada para verse casi idéntica a la aplicación de calculadora original para iOS. Puede seguir las instrucciones paso a paso y construir la calculadora conmigo, o simplemente puede ir al último paso y copiar y pegar el código en su controlador de vista. Sin embargo, si hace esto, asegúrese de conectar todos sus elementos en el guión gráfico con su controlador de vista.

Paso 1: creación del proyecto

El primer paso para hacer nuestra calculadora es crear el proyecto en Xcode. Puedes hacer esto haciendo clic en "Crear un nuevo proyecto de Xcode" y nombrarlo como quieras. Llamé a la mía "Calculadora". El siguiente paso es seleccionar "Aplicación de vista única" para el tipo de aplicación. Mantenga el resto de la información como valor predeterminado.

Paso 2: diseño del guión gráfico

El paso 2 de la creación de nuestra calculadora requiere que diseñe un diseño básico en el guión gráfico. Antes de comenzar con esto, le recomiendo cambiar su dispositivo simulador al iPhone 7 Plus. Comience arrastrando un botón al guión gráfico y cambiando sus dimensiones a 89 x 89. Cambie su color de fondo a mercurio en el inspector de atributos y su color de fuente a tungsteno. A continuación, ajuste la fuente a Helvetica Light 30. Continúe copiando y pegando el botón hasta que tenga un total de 20. Ajuste el diseño de estos botones para que tenga cinco filas y cuatro columnas.

Paso 3: Diseño y estética del guión gráfico

Elimine el segundo botón en la fila inferior y expanda el primer botón para ocupar este espacio. Cambie el valor del marcador de posición de este botón a cero. Continúe cambiando los valores numéricos y los símbolos de cada botón hasta que sea prácticamente idéntico al de la imagen que se muestra arriba. En el inspector de atributos, el color gris más oscuro es plateado, el color naranja es mandarina y el color de la fuente se cambia a nieve en los botones naranjas. A continuación, haga clic en el controlador de vista y cambie su color de fondo a negro. Agregue una etiqueta encima de los botones y ajuste su tamaño como se sienta cómodo. Alinee el texto a la derecha y cambie la fuente de la etiqueta a Helvetica light 70. Si lo desea, puede agregar restricciones a todos los elementos para que la aplicación tenga el mismo aspecto para todos los dispositivos.

Paso 4: Conexión e integración de elementos

Abra el inspector de atributos y cambie la etiqueta de cada botón numérico. La etiqueta debe ser 1 más que el valor numérico real. Por ejemplo, el botón # 0 debe tener un valor de etiqueta de 1, el botón # 1 debe tener un valor de etiqueta de 2, el botón # 2 debe tener un valor de etiqueta de 3, y así sucesivamente. A continuación, presione control, haga clic en el botón # 0 y arrástrelo al controlador de vista. Debería aparecer una ventana emergente en la pantalla. Cambie la conexión a 'acción', el tipo a 'UIButton', el evento a 'Retocar dentro', los argumentos a 'Remitente' y su nombre a 'números'. Puede cambiar el nombre por el que desee, pero eso significa que tendrá que cambiar el nombre nuevamente cuando llame a la función más adelante en el programa. A continuación, controle, haga clic y arrastre cada botón numérico a la función que acabamos de crear. Ahora, controle, haga clic y arrastre la etiqueta al programa, pero NO a la función. Esto significa que simplemente trae la etiqueta a la función como una variable separada. Recuerde, si alguna vez está confundido acerca del código, he dejado todo mi código para que lo use en el último paso de este Instructable.

Paso 5: establecer variables

Para que nuestros botones numéricos sean funcionales, tendremos que conectar su valor a la etiqueta en nuestra función 'números'. Puede hacer esto creando primero una variable 'numberOnScreen' y hacerla de tipo double e igual a 0: var numberOnScreen: Double = 0; Y no lo olvides, si el código aquí es un poco confuso, te dejé el código completo en el último paso para que lo uses a tu gusto. A continuación, establezca otra variable 'performMath' de tipo bool y conviértala en falsa: var performMath = false; Además, cree otra variable llamada 'previousNumber' de tipo double y configúrela igual a 0: var previousNumber: Double = 0; La última variable que tienes que crear es la variable 'operación'. Póngalo igual a 0: var operación = 0;

Paso 6: Función de los botones numéricos

Una vez que haya establecido las variables apropiadas, puede proceder a copiar y pegar este código en su función 'números':

if performMath == true {

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

numberOnScreen = ¡Doble (label.text!)!

performMath = falso

}

demás {

label.text = label.text! + Cadena (sender.tag-1)

numberOnScreen = ¡Doble (label.text!)!

}

Básicamente, esta pieza de código muestra ciertos números en la etiqueta cuando se presiona el botón correspondiente. Sin embargo, todavía necesitamos poder usar todos los demás botones y hacer que la calculadora sea funcional. Haremos esto en los próximos pasos.

Paso 7: Integración de botones de operación

Abra el inspector de atributos y cambie la etiqueta de todos los botones varios. El botón de borrar debe tener una etiqueta de 11, el botón de división debe tener una etiqueta de 12, el botón de multiplicación debe tener una etiqueta de 13, el botón de resta debe tener una etiqueta de 14, el botón de suma debe tener una etiqueta de 15, y el botón igual debe tener una etiqueta de 16. A continuación, presione control, haga clic en el botón borrar y arrástrelo al controlador de vista. Debería aparecer una ventana emergente en la pantalla. Cambie la conexión a 'acción', el tipo a 'UIButton', el evento a 'Retocar dentro', los argumentos a 'Remitente' y su nombre a 'botones'. Puede cambiar el nombre por el que desee, pero eso significa que tendrá que cambiar el nombre nuevamente cuando llame a la función más adelante en el programa. A continuación, controle, haga clic y arrastre cada botón misceláneo a la función que acabamos de crear.

Paso 8: Función de botones varios

Una vez que haya conectado todos los botones varios etiquetados a su función adecuada, puede comenzar a insertar el código en la función 'botones':

previousNumber = Double (label.text!)!

if sender.tag == 12 {// Dividir

label.text = "/";

}

if sender.tag == 13 {// Multiplica

label.text = "x";

}

if sender.tag == 14 {// Restar

label.text = "-";

}

if sender.tag == 15 {// Agregar

label.text = "+";

}

operación = sender.tag

performMath = verdadero;

}

else if sender.tag == 16 {

if operación == 12 {// Dividir

label.text = String (previousNumber / numberOnScreen)

}

else if operación == 13 {// Multiplica

label.text = String (previousNumber * numberOnScreen)

}

else if operación == 14 {// Restar

label.text = String (previousNumber - numberOnScreen)

}

else if operación == 15 {// Agregar

label.text = String (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

operación = 0;

}

Básicamente, esta pieza de código muestra uno de los botones varios cuando se presiona y procede a calcular la respuesta final y la muestra en la etiqueta.

Paso 9: Código completo

Si no quería pasar y construir la calculadora paso a paso conmigo, simplemente puede agregar los elementos a su guión gráfico y copiar y pegar el código completo en su controlador de vista. Aquí está el código:

importar UIKit

clase ViewController: UIViewController {

var numberOnScreen: Double = 0;

var previousNumber: Double = 0;

var performMath = falso;

var operación = 0;

Números de función de @IBAction (_ remitente: UIButton) {

if performMath == true {

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

numberOnScreen = ¡Doble (label.text!)!

performMath = falso

}

demás {

label.text = label.text! + Cadena (sender.tag-1)

numberOnScreen = ¡Doble (label.text!)!

}

}

@IBOutlet etiqueta de var débil: UILabel!

Botones de función @IBAction (_ sender: UIButton) {

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

previousNumber = Double (label.text!)!

if sender.tag == 12 {// Dividir

label.text = "/";

}

if sender.tag == 13 {// Multiplica

label.text = "x";

}

if sender.tag == 14 {// Restar

label.text = "-";

}

if sender.tag == 15 {// Agregar

label.text = "+";

}

operación = sender.tag

performMath = verdadero;

}

else if sender.tag == 16 {

if operación == 12 {// Dividir

label.text = String (previousNumber / numberOnScreen)

}

else if operación == 13 {// Multiplica

label.text = String (previousNumber * numberOnScreen)

}

else if operación == 14 {// Restar

label.text = String (previousNumber - numberOnScreen)

}

else if operación == 15 {// Agregar

label.text = String (previousNumber + numberOnScreen)

}

}

else if sender.tag == 11 {

label.text = ""

previousNumber = 0;

numberOnScreen = 0;

operación = 0;

}

}

anular func viewDidLoad () {

super.viewDidLoad ()

// Realice cualquier configuración adicional después de cargar la vista, generalmente desde una plumilla.

}

anular func didReceiveMemoryWarning () {

super.didReceiveMemoryWarning ()

// Elimina todos los recursos que se puedan volver a crear.

}

}