curso android tema 3

Android

Elementos de la interfaz gráfica

Yésica Hernández

Jorge Frank Cesar Aguirre

Repaso

¬¬

El primer proyecto en Android

Comprobando el ciclo de vida

de un Activity


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.

Escritorio


Un mundo de posibilidades

para combinar y crear


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.

Escritorio


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.

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.



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.

Pantalla Home

Soy un app

widget

Soy un live

wallpaper

El uso de los app widgets varia en cada dispositivo


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 Views


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

Elementos básicos Widgets

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 visuales

Todos heredan

propiedades de View

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.


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>


Ejemplo

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


¿Por qué layouts en xml y no en código?

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


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

}


Usando layouts

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


Widgets

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


View Group

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

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

package curso.ejemplo.ids; import android.app.Activity; 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); } }

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/an

droid" android:id="@+id/root" android:orientation="vertical" android:background="@drawable/lt_gray" android:layout_width="fill_parent" android:layout_height="wrap_content"> ... otros elementos.... </LinearLayout>

Estructura xml que define id

Referencia en el código del id


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

Documents

Transcript of curso android tema 3