Lectura de Apropiación de Conceptos Nucleo 3

POLITÉCNICO INTERNACIONAL
UNIDAD VIRTUAL Versión: 1.0
FORMATO “CONTENIDOS NÚCLEO DE Fecha:

APRENDIZAJE” 28/12/2017
Nombre profesor (a) JUAN MAURICIO AVILA LEON

Nombre del diplomado Diplomado en desarrollo móvil
Núcleo de aprendizaje 3
Créditos Académicos
Tiempo
Diplomado en desarrollo móvil

Núcleo temático 3:
Interfaz Usuario - Creación de apps modernas, Design y Responsive Design
OBJETIVO
 Construir interfaces graficas dinámicas e interactivas a través de la inclusión de
diferentes vistas y controles.
 Implementar interfaces graficas en Android orientada a eventos, de acuerdo a las
acciones del usuario con la interfaz.
 Crear intents para el lanzamiento y enlace de diferentes actividades o pantallas
CONTENIDO
 ESTRUCTURA APLICACIÓN JAVA DE ANDROID

 MANEJO Y CREACION DE INTERFAZ DESIGN CON VISTAS Y CONTROLES
BASICOS
 IMPLEMENTACION Y PROGRAMACION DE EVENTOS(LISTENERS)
 DEFINICION E IMPLEMENTACION DE INTENTS
 CAMBIO Y ENLACE ENTRE ACTIVIDADES (PANTALLAS)

AndroidManifest.xml
Todas las actividades de la aplicación deben estar reflejadas y contenidas en este

archivo
DESCRIPCION DE LA CLASE JAVA

Es muy importante identificar y tener clara la estructura de la clase java, pues es el
primer archivo de la aplicación que se ejecuta y lleva a cabo los procedimientos de
enlace con los elementos y vistas de la interfaz Design.
Observemos entonces la clase de java


En este archivo se encuentran las dos librerías importadas desde Android necesarias para que se ejecute nuestra aplicación.
Se evidencia igualmente dentro de la clase MainActivity
La clase extends AppCompatActivity
Que desde la versión 1.5 de Android se implementa en las aplicaciones
Luego encontramos la instrucción
@Override
Lo que indica que habrá sobre escritura del método que corresponde a la clase
AppCompatActivity, ya que dentro de ella existe un método que se llama
onCreate que podrá ser ejecutado dentro de la clase MainActivity
Dentro del método onCreate encontramos:
La Línea:
super.onCreate(savedInstanceState);
la que se encarga de ejecutar el constructor de la clase heredada AppCompatActivity y le envía un parámetro de instancia.
La Línea:
setContentView(R.layout.activity_main);
Esta instrucción llama el método setContentView donde le envía por parámetro un R.layout.activity_main
Prácticamente envía el enlace con la vista de nuestro archivo

activity_main.xml
Importante:
Tenga en cuenta que R
Es un recurso de Android, una clase contenida por Android que nos va a permitir utilizar archivos, valores o recursos de todo
lo que este y contenga nuestro proyecto.
Nos permitirá movernos dentro de cualquier archivo, carpeta o valor contenido en nuestro proyecto ejemplo.
Si queremos referirnos a la carpeta drawable de nuestro proyecto invocamos:

R.drawable
Si queremos referirnos a la carpeta Layout de nuestro proyecto invocamos:
R.layout
Etc
CREACION DE ENLACE DE VISTAS DE LA APLIACION CON LA CLASE JAVA.
A continuación llevaremos a cabo los procesos de enlace de los diferentes controles o vistas de
nuestra actividad con la clase principal, recuerde que solo a través de la clase principal se podrán
establecer las relaciones y enlaces con la interfaz gráfica.
Crearemos un proyecto nuevo en Android con las siguientes características:


La interfaz contendrá:
 Un Label TextVew con el texto “Hello
World”
 Un Botón de comando Button con el
Texto “CAMBIAR TEXTO”
Con la interfaz anterior se pretende crear el

procedimiento correspondiente de enlace, que
al hacer click sobre el botón CAMBIAR TEXTO,
se modifique el texto Hello World por el texto
Diplomado Android.
Para poder realizar los procedimientos de enlace de las vistas con la clase java,
es importante tener en cuenta que los controles o vistas deben tener asignado
un id o referencia que lo identifique, lo cual puede realizarse desde el entorno
grafico desde su propiedad ID, o asignarlo desde el modo texto en XML.
Para nuestro ejercicio, asignaremos a nuestro control TextView el Id = ms y al

