Diseño de Interfaz Gráfica

26
Instructor: Rodrigo Iván Fonseca Daza

description

Material Android

Transcript of Diseño de Interfaz Gráfica

Page 1: Diseño de Interfaz Gráfica

Instructor: Rodrigo Iván Fonseca Daza

Page 2: Diseño de Interfaz Gráfica

Permite probar la aplicación directamente en un dispositivo con SO Android.

En ‘Ice cream sandwich’: ◦ Configuración->Opciones de desarrollador ->

Depuración USB

En ‘Jelly Bean’; ◦ Configuración -> Acerca del teléfono -> Número

de compilación (7 veces)

Page 3: Diseño de Interfaz Gráfica

En la carpeta res/layouts

Manipularemos el archivo fragment_main.xml

Sirve para definir qué se muestra en pantalla y cómo se muestra.

Suele estar ligado a un ‘Activity’… ◦ …Pero también pueden definirse módulos

independientes

Page 4: Diseño de Interfaz Gráfica

Jerárquicamente, se define: ◦ Un ‘contenedor’ (RelativeLayout – LinearLayout) ◦ Los elementos contenidos

<RelativeLayout (…)>

<TextView (…)/>

<Button (…) />

<EditText (…) />

<LinearLayout> (…) </LinearLayout>

</RelativeLayout>

Page 5: Diseño de Interfaz Gráfica

Permiten definir propiedades especiales de los elementos (tamaño, color, posición, …)

Algunos destacados… ◦ android:id: identificador único del elemento

(indispensable para que el contenido sea dinámico)

◦ android:layout_width: el ancho del elemento

◦ android:layout_height: el alto del elemento

◦ …y muchos otros que aprenderemos a medida que los necesitemos

Page 6: Diseño de Interfaz Gráfica

Simulador de un sistema de mensajes

El usuario escribe un mensaje

Al oprimir el botón enviar, se actualiza una lista de mensajes enviados en la pantalla

Al seleccionar el mensaje enviado, se muestra otra pantalla con el contenido del mensaje seleccionado

Page 7: Diseño de Interfaz Gráfica

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Texto de ejemplo" />

Texto ‘estático’ que se muestra en pantalla ◦ …pero puede ser modificado programáticamente

Page 8: Diseño de Interfaz Gráfica

<EditText

android:id="@+id/editText1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/button1"

android:layout_below="@+id/button1"

android:ems="10" >

<requestFocus />

</EditText>

Campo de texto modificable por el usuario (con el teclado del dispositivo)

Page 9: Diseño de Interfaz Gráfica

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/tvMessage"

android:layout_below="@+id/tvMessage"

android:text="Button"

android:onClick="actualizarListaDeMensajes" />

Botón para ejecutar acciones determinadas

La propiedad ‘android:onClick’ determina la acción que debe ejecutar el botón en cuestión (¿qué otro lenguaje descriptivo hace algo parecido?)

Page 10: Diseño de Interfaz Gráfica

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:orientation="vertical" >

</LinearLayout>

Permite agrupar varios elementos

Los elementos aparecen en el orden en que fueron agregados (vertical u horizontalmente)

Page 11: Diseño de Interfaz Gráfica

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

>

</RelativeLayout>

Agrupa varios elementos, y permite ubicarlos con respecto a los demás elementos contenidos en el mismo contenedor

Page 12: Diseño de Interfaz Gráfica

Mediante el archivo xml, es posible especificar la apariencia de la aplicación.

Sin embargo, los contenidos casi nunca son estáticos; en general se actualizan dinámicamente según lo que ocurra con la aplicación.

Para los elementos sean dinámicos, es necesario recurrir a la principal entidad de Android: ‘Activity’

Page 13: Diseño de Interfaz Gráfica

En el xml, se declara el siguiente elemento: <TextView

android:id="@+id/tvMensaje"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:text="Aquí van a aparecer los mensajes" />

En la clase MainActivity.java, para hacer referencia a este elemento, debemos inicializarlo de la siguiente forma:

TextView tvMensaje =

(TextView)findViewById(R.id.tvMensaje);

Page 14: Diseño de Interfaz Gráfica

Revisemos con cuidado: ◦ R.id.tvMensaje es un entero, que funciona como

identificador único para el elemento con id ‘tvMensaje’ en fragment_main.xml (¿recuerdan la clase R.java?)

◦ findViewById es un método que retorna un elemento de la clase View, que haya sido declarado en un layout con un id determinado

◦ Para que el elemento sea manipulable en Java, es indispensable inicializarlo con findViewById

Page 15: Diseño de Interfaz Gráfica

Muchas aplicaciones hacen uso de listas ◦ Mensajería, lista de canciones, lista de contactos,…

Android tiene varias maneras de construir listas, pero tal vez la más flexible es de tipo ‘ListView’. ◦ Uno de mis favoritos en Android

‘ListView’ extiende a la clase ‘ViewGroup’, y muestra elementos en una lista que puede desplazarse verticalmente.

Page 16: Diseño de Interfaz Gráfica

Necesitamos definir: ◦ Una estructura de datos que contiene la

información que se va a mostrar en la lista

Ej: Foto de perfil, mensaje, hora

◦ Un ‘layout’ para definir ‘cómo se ve’ cada elemento de la lista

◦ Un ‘adaptador’ para especificar cómo mostrar correctamente la información de la estructura de la base de datos en el ‘layout’ de cada elemento.

Page 17: Diseño de Interfaz Gráfica

Ej: ¿cuál es la mejor representación posible de una lista de mensajes, como estructura de datos?

Page 18: Diseño de Interfaz Gráfica

Se puede definir en un archivo .xml en la carpeta res/layout

Page 19: Diseño de Interfaz Gráfica

Implementa la clase ‘Adapter’

Requerido por una instancia de la clase ‘ListView’ para saber ‘qué información mostrar’ y ‘cómo’.

ListView lvEjemplo =

(ListView)findViewById(R.id.lvEjemplo);

lvEjemplo.setAdapter(new EjemploAdapter(…));

Page 20: Diseño de Interfaz Gráfica

Se puede asignar una acción a cada elemento de la lista.

Para eso, se asigna un ‘OnItemClickListener’ a la instancia de ListView

Page 21: Diseño de Interfaz Gráfica

lvEjemplo.setOnItemClickListener(new OnItemClickListener(

public void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

// Acciones aquí

}

));

Page 22: Diseño de Interfaz Gráfica

Un ‘Toast’ es un mensaje que aparece en pantalla y desaparece después de unos segundos. ◦ Se puede utilizar para depurar sin necesidad de

usar mensajes en la consola de Eclipse

Toast.makeText(getApplicationContext(), "Esto es un

mensaje", Toast.LENGTH_LONG).show();

Page 23: Diseño de Interfaz Gráfica

Cada ‘Activity’ tiene su propia información

◦ Ej: todos los mensajes que se han ‘enviado’

Supongamos que se quiere mostrar información detallada de uno de los mensajes seleccionados

Page 24: Diseño de Interfaz Gráfica

Se necesita otro ‘Activity’ para mostrar detalles.

Se necesita un mecanismo para mostrar los detalles del mensaje seleccionado.

‘Segundo Mensaje’

Page 25: Diseño de Interfaz Gráfica

En Android, ese enlace entre ‘Activities’ se llama ‘Intent’

‘Segundo Mensaje’

Intent

Page 26: Diseño de Interfaz Gráfica

Permite inicializar un ‘Activity’ a partir de otro ‘Activity’

Permite intercambiar información entre distintos ‘Activities’