Diseño de Interfaz Gráfica

Post on 09-Dec-2015

246 views 8 download

description

Material Android

Transcript of Diseño de Interfaz Gráfica

Instructor: Rodrigo Iván Fonseca Daza

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)

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

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

<RelativeLayout (…)>

<TextView (…)/>

<Button (…) />

<EditText (…) />

<LinearLayout> (…) </LinearLayout>

</RelativeLayout>

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

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

<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

<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)

<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?)

<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)

<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

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’

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);

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

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.

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.

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

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

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(…));

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

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

lvEjemplo.setOnItemClickListener(new OnItemClickListener(

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

int position, long id) {

// Acciones aquí

}

));

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();

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

Se necesita otro ‘Activity’ para mostrar detalles.

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

‘Segundo Mensaje’

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

‘Segundo Mensaje’

Intent

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

Permite intercambiar información entre distintos ‘Activities’