Calculadora en App Inventor

Hola y bienvenidos un a Inventordeaplicaciones.es. En el artículo de hoy vamos a ver como crear una calculadora completa y funcional en App inventor 2. Crear una calculadora en App Inventor 2 puede ser una tarea sencilla, pero hacerla como la mayoría de las aplicaciones que viene por defecto en el sistema Android puede ser más complicado de lo normal. Vamos a ver como hacerlo con el mínimo de bloques posible.

Diseño de la aplicación de calculadora en App Inventor 2

Tengo que reconocer que este diseño me ha quedado bastante bonito. Y es que quería hacer ver que también con App Inventor se pueden hacer cosas muy interesantes en el diseño de aplicaciones. Me gustaría que descargarás el proyecto de la aplicación y explores e investigues como se ha construido. Lo que quizá se pueda destacar es el uso de una disposición tabular para colocar los botones, y como se han utilizado colores y tipos de letras para los mismos. También se han modificado parámetros de las propiedades Screen1 para hacerla un diseño más elegante visualmente

wXZgggMnhnBVtH7 tjmml1F9eNxt 9oXJ14cmM0oZ9ttKwYf2okp1zXU98KiHRcOjmz0NmZGb 1b2UWElMdnYPOPEbnA6DB8ivcF6FPMDnRH eTmb0LzaeOydf1KUbyaWctTWlZg - Calculadora en App Inventor
6WgyPi8x7t mlgsMookNuAVh3dcHMB73 nkVkeFVGDdBsSg Qtere8bRfivvZkvcOXg3K4tq XV1i5NwNHQmCSI1x00H oGi1MtIAtVBK48vKhPStBRxdbYWXl6t4Vz8ptlQAej7 - Calculadora en App Inventor

Programando la aplicación

Lo primero es crear tres variables globales que nos servirán para ir almacenando los valores de nuestras operaciones matemáticas. Necesitaremos una variable para el operando1 otra para el operando2  y por último una variable para el Operador. Todas ellas estarán inicializadas con un cuadro de texto vacío.

nY oiNNO2UOq8yl7TCOVU1bnj5h8 Rq2kuiJtWy8Wds6mbfemn1N LzR3Eif5DE3BquxPlYyRC3fS u98shXJKulvPzk E46RYjECW5H5J2n Agakpq i3vivlx5 yJfIzVIW7KH - Calculadora en App Inventor

Si estos términos no te suenan  o no sabes que quiero decir, no todo el mundo lo tiene que saber o conocer por estos términos, voy a explicarlo. Los operandos son datos que conecta y procesa el operador. El resultado es la respuesta que resulta cuando se completa la operación. Por ejemplo: la expresión 3 + 2, el + es el operador, el 3 y el 2 son los operandos, y el 5 es el resultado.

Una vez creadas nuestras tres variables tenemos que almacenar en ellas cada uno de los datos que le corresponden y mostrarlos en la pantalla del dispositivo. Para ello lo primero que necesitamos es saber que tecla se ha pulsado y qué valor nos devuelve. Podríamos hacerlo de la siguiente manera. Si pulso el botón 1 y este contiene el texto 1, entonces muestro en la etiqueta el 1. Pero si tenemos un gran número de botones en pantalla, sería una tarea tediosa hacerlo con cada uno de ellos, y como ya he explicado al comienzo de este artículo vamos a intentar hacerlo con el menor número de bloques posibles. 

App inventor no da la opción de usar una serie de bloques para cualquier componente donde no se hace referencia a ninguno en concreto, si no que el bloque te devuelve cual se ha pulsado. Vamos a utilizar los bloques cualquier botón, lo podemos encontrar en la pantalla bloques al final del árbol.

wB2XzvUBDwrq aJJKtq07153oaqsRoOB2xw p4KDAKxYjgtBwTpZkVLAdlAW4OhhVpR5dLGwls9t7HIbFbcci74hM8mVPYevurkjjLPNcRJiekSQ 2lWMMpoMBYlQPSA44agTlGJ - Calculadora en App Inventor

 Por consiguiente si sabes cual se ha pulsado puedes saber qué texto contienen y actuar en consecuencia. Vamos a usar el bloque When any Botón.clic, que nos devolverá el botón pulsado, y después meteremos en la etiqueta1 el texto que anteriormente teníamos en la etiqueta más el texto del botón devuelto.

NIYB6H6 6oHYRrsdgCL bWDd KBGoJKLyelypfKDx9QrPo7PnwsQY95nw4kIdAU9NwIUYi7KSpqpPD5wJXFtoR04gvPw e1YfpLvgIX4rrrsyD xkbEEy0 yGD90Cb59quByVT7t - Calculadora en App Inventor

