ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

GUÍA COMPONENTE PRÁCTICO

CURSO: DESARROLLO DE APLICACIONES MÓVILES

Semana 7. Interfaz de Usuario

Objetivos:
Entender cómo se realiza el diseño del interfaz de usuario en una aplicación Android.

Aprender a trabajar con vistas y mostrar sus atributos más importantes.

Mostrar cómo interactuar con las vistas desde el código Java

XML Syntax

En Android, las interfaces de usuario se implementan mediante objetos de tipo vista y objetos de tipo contenedor y
se especifican mediante ficheros XML.

La aplicación tiene una actividad y un diseño.

Cuando creamos la aplicación, le dijimos a Android Studio cómo configurarlo, y el asistente hizo el resto. El asistente
creó una actividad básica para nosotros, y también un diseño predeterminado.

La actividad controla qué hace la aplicación

Android Studio creó una actividad para nosotros llamada MainActivity.java. La actividad especifica qué hace la
aplicación y cómo debe responder al usuario.

El diseño controla la apariencia de la aplicación.

MainActivity.java especifica que usa el diseño que Android Studio creó para nosotros, llamado activity_main.xml. El
diseño especifica cómo se ve la aplicación.

Aquí está el código de activity_main.xml que en Android Studio se hizo las configuraciones:
 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

El código contiene tres elementos.

El primer elemento es el elemento <android.support.constraint.ConstraintLayout>

Este elemento le dice a Android que muestre los elementos en el diseño en posiciones relativas. Puede usar
<android.support.constraint.ConstraintLayout>, por ejemplo, para centrar los elementos en el centro

del diseño, alinearlos con la parte inferior de la pantalla en su dispositivo Android o colocarlos en relación con otros
elementos.

Cuidado:

Android Studio a veces muestra los valores de las referencias en lugar del código real.

Como ejemplo, puede mostrar "Hola" En lugar del código real "@string/app_hola"
 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

El segundo elemento es el elemento <TextView>. Este elemento se utiliza para mostrar texto al usuario. Está anidado
dentro del <android.support.constraint.ConstraintLayout>, y en nuestro caso se usa para mostrar el
texto de muestra "Hola".
La parte clave del código dentro del elemento <TextView> es la primera línea. ¿Qué observas?

El archivo de diseño contiene una referencia a una cadena, no a la cadena en sí

La parte clave del elemento <TextView> es la primera línea:
android:text="@string/app_hola"

android:text significa que este es la propiedad de texto del elemento <TextView>, por lo que especifica qué texto

debe mostrarse en el diseño. Pero, ¿por qué dice "@string/app_hola"en lugar de "Hola"? ¿Qué significa esto
realmente?
Empecemos por la primera parte, @string. Esta es solo una forma de decirle a Android que busque un valor de
texto de un archivo de recursos de cadena. En nuestro caso, Android Studio creó un archivo de recursos de cadena
para nosotros llamado strings.xml, ubicado en la carpeta app / src / main / res / values.
Ponga valores de cadena en strings.xml en lugar de codificarlos. instrumentos de strings.xml es un archivo de
recursos que se utiliza para mantener pares de cadenas de name/value. Los diseños y actividades pueden buscar
valores de cadena usando su nombre.
La segunda parte, app_hola, le dice a Android que busque el valor de un recurso con el nombre app_hola.
Entonces, @string/app_hola significa "buscar el recurso de cadena con el nombre app_hola, y usar el valor de
texto asociado".
Recurso String
strings.xml es el archivo de recursos predeterminado que se utiliza para mantener pares de cadenas de nombre /
valor para que puedan ser referenciados en toda la aplicación. Tiene el siguiente formato:
 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Cada par de nombre / valor toma la forma:

<string name="app_name">Hola</string>
donde app_name es el identificador de la cadena y Hola es el propio valor de la cadena.
Un diseño puede recuperar el valor de la cadena usando:

Implementación intent implícito y explicito

Una aplicación de ejemplo: Lista de contactos

Proyecto: ListaContactos
Paso1.

Paso2. Borrar el TextView y agregar un ListView

 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Obteniendo lo siguiente:

Paso3. Crear otro activity: DetalleContacto

 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Agregar un TextView:

Paso4: ir al string.xml, crear los siguientes datos como muestra:

Paso5. Configurar en el diseño:

 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Quedando de esta forma, como ejemplo:

Cambiar sus respectivos ID en el design:

Paso6. Crear una clase Contacto

 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Paso7. En el MainActivity crear un ArrayList

 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Paso8. ejecutar

Paso9. Declarando Intent explicito

Paso10. En DetalleMascota
 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Paso11.

En:
 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Luego:
 ESCUELA PROFESIONAL DE INGENIERÍA DE SISTEMAS

Tarea.
Tarea calificada: Desarrollando una aplicación con 2 activity.
Actividad 1:
Será un formulario de contacto donde muestre al usuario los siguientes datos:
 Nombre completo
 teléfono
 Email
 Descripción del contacto
Todos los campos deberán tener estilo de Material Design.

Al final de todos los elementos deberá mostrar y que nos lleve a la próxima Actividad.