$30 off During Our Annual Pro Sale. View Details »

PROGRAMACIÓN MULTIDISPOSITIVO EN ANDROID

Paradigma
April 23, 2013

PROGRAMACIÓN MULTIDISPOSITIVO EN ANDROID

Seminario impartido por Juan Miguel Muñoz Rondán para Javahispano y Paradigma Tecnologico en la Universidad CEU San Pablo de Madrid, Abril 2013
Más detalles en http://www.paradigmatecnologico.com/seminarios/programacion-multidispositivo-en-android/

Paradigma

April 23, 2013
Tweet

More Decks by Paradigma

Other Decks in Technology

Transcript

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

  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. ESTILOS (WINDOWS PHONE)

  4. ESTILOS (IPHONE)

  5. ESTILOS (ANDROID)

  6. FRAGMENTACIÓN 6

  7. FRAGMENTACIÓN: VERSIONES Abril 2013 7

  8. FRAGMENTACIÓN : PANTALLAS 8

  9. 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
  10. ANDROID 4.0 ESTILOS 10

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

    Bar
  12. ESTANDARIZACIÓN VISUAL  Usar elementos de Android (no imitar a

    otras plataformas)  No utilizar botón “back”
  13. ESTANDARIZACIÓN VISUAL  No utilizar TabBars en la parte baja

    de la pantalla.  No usar icono “arrow”
  14. MÉTRICAS 14

  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. 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
  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. CUALIFICADORES DE RECURSOS 18  -ldpi, -mdpi, -hdpi, -xdpi 

    -small, -normal, -large, -xlarge  -land, -port  -sw<N>dp (-sw600dp, -sw720dp)
  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. 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”
  21. TABLA TAMAÑOS Y DENSIDADES 21

  22. ACTION BAR 22

  23. ACTION BAR Main Action Bar 23 View controls Bottom Bar

  24. ACTION BAR Main Action Bar 24

  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. ACTION BAR: ACTION BUTTONS 29  Menos de 360dp =

    2 iconos.  360-499dp = 3 iconos  500-599dp = 4 iconos  Más de 600dp = 5 iconos
  30. ACTION BAR Main Action Bar 30 Tab Bar

  31. 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.
  32. ACTION BAR Main Action Bar 32 View controls Bottom Bar

  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. ACTION BAR: COMPATIBILIDAD  Dispositivos con “antiguo” botón menu. 34

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

  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. FRAGMENTS 37

  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. FRAGMENTS  Un Fragment se encarga de controlar el comportamiento

    de una porción de la interfaz de usuario de una Activity. 39
  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. 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
  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 estár asociado a la activity 42
  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. 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. 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. 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); }
  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. 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).
  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. TÉCNICAS PARA EL DESARROLLO MULTIDISPOSITIVO EN ANDROID 50

  51. SOPORTE PARA TABLETS Y MÓVILES 51

  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. SOPORTE PARA TABLETS Y MÓVILES  res/layout/main.xml 53

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

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

    el tipo de dispositivo 55
  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. GRACIAS POR SU ATENCIÓN 57 juanminet@gmail.com jmmunoz@paradigmatecnologico.com