diseño de interfaz gráfica.pdf
TRANSCRIPT
![Page 1: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/1.jpg)
Instructor: Rodrigo Iván Fonseca Daza
![Page 2: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/2.jpg)
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
![Page 3: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/3.jpg)
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 4: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/4.jpg)
![Page 5: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/5.jpg)
![Page 6: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/6.jpg)
Crear una lista de mensajes, casi «desde ceros»
Muy sencillo, pero se explorará una parte importante de la lógica de las aplicaciones Android
![Page 7: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/7.jpg)
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 8: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/8.jpg)
Jerárquicamente, se define: ◦ Un ‘contenedor’ (RelativeLayout – LinearLayout) ◦ Los elementos contenidos
<RelativeLayout (…)>
<TextView (…)/>
<Button (…) />
<EditText (…) />
<LinearLayout> (…) </LinearLayout>
</RelativeLayout>
![Page 9: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/9.jpg)
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 10: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/10.jpg)
<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 11: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/11.jpg)
<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 12: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/12.jpg)
<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 13: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/13.jpg)
<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 14: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/14.jpg)
<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 15: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/15.jpg)
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 16: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/16.jpg)
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 17: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/17.jpg)
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 18: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/18.jpg)
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 19: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/19.jpg)
![Page 20: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/20.jpg)
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 21: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/21.jpg)
Ej: ¿cuál es la mejor representación posible de una lista de mensajes, como estructura de datos?
![Page 22: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/22.jpg)
Se puede definir en un archivo .xml en la carpeta res/layout
![Page 23: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/23.jpg)
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(…));
![Page 24: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/24.jpg)
Se puede asignar una acción a cada elemento de la lista.
Para eso, se asigna un ‘OnItemClickListener’ a la instancia de ListView
![Page 25: Diseño de interfaz gráfica.pdf](https://reader034.vdocuments.co/reader034/viewer/2022051218/55cf85c4550346484b9138be/html5/thumbnails/25.jpg)
lvEjemplo.setOnItemClickListener(new OnItemClickListener(
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// Acciones aquí
}
));