control Button el ID = b1.
Los id deben ser únicos por cada uno de los componentes, en la figura se
identifican las etiquetas xml de Android id y text .

Modo Text XML Modo Design Diseño

Una vez referenciados los controles de la vista, nos dirigimos a la clase java, desde
este archivo implementamos las instrucciones lógicas y sintácticas de enlace con la
interfaz gráfica.
Observemos:
En la vista actual de la clase, se evidencia la
instrucción
SetContentView(R.layout.activity_main);
La cual solo indica la interfaz gráfica que se
tiene que cargar, pero no se relacionan los
diferentes elementos de la misma.
El proceso de relación de cada elemento hay
que realizarlo uno a uno.

Creamos y definimos los controles como variables de instancia del tipo que
correspondan, observe la figura
Figura1
Definición de controles a referenciar
Definimos los controles con los nombres que queramos según las convenciones de tipo
ámbito y o alcance prívate, public, static.
Ahora procedemos a referenciar los dos elementos creados desde el método void de la
clase, como se indica a continuación:
En la referencia se evidencian la
instrucción:
t1=(TextView)findViewById(R.id.ms);
en la instrucción colocamos el nombre

de nuestro control creado t1, le
asignamos casting(TextView) por el
tipo de vista que corresponde, en
seguida incluimos el método
findViewById proporcionado por
Android para poder referenciar la
parte gráfica y lógica de nuestra
aplicación, en este caso ubicamos el
componente de la vista por su ID.
(R.id.ms), teniendo claro que el
TextView definido en nuestra interfaz
tiene asignado el ID ms
El mismo procedimiento debe hacerse

con los controles que contenga nuestra
vista y que requiramos referenciar.

Una vez referenciados los controles o vistas de la interfaz gráfica, procedemos a realizar
la implementación de los eventos o acciones sobre los controles, identificados dentro
de la estructura de una aplicación Android.
IMPLEMENTACION Y GESTION DE EVENTOS(ESCUCHADORES)
En Android, existe más de una forma de interceptar los eventos desde una interacción
del usuario con tu aplicación. Al considerar los eventos dentro de tu interfaz de usuario,
el enfoque consiste en capturar los eventos desde el objeto de vista específico con el
que el usuario interactúa. La clase de vista proporciona los medios para hacerlo.
Tomado de : https://developer.android.com/guide/topics/ui/ui-events.html?hl=es-419
Dentro de las diversas clases de objetos View que usarás para componer tu diseño,
quizá observes varios métodos de callback públicos que pueden ser útiles para eventos
de IU. El framework de Android llama a estos métodos cuando la acción respectiva
ocurre en ese objeto. Por ejemplo, cuando se toca una vista (por ejemplo, un botón), se
llama al método onTouchEvent() en ese objeto. Sin embargo, para interceptar esto,
debes extender la clase y reemplazar el método. No obstante, extender todos los objetos
de vista para manejar tal evento no sería práctico. Es por ello que la clase de vista
también contiene una colección de interfaces anidadas con callbacks que puedes definir
más fácilmente. Estas interfaces, llamadas gestores de eventos, te permiten capturar la
interacción del usuario con tu IU.
Si bien generalmente usarás los receptores de eventos para escuchar la interacción del
usuario, es posible que en algún momento desees ampliar una clase de objeto View
para crear un componente personalizado. Quizá desees ampliar la clase Button para
crear algo más elaborado. En este caso, podrás definir los comportamientos de eventos
predeterminados para tu clase utilizando los controladores de eventos de la clase.
GESTORES DE EVENTOS
Un receptor de eventos es una interfaz en la clase View que contiene un solo método
de callback. Estos métodos serán llamados por el framework de Android cuando la vista
con la cual se ha registrado el gestor sea iniciada por la interacción del usuario con el
elemento en la IU.
En las interfaces de los gestores de eventos, se incluyen los siguientes métodos de

callback:

METODO ESCUCHADOR ACCION

