RadioButton CheckBox

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 31

DESARROLLO DE SOFTWARE IV

PRCTICA # 3

Ing. Clay Fernando Alds Flores Mg.

11/12/2016

Ejercicio # 1
En este ejercicio se va a disear la interfaz de la aplicacin.

1. Ejecute el IDE de Android Studio.


2. Cree un nuevo proyecto, en el campo Applicaton name digite el nombre App_003, en la campo
Company Domain ingrese fisei o el que usted desee, y seleccione la carpeta para guardar el proyecto.
Presione el boton Next. Seleccione la API 15 o una superior para el proyecto como Minimum SDK, y
presione en el botn Next.

Android

Pgina 1

Ing. Clay Fernando Alds Flores Mg.

Presione el botn Next. En la siguiente ventana seleccione Empty Activity y presione Next para agregar un
nuevo activity.

Android

Pgina 2

Ing. Clay Fernando Alds Flores Mg.

2.

En la ventana que se muestra a continuacion establezca el nombre de la actividad (Activity Name), el


nombre del layout (Layout Name), y desmarque la opcion Backwards Compability (AppCompat)
como se muestra a continuacin.

CAMPO

VALOR

Activity Name:

MainActivity

Layout Name:

activity_main

Presione el botn Finish para crear el proyecto.

3.

Espere unos segundos hasta que el Android Studio cree la estructura del proyecto. Se muestra el IDE
con la actividad creada.

Android

Pgina 3

Ing. Clay Fernando Alds Flores Mg.

4.

Si no esta abierta aun abra el archivo activity_main.xml que se encuentra en la carpeta layout.

5. Seleccione el TextView con el texto Hello Word y brrelo.


6. Arrastre de la paleta de herramientas, de la categora Widgests 3 TextView y de la categora Text
Fields 3 EditText, dispngalos uno debajo del otro como se muestra a continuacin.

Android

Pgina 4

Ing. Clay Fernando Alds Flores Mg.

7. Inicialice las propiedades respectivas segn la siguiente tabla.

CONTROL
TextView

Text

VALOR
Ingrese un nmero:

TextView

Text

Ingrese otro nmero:

TextView

Text

Respuesta:

EditText

id

etIngreseNumero

EditText

id

etIngreseOtroNumero

EditText

Id

etRespuesta

Enabled

false

Android

PROPIEDAD

Pgina 5

Ing. Clay Fernando Alds Flores Mg.

Si tiene problemas, por favor revise las prcticas anteriores donde se cre controles
TextView o EditText, fjese en las figuras de cada paso.

8. La actividad (formulario-ventana) debera presentar un aspecto similar (NO IGUAL) a la siguiente figura.

9. Ahora vamos a utilizar controles RadioButton, para esto debemos primero insertar un control de tipo
RadioGroup, este control se encuentra en la paleta de componentes en la pestaa Containers",
arrastre un control de este tipo y ubquelo bajo el TextView Respuesta.

10. Inicialice las propiedades del RadioGroup segn la siguiente tabla.


CONTROL
RadioGroup

Android

PROPIEDAD
layout_width

VALOR
match_parent

layout_height

match_parent

Pgina 6

Ing. Clay Fernando Alds Flores Mg.

11. De la paleta de componentes en la pestaa Widgets" arrastre 3 controles RadioButton y distribyalos


uno debajo del otro y dentro del control RadioGroup anterior.

Android

Pgina 7

Ing. Clay Fernando Alds Flores Mg.

Podemos fcilmente identificar que los controles RadioButton pertenecen (estn dentro) de uno
RadioGroup viendo la ventana "Component Tree" de Android Studio (donde se nos muestra todos los
controles con sus nombres insertados hasta el momento en la actividad):

Android

Pgina 8

Ing. Clay Fernando Alds Flores Mg.

12. Para nuestro caso necesitamos 6 RadioButton, por lo tanto arrastre 3 controles ms de tipo
RadioButton de la paleta de componentes de la categora Widgets y ubquelos CON CUIDADO dentro
del control RadioGrup anterior.

Android

Pgina 9

Ing. Clay Fernando Alds Flores Mg.

Utilice la ventana Component Tree para comprobar que los controles creados estn
dentro del RadioGrup. Tambin puede usar esta ventana para arrastrar y poner los
RadioButton (si estn fuera del RadioGroup) dentro del RadioGroup.

Android

Pgina 10

Ing. Clay Fernando Alds Flores Mg.

13. Cambie las propiedades Text de cada RadioButton (de la misma forma que se lo hace para los
TextView) y el Id segn se indica a continuacin.

CONTROL
RadioButton

RadioButton

RadioButton

RadioButton

RadioButton

RadioButton

PROPIEDAD

VALOR

Text

Sumar

id

rbSumar

Text

Restar

id

rbRestar

Text

Multplicar

id

rbMultiplicar

Text

Dividir

id

rbDividir

Text

Potencia

id

rbPotencia

Text

Factorial

id

rbFactorial

14. Use la propiedad height del RadioGroup y establzcalo en el valor wrap_content para que el tamao se
adapte al contenido tal y como se muestra en la figura anterior.

