curso android tema 3

Android
Elementos de la
interfaz gráfica
Yésica Hernández
Jorge Frank
Cesar Aguirre

Comprobando el ciclo de vida
de un Activity

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.


Un mundo de
posibilidades
para combinar y
crear

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.

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.


Get Menu Button

Muestra el menú que esté programado
en esa Activity, si no existe no hace
nada.


Home Button

Este permite salir de la Activity en la que
se encuentra y mostrar la pantalla de
home del dispositivo.

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

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

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.

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


A través de la combinación de Views
vamos hacer la creación de las interfaces
de usuario.

Elementos de la interfaz gráfica Todos
heredan
propiedades
de View

Elementos visuales

Recuerden que
un Widget
también es una
Vista.

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.

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.

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>

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

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

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.

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

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

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

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

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.

Menús

Se destina un archivo para cada uno
guardado en la carpeta de res/menu

 Context Menú

 Options menu

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,


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


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

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


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.

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


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

curso android tema 3

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a curso android tema 3

Semelhante a curso android tema 3 (20)

curso android tema 3