Instructor: Rodrigo Iván Fonseca Daza

Eclipse (no oficial) ◦ Uno de los más usados para programar en Java…

◦ … al que Google le quitó su apoyo

◦ https://www.infinum.co/the-capsized-eight/articles/eclipse-is-dead-for-android-development-and-i-helped-kill-it

Android Studio (oficial) ◦ Cada vez más estable…

◦ … Pero todavía un poco lento

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)

Crear una lista de mensajes, casi «desde ceros»

Muy sencillo, pero se explorará una parte importante de la lógica de las aplicaciones Android

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

<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’.

(Descargar archivo «CustomListAdapter.java» 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í

}

));