Android

Pgina 11

Ing. Clay Fernando Alds Flores Mg.

Si tiene problemas para configurar la propiedad Text del RadioButton, por favor revise
las prcticas anteriores realizadas en clase donde se cre controles TextView y se
configur esta propiedad ya que el procedimiento es el mismo.

15. Agregue un control Button desde la pestaa Widgets y ubquelo luego del RadioGrup (fuera de este),
cambie la propiedad Text del control segn se indica a continuacin.

Establezca las propiedades del control de acuerdo a la siguiente tabla.

CONTROL
Button

PROPIEDAD

VALOR

Text

Aceptar

layout_width

match_parent

16. La actividad debera presentar una apariencia similar (NO IGUAL) al mostrado en el siguiente grfico.

Android

Pgina 12

Ing. Clay Fernando Alds Flores Mg.


17. La ventana Component Tree muestra todos los controles de la actividad, todos estn dentro del control
contenedor RelativeLayout (que sirve para organizar los controles usando coordenadas relativas).

Android

Pgina 13

Ing. Clay Fernando Alds Flores Mg.

11/12/2016

Ejercicio # 2

PROGRAMACIN DE LA APLICACIN.
Los mtodos que permitan sumar, restar, multiplicar, dividir, obtener la potencia y el
factorial se ubicarn en una clase, de esta forma separamos la lgica de la aplicacin
de la interfaz, lo que facilita el diseo y mantenimiento de la misma.

1. Cree una clase para el proyecto, para el proyecto App_003, para esto marque el paquete fisei.app_003
(para este ejemplo) si creo el paquete con otro nombre igual seleccinelo. Esto se muestra a continuacin.

2. Presione clic derecho sobre el paquete fisei.app_003 (o el que corresponda a su proyecto), como
muestra la siguiente ventana.

Presione
en la
opcin
Java

3. En la ventana emergente seleccione New y luego en el men en cascada la opcin Java Class como
se muestra en la figura anterior.

Android

Pgina 14

Ing. Clay Fernando Alds Flores Mg.

En la pantalla que aparece digite Matematicas dentro del campo Name, esto crea la clase Matematicas.

4. Presione el botn OK para crear la clase.

5. Dentro de la clase creada digite el siguiente cdigo.


public class Matematicas
{
public static int sumar(int x, int y)
{
return x + y;
}
//Permite resta 2 numeros.
public static int restar(int x, int y)

Android

Pgina 15

Ing. Clay Fernando Alds Flores Mg.

{
return x - y;
}
//Permite multiplicar 2 numeros.
public static int multiplicar(int x, int y)
{
return x * y;
}
//Permite dividir 2 numeros.
public static int dividir (int x, int y)
{
return x / y;
}
//Permite obtener la potencia.
public static long potencia (int base, int exponente)
{
long resultado = 1;
for (int i=1; i <= exponente; i++)
{
resultado *= base;
}
return resultado;
}
//Permite obtener el factorial de un numero.
public static long factorial (int numero)
{
long resultado = 1;
for (int i=1; i <= numero; i++)
{
resultado *= i;
}
return resultado;
}
}

Note que el cdigo es casi idntico al creado en la prctica anterior (en clases), con la
excepcin que todos los mtodos son ahora estticos (static)

6. Use la ventana Android para abrir (si an no la tiene abierta) la clase MainActivity.java (o la que usted
haya creado) que representa la clase asociada a la actividad (ventana-formulario).

Android

Pgina 16

Ing. Clay Fernando Alds Flores Mg.

Abra la clase que esta


asociada a la actividad
(formulario-ventana)

Captura de eventos.
Ahora es necesario definir variables en java para almacenar las referencias a los objetos definidos en el
archivo XML que representa la ventana (actividad).
7. En el archivo MainActivity.java defina tres variables tipo EditText y 6 de tipo RadioButton (estas clases
se encuentran en el paquete android.widget). Para que java reconozca estas clases es necesario
importarlas, eso se lo hace en la seccin de clusulas import como se indica en el siguiente cdigo. En
este caso Android Studio agrega los import automticamente, si no lo hace presione Alt + Enter.

Android

Pgina 17

Ing. Clay Fernando Alds Flores Mg.

8. En el mtodo onCreate se debe enlazar estas variables con los objetos definidos en el archivo XML, esto
se hace llamando al mtodo findViewById. Por lo tanto, digite el cdigo siguiente para lograr este
objetivo, hasta ahora su archivo java debera presentar el siguiente aspecto.

Android

Pgina 18

Ing. Clay Fernando Alds Flores Mg.

Al mtodo findViewById le debemos pasar la constante creada en la clase R (recordemos que esta clase se
crea automticamente y es administrada por Android) el nombre de la constante no debe ser igual
necesariamente con el nombre de la propiedad del objeto creado en el archivo XML. Como el mtodo
findViewById retorna un objeto de la clase de tipo View entonces es necesario utilizar el operador cast (es
decir le antecedemos entre parntesis el nombre de la clase)
Ya tenemos almacenados en las variables (objetos) las referencias a los objetos necesarios de la actividad
(formulario-ventana) que se crean al llamar al mtodo:
setContentView(R.layout.activity_main).
9. Ahora es necesario crear un mtodo que se ejecutar cuando se presione el botn Aceptar (el mtodo
obligatoriamente debe recibir como parmetro un objeto de la clase View).