onClick() OnClickListener Desde View.OnClickListener. Este
método se llama cuando el usuario toca
el elemento (en el modo táctil), o
selecciona el elemento con las teclas de
navegación o la bola de seguimiento y
presiona la tecla “Entrar” adecuada o la
bola de seguimiento.
onLongClick() OnLongClickListener Desde View.OnLongClickListener. Este
método se llama cuando el usuario toca
y mantiene presionado el elemento (en
el modo táctil), o selecciona el elemento
con las teclas de navegación o la bola
de seguimiento y mantiene presionada
la tecla “Entrar” adecuada o la bola de
seguimiento (durante un segundo).
onFocusChange() OnFocusChangeListener Desde View.OnFocusChangeListener.
Este método se llama cuando el usuario
navega hacia el elemento o sale de este
utilizando las teclas de navegación o la
bola de seguimiento.
onKey() OnKeyListener Desde View.OnKeyListener. Este
método se llama cuando el usuario se
centra en el elemento y presiona o
libera una tecla física en el dispositivo.
onTouch() OnTouchListener Desde View.OnTouchListener. Este
método se llama cuando el usuario
realiza una acción calificada como un
evento táctil, por ejemplo, presionar,
liberar o cualquier gesto de movimiento
en la pantalla (dentro de los límites del
elemento).
onCreateContextMenu() OnCreateContextMenuListener Desde
View.OnCreateContextMenuListener.
Este método es llamado cuando se crea
un Context Menu (como resultado de un
"clic largo" sostenido). Consulta la
explicación sobre menús contextuales
en la guía para desarrolladores Menus.
Estos métodos son los únicos habitantes de su respectiva interfaz. Para definir uno de
estos métodos y manejar sus eventos, implemente la interfaz anidada en su actividad,
Luego pasa una instancia de su implementación al método View.set...Listener()
respectivo.
(P. ej., llama a setOnClickListener() y pasa tu implementación de OnClickListener).
importante
Para el caso de nuestro ejemplo anterior, debemos implementar en la clase de nuestra

aplicación una interfaz con el escuchador OnClickListener y al control o vista Button se
le debe asignar el escuchador setOnClickListener() que esta implementado en la
interfaz actual y que hará el llamado al método Onclick()

Implementamos el método Onclick()

Este es el método que se ejecutara cada vez que se hace click en un botón
Veamos entonces la implementación de nuestra interfaz y métodos en Nuestro
Ejemplo
En la clase se evidencia como indican las flechas, el orden a seguir para el desarrollo
de la interfaz y el gestor de eventos.
1. Se implementa la interfaz para que actué frente a la acción del evento Click sobre
el control o vista especifico.
Por lo que se asigna al final de clase AppCompatActivity la instrucción
implements View.OnClickListener, para establecer el evento de escuchar de
la aplicación una vez se haga click en alguna vista o control.
2. Se implementa al control(Button) creado bt,el escuchador correspondiente para

ejecutar el método Onclick al hacer click sobre el mismo.
bt.setOnClickListener(this);

3. Se crea automáticamente el método Onclick que ejecuta las instrucciones y

procesos al evento de hacer click sobre el button bt.
public void onClick(View view) { El método setText()
t1.setText("DIPLOMADO ANDROID"); Permite asignar dentro de la vista TetxView, texto o
} contenido de variables.
El método getText()
Permite capturar el contenido de la vista TetxView,en
algunos casos debe manejarse casting, según el tipo de
dato.
Ejecutamos ahora nuestra aplicación:
Al hacer click sobre el botón cambiar texto obtendremos:
Nota:
Cualquier elemento o vista de la

interfaz, puede ser utilizado
como un botón de comando o
acción, simplemente
referenciándolo y asignando el
método
setOnClickListener(this);

En el código anterior se identifica el método:
public void onClick(View view)

{
}
El cual Se ejecutará para todos aquellos controles o vistas que estén asignados o
referenciados con el método setOnClickListener(this);
En los argumentos del método se identifican (View view), donde el primer argumento
define el tipo de la clase java principal de donde se heredan todos los métodos y
recursos del paquete grafico aplicable para Android y view es el nombre que le damos
al argumento o variable, pero puede ser definido con cualquier nombre.
Ejemplo:
public void onClick(View v)
{
}
Si tenemos varias vistas o controles dentro de la actividad referenciados con el
escuchador setOnClickListener(this), debemos implementar dentro del método
onClick(),la programación correspondiente que nos permita capturar el evento de
cada control y ejecutar el proceso o acción que corresponda.
Para lo cual debemos capturar el id del evento recibido en el argumento una vez se
ejecute la acción sobre el control.
Continuando con nuestro ejemplo, Agregamos a la interfaz un Button con el texto

BORRAR identificado con la referencia ID =br, que nos permita borrar el contenido del
Control TextView ms.
Esto indica que la actividad integrara 2 controles que tendrán asignada la referencia
setOnClickListener(this), Pero ejecutaran procesos diferentes de acuerdo al evento o
acción de cada vista.

Observe la figura
En la implementación del método public void onClick(View v)

