5. Elementos de la interfaz gráfica
Escritorio
Existen diferentes elementos que permiten al
usuario interactuar con nuestras aplicaciones y
suministrar servicios adicionales, además algunas
de estos permiten mejorar el aspecto de nuestras
aplicaciones enriqueciéndolas.
6. Elementos de la interfaz gráfica
Un mundo de
posibilidades
para combinar y
crear
7. Elementos de la interfaz gráfica
Escritorio
Existen diferentes elementos que permiten al
usuario interactuar con nuestras aplicaciones y
suministrar servicios adicionales, además algunas
de estos permiten mejorar el aspecto de nuestras
aplicaciones enriqueciéndolas.
8. Elementos de la interfaz gráfica
Pantalla Home
En todos los dispositivos existe una
pantalla de home donde la mayoría de
la veces es personalizable estos e
hace a través de componentes
dinámicos de aplicaciones, estos
proveen una ventana a nuestras
aplicaciones u ofrecen información
directamente en la pantalla Home.
9. Botones físicos de la UI y su
interacción
Back Button
Por defecto regresa a la actividad
anterior
Se pueden programar eventos en caso
que se presione y que tenga un
comportamiento diferente.
10. Elementos de la interfaz gráfica
Get Menu Button
Muestra el menú que esté programado
en esa Activity, si no existe no hace
nada.
11. Elementos de la interfaz gráfica
Home Button
Este permite salir de la Activity en la que
se encuentra y mostrar la pantalla de
home del dispositivo.
12. Elementos de la interfaz gráfica
Pantalla Home
Existen diferentes tipos:
Live Wallpaper – Fondo de pantalla animado e
interactivo.
App widget – Es un componente de una aplicación el
cual permite mostrar información en pantalla o echar un
vistazo a la aplicación e interactuar con esta.
El uso de los app Soy un
widgets varia en Soy un app
cada dispositivo live widget
wallpaper
13. Elementos de la interfaz gráfica
Elementos básicos Views
Una Vista es un elemento básico de la interfaz del usuario,
estas son áreas rectangulares responsables del dibujado y
manejo de eventos. Podrían verse como los controles
básicos.
por ejemplo :
ContextMenu
Menu
View
SurfaceView
14. Elementos de la interfaz gráfica
Elementos básicos Widgets
Un widget es un elemento de interfaz de usuario más
avanzado, los podemos ver como los controles con los que el
usuario interactúa.
Por ejemplo:
Button
CheckBox
DatePicker
RelativeLayout
La lista completa
está en la
documentación.
15. Elementos de la interfaz gráfica
Creando interfaces de usuario
Es vital crear interfaces intuitivas y
atractivas para nuestras aplicaciones.
Asegurándonos que es fácil de usar
conforme se usa (esto debe ser prioritario
en el diseño).
16. Elementos de la interfaz gráfica
Creando interfaces de usuario
A través de la combinación de Views
vamos hacer la creación de las interfaces
de usuario.
17. Elementos de la interfaz gráfica Todos
heredan
propiedades
de View
Elementos visuales
Recuerden que
un Widget
también es una
Vista.
18. Elementos de la interfaz gráfica
Layout managers (layouts)
Son una extensión de la clase ViewGroup usada para
posicionar los controles hijo de nuestra UI.
Estas pueden ser anidadas para crear interfaces complejas y
arbitrarias
La manera más común de definir tus diseños y expresar la
jerarquia de la vista es con un archivo de diseño XML. Los
archivos XML ofrecen un estructura que es fácil de leer por el
humano (muy parecida a HTML). Cada elemento en un XMl es
un View o un objeto ViewGroup (o un descendiente). Los
objetos Views son hojas de árbol y los objetos ViewGroup son
ramas.
19. Elementos de la interfaz gráfica
Layout
El nombre de un elemento de XML es respectivo al
nombre de la clase Java que representa. Entonces
un elemento<TextView> crea un TextView en tu UI,
y un elemento <LinearLayout> crea un
LinearLayout view group. Cuando ustedes cargan
un un recurso de layout, el sistema Android inicializa
estos objetos correspondientes en los elementos del
layout.
20. Elementos de la interfaz gráfica
Ejemplo
Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
21. Elementos de la interfaz gráfica
¿Por qué layouts en xml y no en código?
Usar un layout a través de recursos separa la
lógica de la capa de aplicación de la capa de
presentación dando la flexibilidad de cambiar
la presentación. Esto da la posibilidad de en
caso de cambiar la capa presentación no se
toque el código (Optimización para diferentes
configuraciones de hardware).
22. Elementos de la interfaz gráfica
Optimizando Layouts
• Evitar anidado inecesario:No poner un layout
dentro de otra a no ser que sea enecesario,
estas requieren tiempo para ‘’inflarse’’
• Evitar usar demasiadas vistas: Cada vista en un
layout quita tiempo y recursos (más de 80 vistas
el tiempo se vuelve significativo).
• Evitar anidado profundo: Es buena práctica de
programación anidar a menos de 10 niveles
23. Elementos de la interfaz gráfica
Usando layouts
Definiendo lo que se mostrará en el Activity
Las Activities son la ventana donde serán mostradas nuestras
interfaces de usuario. Para asignar la interface a desplegar
usamos setContentView.
setContentView Acepta directamente el id de un recurso o la
instancia de una vista.
24. Elementos de la interfaz gráfica
Usando layouts
@Override
public void onCreate(Bundle
savedInstanceState) {
/*Se carga en donde el activity había sido
dejada*/
super.onCreate(savedInstanceState);
//Definimos la vista a desplegar
setContentView(R.layout.main);
}
25. Elementos de la interfaz gráfica
Usando layouts
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
TextView myTextView = new TextView(this);
setContentView(myTextView);
//Definimos atributos de la vista
myTextView.setText("Hello, Android");
}
26. Elementos de la interfaz gráfica
Widgets
Android Widget Toolbox
Android provee de un conjunto de Views para
ayudarnos a crear interfaces simples (y modificarlos o
extenderlos como sea necesario).
Puede que en alguna situación ninguno de los widgets
provistos por Android cumpla nuestras necesidades
pero nuevas vistas pueden ser creadas por nosotros.
Ejemplos de muchas vistas ¡YAY!
http://developer.android.com/guide/tutorials/views/index
.html
27. Elementos de la interfaz gráfica
View Group
View Group es una vista especial que puede
contener otras vistas (hijo). El View Group es
la clase base para layouts y views containers.
Vean los View Groups más utilizados!
http://developer.android.com/guide/topics/ui/layout-
objects.html
28. Elementos de la interfaz gráfica
Menús
Un menú contiene un conjunto de comandos
que están normalmente escondidos. Los
comandos de un menú proveen medios para
realizar operaciones, navegación, etc.
29. Elementos de la interfaz gráfica
Menús
Se destina un archivo para cada uno
guardado en la carpeta de res/menu
Context Menú
Options menu
30. Elementos de la interfaz gráfica
Dialogs
Son una pequeña ventana que aparece enfrente
de la Activity actual. La Activity que está debaja
pierde el foco y el dialogo acepta toda la
interacción del usuario.
Estos son usados para interrumpir al usuario o
hacer algunas tareas simples como un login
prompt o una progress bar,
31. Elementos de la interfaz gráfica
Creando interfaces de usuario
Notifications
Algunas notificaciones requieren respuesta del usuario
otras no.
• Toast Notification Para breves mensajes que vienen de
algo en segundo plano.
• Status Bar Notification Recordatorios persistentes que
vienen del segundo plano y requieren la atención del
usuario.
• Dialog Notification Para notificaciones relacionadas
con la Activity actual
32. Elementos de la interfaz gráfica
Creando interfaces de usuario
Manipular elementos por código
Para hacer la manipulación de vistas en Android,
necesitamos crear una instancia del objeto que vamos a
modificar, para hacer referencia a esta usamos el id del
elemento.
Elemento miElementoX = (Elemento)findViewById(R.id.X);
33. Elementos de la interfaz gráfica
Programando en Android
Elementos visuales
<LinearLayout
Estructura xml
xmlns:android="http://schemas.android.com/apk/res/an
que define id
droid"
android:id="@+id/root"
Referencia en android:orientation="vertical"
el código del id android:background="@drawable/lt_gray"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
package curso.ejemplo.ids; ... otros elementos....
import android.app.Activity; </LinearLayout>
import android.os.Bundle;
public class AndroidDemo extends Activity {
private LinearLayout root;
@Override public void onCreate(Bundle state) {
super.onCreate(state);
setContentView(R.layout.main);
root = (LinearLayout) findViewById(R.id.root);
}
}
34. Elementos de la interfaz gráfica
Listeners
En Android existen varias maneras de
interceptar eventos para alguna interacción
con el usuario. Cuando consideramos
eventos en la interfaz de usuario el
acercamiento es capturar el evento desde el
View object con el que el usuario interactúe.
35. Elementos de la interfaz gráfica
Listeners
La clase View contiene una interfaz que contiene
los métodos de listening los cuales serán
llamados por el framework de Android cuando
algún listener haya sido lanzado.
onClick()
onLongClick()
onFocusChange
onKey()
onTouch()
onCreateContextMenu()
36. Elementos de la interfaz gráfica
Creando interfaces de usuario
Listeners
final Button button = (Button)
findViewById(R.id.button);
button.setOnClickListener(new
OnClickListener() {
public void onClick(View v) {
// Perform action on clicks
NombActivity, "Beep Bop",
Toast.LENGTH_SHORT).show();
}
});