diseño de interfaz gráfica
DESCRIPTION
Material AndroidTRANSCRIPT
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’