Reporte - Calculadora
2023
ALUMNA: KAROL
ZELTZIN CRUZ
RAMÍREZ 1
ÍNDICE
Contenido
INTRODUCCIÓN .................................................................................................................... 1
DESARROLLO ......................................................................................................................... 2
EJECUCIÓN............................................................................................................................... 11
CONCLUSIÓN ........................................................................................................................ 12
2
INTRODUCCIÓN
En esta práctica se creó una aplicación para Android que simule el
funcionamiento de una calculadora, donde el usuario ingrese los
datos que quiera calcular mediante botones y no por campos de
texto, además de tener cinco botones para realizar las operaciones
de suma, resta, multiplicación, división y porcentaje además de poder
cambiar de signo y borrar dígitos (uno por uno) y limpiar todo el
resultado. Cabe resaltar que para el diseño de nuestra calculadora
se utilizará un nuevo método de distribución de nuestros elementos
en el cual son las guidelines.
Las pautas(guidelines) en el diseño de restricción son líneas
invisibles que no son visibles para los usuarios, pero ayudan a los
desarrolladores a diseñar el diseño fácilmente y restringir las vistas
a estas pautas, para que el diseño sea más claro e interactivo.
Hay dos tipos de directrices:
Pautas horizontales: estas pautas tienen una altura de cero y su
ancho es igual a su diseño de restricción principal.
Pautas verticales: estas pautas tienen un ancho de cero y su altura
es igual a su diseño de restricción principal.
Ahora podemos posicionar las guías de tres maneras diferentes:
1. Usando layout_constraintGuide_begin para especificar una
distancia fija desde la izquierda o la parte superior de un
diseño.
2. Usando layout_constraintGuide_end para especificar una
distancia fija desde la derecha o la parte inferior de un
diseño.
3. Usando layout_constraint_percent para especificar el
porcentaje del ancho o la altura de un diseño.
1
DESARROLLO
Comenzamos creando un nuevo proyecto llamado calculadora.
Nos dirigimos a la siguiente sección de la paleta y colocamos 7 guidelines horizontales y 5
guidelines verticales.
2
Luego nos dirigimos a la parte de código y en cada una de las líneas guía le colocamos el
siguiente código:
Para las líneas verticales:
Para las líneas horizontales:
3
Nuestras líneas deberán quedar de esta manera:
Colocamos un TextView en la primera fila que se formó y le damos click derecho a cualquiera
de los círculos que tiene, seleccionamos la opción de Clear Constraints of Selection.
Ahora al dar click
izquierdo sobre los círculos nos sale una flecha, estas flechas las unimos con las líneas que se
muestran en la imagen:
4
Colocamos un botón en la primera casilla de la segunda fila y hacemos lo mismo con todas las
casillas restantes (con el mismo procedimiento que el TextView), ya que hayamos puesto y
acomodado los botones, procedemos a declararlos como cadenas y aprovechando también le
colocamos un id, para ello le ponemos lo que queremos que diga en la siguiente opción que se
encuentra en atributos:
Ahora nos vamos a Code y damos click derecho sobre el atributo text
Seleccionamos la primera opción y volvemos a seleccionar la primera opción y le damos ok.
Hacemos lo mismo con los demás botones y le damos un diseño:
5
Ahora pasamos a la programación, primero declaramos todas las variables que vamos a
utilizar, es decir, ponemos el nombre de todos los botones y el resultado, el nombre de los
números lo ponemos en letra y no en número. También inicializamos tres variables las cuales
ocuparemos para las operaciones.
Ahora enlazamos nuestras variables con los id que le pusimos nuestros elementos.
6
Ahora para el botón cero llamamos al método setOnclickListener para que al momento de que
presionemos el botón cero haga lo que se encuentre dentro.
Y para el 1 y los demás números colocamos el siguiente código (también aplica para el punto,
solo se van cambiando los valores):
7
8
El siguiente código se ocupa para el cambio de signos y los botones para hacer las operaciones.
Lo siguiente seria para limpiar todo y borrar dígitos (uno por uno).
9
Y por último este sería el código del botón igual, donde ocuparemos las variables que creamos
al principio.
10
EJECUCIÓN
PANTALLA PRINCIPAL SUMA(10+4)
CAMBIO DE SIGNO
PORCENTAJE DE 10% DE -14
11
CONCLUSIÓN
Una vez mas hemos aprendido una nueva forma para distribuir de
manera fácil y eficiente los elementos que vayamos a ocupar en
nuestra aplicación y de esta manera hacer diseños mas interactivos
para el usuario. En este caso la manera en que utilizamos las líneas
guía fue mediante el uso de porcentajes.
12