Por lo tanto, cree el cdigo para el mtodo y agregue en la clusula import la referencia al paquete donde
se encuentra la clase View, esto se muestra a continuacin

Android

Pgina 19

Ing. Clay Fernando Alds Flores Mg.

10. Ahora cree la lgica dentro del mtodo para que segn el RadioButton seleccionado se realice la suma,
resta, multiplicacin, divisin, potencia o el factorial de los dos valores ingresados en los controles
EditText y mostrar el resultado en el tercer EditText. Para lograr esto digite el siguiente cdigo para el
mtodo aceptar creado anteriormente.

//Este mtodo se ejecutar cuando se presione el botn Aceptar.


public void Aceptar(View view)
{
//Obtener los datos ingresados en lo controles EditText
//utilizando las referencias (objetos-punteros) creados anteriormente.
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
//Pasar de String a int.
int a = Integer.parseInt(valor1);
int b = Integer.parseInt(valor2);
long resultado = 0;
//Verificar cual es el RadioButton seleccionado.
if (r1.isChecked()==true)
{
//Utilizar el metodo estatico (suma) de la clase Matematicas
//para realizar la suma.

Android

Pgina 20

Ing. Clay Fernando Alds Flores Mg.

resultado = Matematicas.sumar(a, b);


}
else
if (r2.isChecked()==true)
{
//Restar
resultado = Matematicas.restar(a, b);
}
else
if (r3.isChecked()==true)
{
//Multiplicar
resultado = Matematicas.multiplicar(a, b);
}
else
if (r4.isChecked()==true)
{
//Dividir
resultado = Matematicas.dividir(a, b);
}
else
if (r5.isChecked()==true)
{
//Potencia.
resultado = Matematicas.potencia(a, b);
}
else
if (r6.isChecked()==true)
{
//Factorial.
resultado = Matematicas.factorial(a);
}
//Pasar de long a String.
String cadena = String.valueOf(resultado);
//Mostrar el resultado en la propiedad Text del EditText.
et3.setText(cadena);
}

11. A continuacin, es necesario asociar el mtodo creado Aceptar con la propiedad OnClick del botn para
que al presionar un botn se dispare el evento Click y se llame al mtodo aceptar.
Para esto abra el archivo activity_main.xml que est dentro de la carpeta layout (su archivo puede tener
un nombre diferente), este archivo representa la actividad (formulario-ventana), utilice la ventana
Android para esto.

Android

Pgina 21

Ing. Clay Fernando Alds Flores Mg.

Se muestra el archivo xml indicado en la vista Design.


12. Para asociar el botn Aceptar y lograr que cuando se dispare el evento click se ejecute el mtodo
aceptar creado anteriormente seleccione el botn Aceptar y en la ventana Properties presione sobre
la propiedad OnClick, de la lista del combobox que se muestra seleccione el mtodo aceptar creado
anteriormente, como se muestra a continuacin.

Android

Pgina 22

Ing. Clay Fernando Alds Flores Mg.

13. Para probar la aplicacin primero ejecute el emulador, para esto ejecute el Android Virtual Device
Manager desde la barra de herramientas o desde el men Tools- Android-Virtual Device Manager.

Android

Pgina 23

Ing. Clay Fernando Alds Flores Mg.

14. En la ventana que se muestra seleccione el emulador a ejecutar (en nuestro caso el creado en las
prcticas anteriores) y luego pulse sobre el botn de Play en la seccin Actions.

15. El emulador se inicializa.

Android

Pgina 24

Ing. Clay Fernando Alds Flores Mg.

16. Si el emulador est bloqueado, proceda a desbloquearlo deslizando el icono del candado hacia la
izquierda.

Android

Pgina 25

Ing. Clay Fernando Alds Flores Mg.

17. Antes de ejecutar el proyecto cierre el Android Virtual Device Manager.

Android

Pgina 26

Ing. Clay Fernando Alds Flores Mg.

18. Finalmente ejecute el proyecto y pruebe que todo funcione correctamente.

Android

Pgina 27

Ing. Clay Fernando Alds Flores Mg.

Si al probar la aplicacin experimenta errores.

Si el error ocurre apenas al ejecutar el programa, el problema est en la actividad


(ventana-formulario) y los controles visuales, por lo tanto cree nuevamente la
interfaz o revise el mtodo onCreate() donde se crean las referencias a los controles
visuales.
Si el error ocurre al presionar el botn Aceptar, revise el mtodo Aceptar() y la clase
Matematicas.

Ejecute nuevamente el proyecto.

Android

Pgina 28

Ing. Clay Fernando Alds Flores Mg.

Ejercicios propuestos

Android

El uso de los controles CheckBox que estn en la pestaa Widgets es idntico a los
RadioButtons. Experimente con este control, cree la misma aplicacin con dos de las opciones
(factorial y potencia) usando CheckBox.

Pgina 29

También podría gustarte