¿Pero qué pasa si pulsamos algún botón de operador?. No queremos que el signo + aparezca entre medias de un número. Lo resolvemos de la siguiente manera, vamos comprobar que el texto del botón pulsado es un número o un punto.

e0qaGo6e5czpUpumgHDmT1 BBYIUuZahZxNdguI7KhOuiRqTryw1AZzIEpBEmJcWLjbqkUZsE2OcbJCZLC 9udpKH66W7Ev b9XwzLOfRejEAIbyzd1MpZHSL01FlMdvWIcn5RMe - Calculadora en App Inventor

Si el texto del botón es un número o contiene el texto de un punto entonces  meteremos en la etiqueta1 el texto que anteriormente teníamos en la etiqueta más el texto del botón devuelto.

Ahora necesitamos que al pulsar algún operador los números que tengamos en la etiqueta se guarden en la variable Operando1. Y que el operando pulsado se guarde en la variable Operador. Además borraremos el contenido de la etiqueta1, y a la etiqueta resultado le añadimos el operador pulsado. De esta manera ya tendremos parte de nuestra operación matemática un Operando y operador. Repetiremos esta operación con todos los signos de operaciones.

aYfBEN wpORJ urcJcS5 v8hZgpkIHEncWIxOFFbzGux3DOB8wUBeal0HUgtpj z84JJPMWwrqcFd1UOHZ74uqdFqceP176ymi  VwTgq24bev Y1p3C DIyZPmkg5r0iBLE136b - Calculadora en App Inventor

Vamos a necesitar resetear o borrar la operación en curso para ello disponemos de la tecla C. Esta tecla si es pulsada lo unico que ara es borrar los textos de la etiqueta1 y la etiqueta resultado.

IEosUpcTB1FmrtZ2a3QlKLib0a1o1qBuPfd7g8N0s4aF2wntpRnuMEfMLWfe hUxGVlfpE4edLDOYtjfmf1gLunxZmxACicnY5BnMSbJ04iGpYXVsSEpZdMzSwvQexDZn9KjOgVN - Calculadora en App Inventor

Antes de continuar vamos a añadir un bloque más y es que si te has fijado hemos hecho uso de la etiqueta resultado. Esta etiqueta la usamos para añadir los signos de operaciones pero cuando volvamos a escribir un nuevo número tendrá que ser borrada. Te muestro como hacerlo a continuación.

i7 k9D9Y74epWe34t0rGHAKnQaxlPNgAdicGkTPwkLnRx6iozjl7t5kgPzD4rHL1DKGcuSCXqT4NIJ6SM8QF0MUMefwuqfgHd67eklUPG37zxVfsCaWIhyi0wa5gZA4ZvC0vuI4S - Calculadora en App Inventor

Ahora al pulsar el botón de signo igual meteremos en nuestra variable operando2 el contenido de la etiqueta1. De esta manera, ya tenemos dos números y un Operando para realizar nuestra operación matemática. Comprobaremos que tipo de operando es, y en consecuencia realizaremos la operación matemática correspondiente, mostrando el resultado en la etiqueta1.

ZRoHbYwWmXHeWmbJd37bhWkfPErWI5Nn7zEhaCk4TvWqVd7zV2PaZr4QcZe4HmG6is vcy7rdQahDvOmwYHdAOY5Z  PQ9V3ZKZv6JKWoJMt8BvhdQZpya9hXsF 2Yot1dwxZDfq - Calculadora en App Inventor

Con esto ya tenemos una calculadora construida en app inventor, solo falta que pruebes esta con tu método favorito. Es cierto que es muy sencilla y que contiene ciertos errores, pero eso te dejo a ti lector el mejorar la aplicación y resolver los errores.

Descarga proyecto calculadora en formato AIA para App Inventor.

Sin más me despido. Si tienes alguna duda o proyecto que quieras realizar no dudes en dejarlo en los comentarios. Un saludo.

Si te ha gustado compartelo
facebook - Calculadora en App Inventor
Facebook
twitter - Calculadora en App Inventor
Twitter
linkedin - Calculadora en App Inventor
Linkedin
pinterest - Calculadora en App Inventor
Pinterest

1 comentario en “Calculadora en App Inventor”

  1. Lo que quiero hacer es que se parezca más a un calculadora real.
    Para eso lo que quiero modificar es que cuando aprieto por ejemplo el número 2 y le doy X el dos siga estando en la etiqueta, no desaparezca. Pero cuando aprieto el siguiente número si desaparezca

    Responder

Deja un comentario

error: Content is protected !!