Slide 1

Slide 1 text

PROGRAMACIÓN MULTIDISPOSITIVO EN ANDROID Juan Miguel Muñoz Rondán 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ESTILOS (WINDOWS PHONE)

Slide 4

Slide 4 text

ESTILOS (IPHONE)

Slide 5

Slide 5 text

ESTILOS (ANDROID)

Slide 6

Slide 6 text

FRAGMENTACIÓN 6

Slide 7

Slide 7 text

FRAGMENTACIÓN: VERSIONES Abril 2013 7

Slide 8

Slide 8 text

FRAGMENTACIÓN : PANTALLAS 8

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ANDROID 4.0 ESTILOS 10

Slide 11

Slide 11 text

ESTANDARIZACIÓN VISUAL 11 Status Bar Action Bar Content Area Navigation Bar

Slide 12

Slide 12 text

ESTANDARIZACIÓN VISUAL  Usar elementos de Android (no imitar a otras plataformas)  No utilizar botón “back”

Slide 13

Slide 13 text

ESTANDARIZACIÓN VISUAL  No utilizar TabBars en la parte baja de la pantalla.  No usar icono “arrow”

Slide 14

Slide 14 text

MÉTRICAS 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

CUALIFICADORES DE RECURSOS  Un cualificador indica a Android que tipo de recurso debe utilizar.  Carpeta -  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

Slide 18

Slide 18 text

CUALIFICADORES DE RECURSOS 18  -ldpi, -mdpi, -hdpi, -xdpi  -small, -normal, -large, -xlarge  -land, -port  -swdp (-sw600dp, -sw720dp)

Slide 19

Slide 19 text

TIPOS DE TAMAÑO  Small  426dp x 320dp  Normal  470dp x 320dp  Large  640dp x 480dp  Xlarge (Extra Large)  960dp x 720 19

Slide 20

Slide 20 text

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”

Slide 21

Slide 21 text

TABLA TAMAÑOS Y DENSIDADES 21

Slide 22

Slide 22 text

ACTION BAR 22

Slide 23

Slide 23 text

ACTION BAR Main Action Bar 23 View controls Bottom Bar

Slide 24

Slide 24 text

ACTION BAR Main Action Bar 24

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

ACTION BAR: ACTION BUTTONS 29  Menos de 360dp = 2 iconos.  360-499dp = 3 iconos  500-599dp = 4 iconos  Más de 600dp = 5 iconos

Slide 30

Slide 30 text

ACTION BAR Main Action Bar 30 Tab Bar

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

ACTION BAR Main Action Bar 32 View controls Bottom Bar

Slide 33

Slide 33 text

ACTION BAR: BOTTOM BAR  Barra inferior, utilizada cuando se requiere mostrar más iconos que los que se permiten en el action bar. 33

Slide 34

Slide 34 text

ACTION BAR: COMPATIBILIDAD  Dispositivos con “antiguo” botón menu. 34

Slide 35

Slide 35 text

ACTION BAR: COMPATIBILIDAD  Aplicaciones con “antiguo” menu. 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

FRAGMENTS 37

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

FRAGMENTS  Un Fragment se encarga de controlar el comportamiento de una porción de la interfaz de usuario de una Activity. 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

FRAGMENTS. ASOCIAR A LA ACTIVITY  Mediante XML: 43

Slide 44

Slide 44 text

FRAGMENTS. ASOCIAR A LA ACTIVITY  Programáticamente con Fragment Manager ExampleFragment exampleEragment = new ExampleFragment(); FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction transacion = fragmentManager.beginTransaction(); transacion.add( R.id.frameFragment1, exampleEragment ); transaction.addToBackStack(null); transacion.commit(); 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

FRAGMENTS. RECOMENDACIONES  No utilizar asociaciones de Fragments programáticas o dínamicas en XML  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

Slide 50

Slide 50 text

TÉCNICAS PARA EL DESARROLLO MULTIDISPOSITIVO EN ANDROID 50

Slide 51

Slide 51 text

SOPORTE PARA TABLETS Y MÓVILES 51

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

SOPORTE PARA TABLETS Y MÓVILES  res/layout/main.xml 53

Slide 54

Slide 54 text

SOPORTE PARA TABLETS Y MÓVILES  res/layout-large/main.xml 54

Slide 55

Slide 55 text

SOPORTE PARA TABLETS Y MÓVILES  Ejecución de código según el tipo de dispositivo 55

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

GRACIAS POR SU ATENCIÓN 57 [email protected] [email protected]