Successfully reported this slideshow.
PROGRAMACIÓN    MULTIDISPOSITIVO EN        ANDROID1   Juan Miguel Muñoz Rondán
BIBLIOGRAFÍA   Android in Action (Third Edition)       http://www.manning.com/ableson3/   Programming Android (2nd Edit...
ESTILOS (WINDOWS PHONE)
ESTILOS (IPHONE)
ESTILOS (ANDROID)
FRAGMENTACIÓN                6
FRAGMENTACIÓN: VERSIONES                  Abril 2013                               7
FRAGMENTACIÓN : PANTALLAS                            8
INDICE1.   Android 4.0, estandadarización de estilos.2.   Métricas.3.   Componentes multidispositivos: Action Bar.4.   Com...
ANDROID   4.0 ESTILOS10
ESTANDARIZACIÓN VISUAL                   Status Bar                   Action Bar                   Content Area           ...
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ÉTRICAS14
TAMAÑO Y DENSIDAD   Tamaño de pantalla     Es el tamaño real de la pantalla (inches) pulgadas.     La medida la proporc...
DENSITY-INDEPENDENT PIXELS   Dp (Density-Independent Pixels)       Representa un punto de tamaño real.       Independie...
CUALIFICADORES DE RECURSOS   Un cualificador indica a Android que tipo de    recurso debe utilizar.       Carpeta <resou...
CUALIFICADORES DE RECURSOS              -ldpi, -mdpi, -hdpi, -xdpi              -small, -normal, -large, -xlarge        ...
TIPOS DE TAMAÑO   Small      426dp x 320dp   Normal     470dp x 320dp   Large      640dp x 480dp   Xlarge (Extra La...
TIPOS DE DENSIDADES   ldpi                              2.0   1.5   1.0   0.75      Low density (~120dpi)   mdpi     M...
TABLA TAMAÑOS Y DENSIDADES                             21
ACTION BAR22
ACTION BAR             Main Action Bar             View controls                               23             Bottom Bar
ACTION BAR             Main Action Bar                               24
ACTION BAR : MAIN ACTION BAR   App icon     Icono de aplicación .     Proporciona una acceso a la      vista jerárquica...
ACTION BAR : MAIN ACTION BAR   View control     Permite la navegación      hacía las diferentes      vistas.     Tiene ...
ACTION BAR : MAIN ACTION BAR   Action buttons     Muestra iconos de las funciones más importantes.     Tres tipos de ic...
ACTION BAR : MAIN ACTION BAR   Action overflow     Muestra iconos de las      funciones menos      importantes.     Dep...
ACTION BAR: ACTION BUTTONS   Menos de 360dp = 2    iconos.   360-499dp = 3 iconos   500-599dp = 4 iconos   Más de 600d...
ACTION BAR             Main Action Bar             Tab Bar                               30
ACTION BAR : VIEW CONTROLS   Fixed Tab     Fácil mecanismo para cambiar de vista.     Siempre visibles.     Tres pesta...
ACTION BAR             Main Action Bar             View controls                               32             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: 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  ...
FRAGMENTS37
TABLET Mucho “aire” en las interfaces de usuario. Solución:       Esconder Vistas y mostrarlas desde una Activity Los ...
FRAGMENTS   Un Fragment se encarga de controlar el    comportamiento de una porción de la interfaz de    usuario de una A...
FRAGMENTS Tiene su propio ciclo de vida. Su ciclo de vida está totalmente ligado al ciclo de  vida de una Activity. Rec...
FRAGMENTS. CICLO DE VIDA              •   OnAtach.                   • Cuando el fragment es asociado a su                ...
FRAGMENTS. CICLO DE VIDA              • OnPause.                 • Cuando el fragment ha dejado de                   inter...
FRAGMENTS. ASOCIAR A LA ACTIVITY   Mediante XML:      <?xml version="1.0" encoding="utf-8"?>      <LinearLayout xmlns:and...
FRAGMENTS. ASOCIAR A LA ACTIVITY   Programáticamente con Fragment Manager      <LinearLayout xmlns:android="http://schema...
FRAGMENTS.TIPOS Fragment ListFragment       Fragment con métodos para la visualización de una        lista de elementos...
FRAGMENTS. COMUNICACIÓN   Utilizando un listener       public interface OnArticleSelectedListener {          public void ...
FRAGMENTS. COMUNICACIÓN   La activity padre debe implementar la intefaz del    listener y operar cuando se llame al liste...
SOPORTE PARA VERSIONES ANTIGUAS   El uso de Fragments apareció en la versión 3.0.   Más de la mitad de los dispositivos ...
FRAGMENTS. RECOMENDACIONES No utilizar asociaciones de Fragments  programáticas o dínamicas en XML <fragments> No utiliz...
TÉCNICAS PARA EL DESARROLLO50     MULTIDISPOSITIVO EN ANDROID
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    d...
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                                        ...
MULTI-PANE LAYOUTS Mecanismo de integración de varias vistas para  adaptarse a los diferentes tamaños de pantallas. Tipo...
GRACIAS POR SU ATENCIÓN57     juanminet@gmail.com     jmmunoz@paradigmatecnologico.com
Upcoming SlideShare
Loading in …5
×

Programación multidispositivo en android paradigma juan miguel muñoz rondán

955 views

Published on

http://www.paradigmatecnologico.com/seminarios/programacion-multidispositivo-en-android/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Programación multidispositivo en android paradigma juan miguel muñoz rondán

  1. 1. PROGRAMACIÓN MULTIDISPOSITIVO EN ANDROID1 Juan Miguel Muñoz Rondán
  2. 2. 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
  3. 3. ESTILOS (WINDOWS PHONE)
  4. 4. ESTILOS (IPHONE)
  5. 5. ESTILOS (ANDROID)
  6. 6. FRAGMENTACIÓN 6
  7. 7. FRAGMENTACIÓN: VERSIONES Abril 2013 7
  8. 8. FRAGMENTACIÓN : PANTALLAS 8
  9. 9. INDICE1. 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
  10. 10. ANDROID 4.0 ESTILOS10
  11. 11. ESTANDARIZACIÓN VISUAL Status Bar Action Bar Content Area 11 Navigation Bar
  12. 12. ESTANDARIZACIÓN VISUAL Usar elementos de Android (no imitar a otras plataformas) No utilizar botón “back”
  13. 13. ESTANDARIZACIÓN VISUAL No utilizar TabBars en la parte baja de la pantalla. No usar icono “arrow”
  14. 14. MÉTRICAS14
  15. 15. 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
  16. 16. 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 16  Indicado para los textos.
  17. 17. 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
  18. 18. CUALIFICADORES DE RECURSOS  -ldpi, -mdpi, -hdpi, -xdpi  -small, -normal, -large, -xlarge  -land, -port  -sw<N>dp (-sw600dp, -sw720dp) 18
  19. 19. TIPOS DE TAMAÑO Small  426dp x 320dp Normal  470dp x 320dp Large  640dp x 480dp Xlarge (Extra Large)  960dp x 720 19
  20. 20. TIPOS DE DENSIDADES ldpi 2.0 1.5 1.0 0.75  Low density (~120dpi) mdpi  Medium density (~160dpi) hdpi  High density (~240dpi) xhdpi Patrón “48dp”  Extra high density (~320dpi) Xxhdpi  Extra extra high density  Densidad no especificada (~480dpi) 20
  21. 21. TABLA TAMAÑOS Y DENSIDADES 21
  22. 22. ACTION BAR22
  23. 23. ACTION BAR Main Action Bar View controls 23 Bottom Bar
  24. 24. ACTION BAR Main Action Bar 24
  25. 25. ACTION BAR : MAIN ACTION BAR 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. 25
  26. 26. ACTION BAR : MAIN ACTION BAR 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 26 tabs.
  27. 27. ACTION BAR : MAIN ACTION BAR 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. 27
  28. 28. ACTION BAR : MAIN ACTION BAR 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. 28
  29. 29. ACTION BAR: ACTION BUTTONS Menos de 360dp = 2 iconos. 360-499dp = 3 iconos 500-599dp = 4 iconos Más de 600dp = 5 iconos 29
  30. 30. ACTION BAR Main Action Bar Tab Bar 30
  31. 31. ACTION BAR : VIEW CONTROLS 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. 31
  32. 32. ACTION BAR Main Action Bar View controls 32 Bottom Bar
  33. 33. ACTION BAR: BOTTOM BAR Barra inferior, utilizada cuando se requiere mostrar más iconos que los que se permiten en el action bar. 33
  34. 34. ACTION BAR: COMPATIBILIDAD Dispositivos con “antiguo” botón menu. 34
  35. 35. ACTION BAR: COMPATIBILIDAD Aplicaciones con “antiguo” menu. 35
  36. 36. 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
  37. 37. FRAGMENTS37
  38. 38. 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
  39. 39. FRAGMENTS Un Fragment se encarga de controlar el comportamiento de una porción de la interfaz de usuario de una Activity. 39
  40. 40. 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
  41. 41. 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 41 interactuar con el usuario
  42. 42. 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 42 estár asociado a la activity
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. FRAGMENTS. COMUNICACIÓN Utilizando un listener public interface OnArticleSelectedListener { public void onArticleSelected(String url); } 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
  47. 47. 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
  48. 48. 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. Android provee una biblioteca de soporte:  android.support.v4 (Soporte para v4 o superior).  android.support.v13 (Soporte para v13 o superior). 48
  49. 49. 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
  50. 50. TÉCNICAS PARA EL DESARROLLO50 MULTIDISPOSITIVO EN ANDROID
  51. 51. SOPORTE PARA TABLETS Y MÓVILES 51
  52. 52. 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
  53. 53. SOPORTE PARA TABLETS Y MÓVILES res/layout/main.xml 53
  54. 54. SOPORTE PARA TABLETS Y MÓVILES res/layout-large/main.xml 54
  55. 55. SOPORTE PARA TABLETS Y MÓVILES Ejecución de código según el tipo de dispositivo 55
  56. 56. 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
  57. 57. GRACIAS POR SU ATENCIÓN57 juanminet@gmail.com jmmunoz@paradigmatecnologico.com

×