PROGRAMACIÓN

MULTIDISPOSITIVO EN ANDROID Juan Miguel Muñoz Rondán

1

BIBLIOGRAFÍA

Android in Action (Third Edition)

http://www.manning.com/ableson3/

Programming Android (2nd Edition)

http://shop.oreilly.com/product/0636920010364.do

Android developers

http://developer.android.com/index.html

2

ESTILOS (WINDOWS PHONE)

ESTILOS (IPHONE)

ESTILOS (ANDROID)

FRAGMENTACIÓN

6

FRAGMENTACIÓN: VERSIONES

Abril 2013

7

FRAGMENTACIÓN : PANTALLAS

8

INDICE

1. Android 4.0, estandadarización de estilos.

2. Métricas.

3. Componentes multidispositivos: Action Bar.

4. Componentes para la programación para

tablets: Fragments.

5. Patrones para la programación multidispositivo.

9

ANDROID 4.0 ESTILOS

10

ESTANDARIZACIÓN VISUAL

11

Status Bar

Action Bar

Content Area

Navigation Bar

ESTANDARIZACIÓN VISUAL

Usar elementos de Android

(no imitar a otras plataformas)

No utilizar botón “back”

ESTANDARIZACIÓN VISUAL

No utilizar TabBars en la

parte baja de la pantalla.

No usar icono “arrow”

MÉTRICAS

14

TAMAÑO Y DENSIDAD

Tamaño de pantalla

Es el tamaño real de la pantalla (inches) pulgadas.

La medida la proporciona la diagonal.

Densidad

Cantidad de pixeles dentro de una porción real.

Se utiliza dpi (dots per inch) puntos por pulgada.

15

DENSITY-INDEPENDENT PIXELS

Dp (Density-Independent Pixels)

Representa un punto de tamaño real.

Independiente de la densidad de puntos por pulgada.

1dp = 1px (mdpi)

Sp (Scale-independent Pixels)

Como dp, salvo que su tamaño depende del tamaño de la fuente en la preferencias

Indicado para los textos. 16

CUALIFICADORES DE RECURSOS

Un cualificador indica a Android que tipo de

recurso debe utilizar.

Carpeta <resources_name>-<config_qualifier>

Resources_name es el nombre del directorio de recursos

estandar (layout, drawable).

Config_qualifier especifica una característica para que se

utilice esta carpeta en los dispositivos que lo cumplan

17

CUALIFICADORES DE RECURSOS

18

-ldpi, -mdpi, -hdpi, -xdpi

-small, -normal, -large, -xlarge

-land, -port

-sw<N>dp (-sw600dp, -sw720dp)

TIPOS DE TAMAÑO

Small

426dp x 320dp

Normal

470dp x 320dp

Large

640dp x 480dp

Xlarge (Extra Large)

960dp x 720

19

TIPOS DE DENSIDADES

20

ldpi

Low density (~120dpi)

mdpi

Medium density (~160dpi)

hdpi

High density (~240dpi)

xhdpi

Extra high density (~320dpi)

Xxhdpi

Extra extra high density

Densidad no especificada

(~480dpi)

2.0 1.5 1.0 0.75

Patrón “48dp”

TABLA TAMAÑOS Y DENSIDADES

21

ACTION BAR

22

ACTION BAR

Main Action Bar

23

View controls

Bottom Bar

ACTION BAR

Main Action Bar

24

ACTION BAR : MAIN ACTION BAR

25

App icon

Icono de aplicación .

Proporciona una acceso a la

vista jerárquicamente superior.

Aunque parecido, el botón

“back” no vuelve a la vista

jerárquicamente superior, sino

a la vista anterior.

ACTION BAR : MAIN ACTION BAR

26

View control

Permite la navegación

hacía las diferentes

vistas.

Tiene el nombre de la

vista actual.

Además del spinner

existe la navegación por

tabs.

ACTION BAR : MAIN ACTION BAR

27

Action buttons

Muestra iconos de las funciones más importantes.

Tres tipos de iconos:

Frecuentes. Siempre aparecen.

Importantes. Aparecen si hay espacio

Típico. No aparecerá nunca y se ubicaran en la

lista de botones poco frecuentes.

ACTION BAR : MAIN ACTION BAR

28

Action overflow

Muestra iconos de las funciones menos importantes.

Dependiendo del tamaño y de la orientación del dispositivo se mostrarán más o menos iconos.

ACTION BAR: ACTION BUTTONS

29

Menos de 360dp = 2

iconos.

360-499dp = 3 iconos

500-599dp = 4 iconos

Más de 600dp = 5

iconos

ACTION BAR

Main Action Bar

30

Tab Bar

ACTION BAR : VIEW CONTROLS

31

Fixed Tab

Fácil mecanismo para cambiar de vista.

Siempre visibles.

Tres pestañas recomendadas.

Scrolled Tab

Se usan cuando hay muchas vistas disponibles.

Ocupan todo el ancho de pantalla

Spiner

Es un menu drop-down.

No hay una barra visible.

Ocupan menos espacio.

ACTION BAR

Main Action Bar

32

View controls

Bottom Bar

ACTION BAR: BOTTOM BAR

Barra inferior, utilizada cuando se requiere

mostrar más iconos que los que se permiten en el

action bar.

33

ACTION BAR: COMPATIBILIDAD

Dispositivos con “antiguo” botón menu.

34

ACTION BAR: COMPATIBILIDAD

Aplicaciones con “antiguo” menu.

35

ACTION BAR

Aporta:

Uso intuitivo de la aplicación.

Desarrollo para diferentes dispositivos (teléfonos o

tablets), mucho más rápido y sencillo.

