5 Elementos visuales en Android

Practica No. 5 Elementos visuales en Android

Objetivo: Analizar e Implementar cada uno de los elementos visuales que ofrece la programación Android para la creación de interfaces.

Procedimiento:

1. Genera un nuevo proyecto en Android

1. Abrimos el archivo activity_main.xml.

1. Mediante la interfaz gráfica, arrastraremos la etiqueta llamada TextView.

[pic 1]

Visual        XML

[pic 2]

1. Las propiedades que pueden ser modificadas mediante el XML son las siguientes:

1. Id o identificador del elemento

1. Ancho

1. Alto

1. Alineación

1. Texto

1. Margen

1. Estilos (Color, tipo de letra, etc.)

1. Mediante la interfaz gráfica, arrastraremos la etiqueta llamada Button.

[pic 3]

[pic 4]

6.        Mediante la interfaz gráfica, arrastraremos la etiqueta llamada EditText.

[pic 5]

7.        Mediante la interfaz gráfica, arrastraremos la etiqueta llamada CheckBox.

[pic 6]

8.        Mediante la interfaz gráfica, arrastraremos la etiqueta llamada RadioButton.

[pic 7]

Visual        XML

[pic 8]

[pic 9]

9.        Mediante la interfaz gráfica, arrastraremos la etiqueta llamada ImageView.

[pic 10]

Visual        XML

10. Mediante la interfaz gráfica, arrastraremos la etiqueta llamada ImageButton.

[pic 11]

Visual        XML

11. Mediante la interfaz gráfica, arrastraremos la etiqueta llamada TimePicker.

[pic 12]

Visual        XML

12. Mediante la interfaz gráfica, arrastraremos la etiqueta llamada DataPicker.

[pic 13]

[pic 14]

Practica No. 6 Listeners dentro de un Activity

Objetivo: Analizar e Implementar la función de los listeners dentro de una pantalla, así como sus diferentes formas de creación.

Procedimiento:

1. Genera un nuevo proyecto en Android

1. Abrimos el archivo activity_main.xml

1. Agregamos un Button a la pantalla, quedando de la siguiente forma.

[pic 15]

android:id=”@+id/button1”

1. Posteriormente abrimos el archivo MainActivity.java.

1. Para poder controlar el comportamiento un elemento de la vista se debe de hacer un enlace mediante código en el cual el elemento de la vista debe de ser contenido mediante su objeto de clase equivalente, es decir si se tiene un Button en la vista, la clase enlace seria la clase Button, por lo regular siempre tienen el mismo nombre que el View.

[pic 16]

Instancia de clase

Enlace

Objeto de la interfaz

[pic 17]

[pic 18]

1. Como primer ejemplo, agregaremos un evento al botón mediante la creación de una clase anónima y su asignación al método setOnclickListener que contiene nuestro objeto, esto dentro del mismo método onCreate().

[pic 19]

Clase anónima

1. Posteriormente ejecutamos nuestra aplicación para comprobar que el evento se ha agregado a nuestro botón.

[pic 20]

1. De esta forma podemos agregar eventos a cualquier tipo de elementos visuales, simplemente tenemos que importar la clase OnClickListener del paquete android.view.View.OnClickListener y agregar la clase anónima al método setOnClickListener del objeto

[pic 21]

[pic 22]

9.        Ahora agregaremos otro botón a nuestra pantalla, quedando de la siguiente forma:

[pic 23]

android:id=”@+id/button1”

android:id=”@+id/button2”

1. A continuación abrimos nuevamente el archivo MainActivity.java

1. La siguiente forma de agregar un evento a un elemento es mediante la implementación de la clase OnClickListener directamente en la clase en la que se encuentra enlazado el objeto.

[pic 24]

1. Al implementar esta clase, pedirá que sobreescribamos su método principal el cual es el método onClick(), de lo contrario marcará error en la clase y no dejara compilar.

[pic 25][pic 26]

[pic 27]

1. Después de implementar la clase y de sobreescribir el método onClick, tenemos que crear el enlace entre el botón de nuestra vista con el de nuestra clase.

[pic 28]

1. Posteriormente realizamos la asignación del método sobreescrito al boton2 con el mismo método setOnClickListener y como el método pertenece a la clase basta con poner la palabra reservada this y con eso ya estaría ligado el evento a él.

[pic 29][pic 30]

...