Encontramos la instrucción
int id=v.getId();
donde se define una variable entera llamada id, a la cual se le asigna el id del control
seleccionado a través del método getId() del argumento definido.
Para este caso v.getId
Una vez capturado el Id del control, realizamos la correspondiente validación a
través de las condicionales if y ejecutamos los procedimientos que corresponden
como se indica en el código de la figura.
Ejecute y confirme el funcionamiento de la aplicación en su emulador AVD


PROGRAMACION CONTROL SPINNER Y EVENTO LISTENER
El spinner es una vista de control desplegable que nos permite elegir un elemento del mismo.
Tomando nuestra aplicación de ejemplo, agregamos un control spinner con la referencia ID= sp1
Creamos un nuevo Valúes resource file llamado arrays.xml

Realizamos click derecho en la carpeta valúes opción new Values resource file como se indica a continuación:
Dentro del mismo creamos un arrays de Strings que contendrá los ítems o elementos que se asignaran al
spinner.
Nos vamos a la clase principal java, lo creamos y referenciamos
private Spinner sp;

//CREAMOS UN ARRAYS DE STRING
String [] items;
aquí además de crear el control Spinner sp, agregamos un array de String vacío llamado ítems, al cual le
asignaremos el arreglo creado en el recurso anterior.

Veamos:
Asignamos al spinner el adaptador,para cargar los elementos
Al ejecutar la aplicación nos aparece el control spiner con sus elementos cargados

Ahora que creamos y cargamos nuestro control Spinner, procedemos a la implementación del evento o
escuchador.
El objetivo es que al hacer click sobre un elemento de la lista desplegable spinner, el elemento o ítem seleccionado, se
asigne al texto del control TextView referenciado con el ID=ms, ya creado en nuestra interfaz anterior.
Para este proceso tenemos que implementar al control spinner sp, el escuchador o listener
setOnItemSelectedListener con el respectivo método que recoge el evento y ejecuta la acción de selección del
elemento public void onItemSelected().
Observemos:
Se Asigna al TextView el elemento ítem del spinner seleccionado


PROGRAMACION CONTROLES ( radioGroup; RadioButton) Y EVENTO LISTENER

Para este ejemplo crearemos un proyecto llamado Operaciones, con el diseño que se registra en la
figura
RadioButton: son un grupo de opciones de la interfaz
gráfica de donde solo se puede seleccionar una única opción
a la vez.
RadioGroup: son la vista contenedora de los RadioButton se
requiere para incluir dentro de su definición los
RadioButton.
Para el caso de nuestra interfaz, su función corresponde a la
ejecución de sumar, restar o multiplicar los valores
ingresados según la selección.
Controles Utilizados:
 4 controles Textview
 3 controles EditText con los Id t1, t2 y t3
 1 RadioGroup, contendrá los RadioButton
 3 RadioButton con los id r1,r2 y r3
 1 Button con el id b1
Para este ejemplo implementaremos la interfaz de eventos implements

View.OnClickListener con el listener setOnClickListener y el método correspondiente
public void onClick(View v).
shdsdhsgdhs
Casting en Android https://www.youtube.com/watch?v=s9N15-IQEmE


CAMBIO Y ENLACE ENTRE ACTIVIDADES (PANTALLAS)

A continuación, entramos en detalle frene al proceso de cambio entre actividades o pantallas dentro de
una aplicación e Android.
Continuando con nuestro ejemplo, Agregamos un Button con el texto CAMBIO DE PANTALLA,
identificado con la referencia ID =cp, que nos permitirá cambiar de pantalla o mejor abrir otra actividad.
Para cambiar de una pantalla a otra o lanzar otra
actividad requerimos de la implementación de un
Intent.
Un Intent es un objeto que proporciona enlace en tiempo

de ejecución entre componentes separados, como dos
activity. El Intent representa la “intención de hacer algo”
de una app. Puedes usar las intents para varias tareas,
pero generalmente un intent inicia otra activity. En
MainActivity.java ...
Tomado de
https://developer.android.com/training/basics/firstapp/starting-
activity.html?hl=es-419
Es una clase que nos lanza hacia un Activity nuevo
Los intent reciben una clase nueva a la que se nos dirigimos Procedemos entonces a la creación de una nueva Activity
CREAMOS ENTONCES UNA NUEVA ACTIVIDAD COMO SE INDICA A CONTINUACION:

Una vez creada la segunda actividad, se crean automáticamente los archivos
En la vista Design de la activity_main2.xml agregamos