Hacen las interfaces Android más atractivas y

homogéneas.

36

FRAGMENTS

37

TABLET

Mucho “aire” en las interfaces de usuario.

Solución:

Esconder Vistas y mostrarlas desde una Activity

Los desarrolladores demandaban una solución con un

comportamiento consistente.

Elementos reutilizables

Fragments

38

FRAGMENTS

Un Fragment se encarga de controlar el

comportamiento de una porción de la interfaz de

usuario de una Activity.

39

FRAGMENTS

Tiene su propio ciclo de vida.

Su ciclo de vida está totalmente ligado al ciclo de

vida de una Activity.

Recibe eventos de entrada.

No tienen contexto propio. Su contexto es el de la

activity a la que están ligados.

Se podría definir como una “sub-activity”.

40

FRAGMENTS. CICLO DE VIDA

• OnAtach.

• Cuando el fragment es asociado a su activity.

• onCreate.

• Estado inicial de la creación del fragment.

• onCreateView.

• Cuando el fragment se le ha asociado la vista.

• onActivityCreated.

• Cuando la activity padre ha competado su propio onCreate().

• onStart.

• Cuando el fragment esta visible.

• onResume.

• Cuando la fragmente puede interactuar con el usuario

41

FRAGMENTS. CICLO DE VIDA

• OnPause.

• Cuando el fragment ha dejado de interactuar con el usuario

• onStop.

• Cuando el fragment ya no es visible por el usuario

• onDestroyView.

• Cuando el fragment limpia los recursos asociados con su vista.

• onDestroy.

• Estado final del fragment.

• onDetach.

• Se llama justo antes de dejar de estár asociado a la activity 42

FRAGMENTS. ASOCIAR A LA ACTIVITY

Mediante XML:

<?xml version="1.0" encoding="utf-8"?>

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

android:id="@+id/main_view"

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent">

<fragment

class="com.paradigma.seminario.ListFragment"

android:id="@+id/frag_summary_listview"

android:tag="summary_listview"

android:layout_width=" match_parent "

android:layout_height="match_parent"

android:layout_weight="1"

android:padding="10dp"

/>

</LinearLayout>

43

FRAGMENTS. ASOCIAR A LA ACTIVITY

Programáticamente con Fragment Manager

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android”

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="match_parent">

<FrameLayout

android:id="@+id/frame_fragment”

android:layout_width="0dp"

android:layout_height="match_parent"

/>

</LinearLayout>

ExampleFragment exampleEragment = new ExampleFragment();

FragmentManager fragmentManager = getFragmentManager();

FragmentTransaction transacion = fragmentManager.beginTransaction();

transacion.add( R.id.frameFragment1, exampleEragment );

transaction.addToBackStack(null);

transacion.commit(); 44

FRAGMENTS.TIPOS

Fragment

ListFragment

Fragment con métodos para la visualización de una

lista de elementos.

WebFragment

Fragment para visualizar una web.

DialogFragment

Fragment para un dialog.

PreferenceFragment

Muestra una lista de objetos por categorías.

45

FRAGMENTS. COMUNICACIÓN

Utilizando un listener

public class SummaryListFragment extends ListFragment {

OnArticleSelectedListener mListener;

…

@Override

public void onAttach(Activity activity) {

super.onAttach(activity);

try { mListener = (OnArticleSelectedListener) activity;

} catch (ClassCastException e) {

throws …

}

} 46

public interface OnArticleSelectedListener {

public void onArticleSelected(String url);

}

FRAGMENTS. COMUNICACIÓN

La activity padre debe implementar la intefaz del

listener y operar cuando se llame al listener.

public class MainActivity extends Activity

implements SummaryListFragment.OnArticleSelectedListener{

…

@Override

public void onArticleSelected(String url_selected) {

current_url = url_selected;

launchDetailWebFragment();

}

47

SOPORTE PARA VERSIONES ANTIGUAS

El uso de Fragments apareció en la versión 3.0.

Más de la mitad de los dispositivos funcionan sobre una

versión anterior a la 3.0.

48

Android provee una biblioteca de soporte:

android.support.v4 (Soporte para v4 o superior).

android.support.v13 (Soporte para v13 o superior).

FRAGMENTS. RECOMENDACIONES

No utilizar asociaciones de Fragments

programáticas o dínamicas en XML <fragments>

No utilizar constructores con parámetros, todos

deben ser sin parámetros.

Reutilizar Fragments.

No es recomendable el uso de “Fragments para

todo”. Si la aplicación es solo para móvil, debería

construirse utilizando únicamente activities.

49

TÉCNICAS PARA EL DESARROLLO

MULTIDISPOSITIVO EN ANDROID 50

SOPORTE PARA TABLETS Y MÓVILES

51

SOPORTE PARA TABLETS Y MÓVILES

Uso de cualificadores para determinar en

tiempo de ejecución los recursos de los

distintos tipos de dispositivos.

Recursos distintos dependiendo del dispositivo

en tiempo real.

res/values-large/layouts.xml

res/values/layouts.xml

52

SOPORTE PARA TABLETS Y MÓVILES

res/layout/main.xml

53

SOPORTE PARA TABLETS Y MÓVILES

res/layout-large/main.xml

54

SOPORTE PARA TABLETS Y MÓVILES

Ejecución de código según el tipo de dispositivo

55

MULTI-PANE LAYOUTS

Mecanismo de integración de varias vistas para

adaptarse a los diferentes tamaños de pantallas.

Tipos:

Adaptación

Collapse

Show/Hide

GRACIAS POR SU ATENCIÓN 57

juanminet@gmail.com

jmmunoz@paradigmatecnologico.com