Una vez creada la segunda actividad Main2Activity, nos dirigimos a la clase principal dela actividad
uno MainActivity, referenciamos el Button CAMBIO DE PANTALLA, e implementamos desde el
método onClick la definición del Intent para lanzar la actividad Main2Activity.
Ejecutamos y obtenemos
La instrucción
Intent i=new Intent(this,
Main2Activity.class);
Crea el objeto Intent i al

instanciarlo, le asigna en el
primer argumento el contexto
en el que se encuentra con la
instrucción this y en el
segundo argumento envía el
archivo Main2Activity.class
que es la actividad que se
quiere lanzar.
Una vez creada la intención, se

lanza la actividad enviando el
intent creado con la instrucción
startActivity(i);

BIBLIOGRAFIA
 Gallego Antonio 2016 “Desarrollo aplicaciones Android con java” Ediciones
de la U 20-60
 Tomas Jesús 2016 “El gran Libro de Android” Alfa omega
 Torres Manuel 2016 “Desarrollo de aplicaciones móviles con Android”
Editorial Macro
 https://www.youtube.com/watch?v=_YR746pejBU
 https://www.youtube.com/watch?v=vk0lFBpGiXY
 https://www.youtube.com/watch?v=qd41OyVv1gQ
 https://www.youtube.com/watch?v=q1Cn_DK7dGM&t=5s
RECURSOS
http://androidcero.eledevapps.com/2015/01/onclick-en-programacion-
android_28.html
http://www.hermosaprogramacion.com/2016/03/checkbox-android/

Lectura de Apropiación de Conceptos Nucleo 3

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lectura de Apropiación de Conceptos Nucleo 3

Cargado por

Copyright:

Formatos disponibles

POLITÉCNICO INTERNACIONAL

UNIDAD VIRTUAL Versión: 1.0

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Nombre profesor (a) JUAN MAURICIO AVILA LEON

Diplomado en desarrollo móvil

 ESTRUCTURA APLICACIÓN JAVA DE ANDROID

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Todas las actividades de la aplicación deben estar reflejadas y contenidas en este

DESCRIPCION DE LA CLASE JAVA

Observemos entonces la clase de java

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Se evidencia igualmente dentro de la clase MainActivity

La clase extends AppCompatActivity

Que desde la versión 1.5 de Android se implementa en las aplicaciones

Luego encontramos la instrucción

AppCompatActivity, ya que dentro de ella existe un método que se llama

onCreate que podrá ser ejecutado dentro de la clase MainActivity

Dentro del método onCreate encontramos:

Prácticamente envía el enlace con la vista de nuestro archivo

Si queremos referirnos a la carpeta drawable de nuestro proyecto invocamos:

CREACION DE ENLACE DE VISTAS DE LA APLIACION CON LA CLASE JAVA.

Crearemos un proyecto nuevo en Android con las siguientes características:

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Con la interfaz anterior se pretende crear el

Para nuestro ejercicio, asignaremos a nuestro control TextView el Id = ms y al

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Modo Text XML Modo Design Diseño

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Definición de controles a referenciar

en la instrucción colocamos el nombre

El mismo procedimiento debe hacerse

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

IMPLEMENTACION Y GESTION DE EVENTOS(ESCUCHADORES)

En las interfaces de los gestores de eventos, se incluyen los siguientes métodos de

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

METODO ESCUCHADOR ACCION

Para el caso de nuestro ejemplo anterior, debemos implementar en la clase de nuestra

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Implementamos el método Onclick()

2. Se implementa al control(Button) creado bt,el escuchador correspondiente para

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

3. Se crea automáticamente el método Onclick que ejecuta las instrucciones y

Al hacer click sobre el botón cambiar texto obtendremos:

Cualquier elemento o vista de la

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

En el código anterior se identifica el método:

public void onClick(View view)

Continuando con nuestro ejemplo, Agregamos a la interfaz un Button con el texto

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

En la implementación del método public void onClick(View v)

Ejecute y confirme el funcionamiento de la aplicación en su emulador AVD

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

PROGRAMACION CONTROL SPINNER Y EVENTO LISTENER

Creamos un nuevo Valúes resource file llamado arrays.xml

Nos vamos a la clase principal java, lo creamos y referenciamos

private Spinner sp;

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Asignamos al spinner el adaptador,para cargar los elementos

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

Se Asigna al TextView el elemento ítem del spinner seleccionado

FORMATO “CONTENIDOS NÚCLEO DE Fecha:

PROGRAMACION CONTROLES ( radioGroup; RadioButton) Y EVENTO LISTENER

Para este ejemplo implementaremos la interfaz de eventos implements