Charla devconf

953 views

Published on

Charla impartida en la DevCon 2012 organizada por Telefónica I+D sobre las causas de la fragmentación en Android y las soluciones existentes para minimizar su impacto

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
953
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Charla devconf

  1. 1. Patrones de Diseño en Android. La lucha por la standarizaciónJesús Gumiel (@jegumi) DevCon 2012
  2. 2. Índice• Introducción• Evolución de Android• Fragmentación• Patrones de diseño
  3. 3. Introducción
  4. 4. ¿Que es Android?
  5. 5. Los orígenes• Andi Rubin, considerado el Padre de Android.• Vicepresidente de Ingeniería supervisando el desarrollo de Android
  6. 6. La dulce historia del nombrado• Ejemplo de primera nomenclatura: M3-WB22-TC3.• Nombrado alfabético.• Basado en robots famosos: Astro boy, Bender.• Un product manager goloso: Petit Four• Los pastelitos ganan la batalla. http://source.android.com/source/overview.html
  7. 7. Evolución
  8. 8. Versiones
  9. 9. Gráfica distribución (Noviembre 2012)
  10. 10. Tabla distribución (Noviembre 2012)Versión Nombre Api Distribución1.5 Cupcake 3 0,1%1.6 Donut 4 0,3%2.1 Éclair 7 3,1%2.2 Froyo 8 12%2.3 - 2.3.2 Ginberbread 9 0,3%,2.3.3 – 2.3.7 10 53,9%3.1 Honeycomb 12 0,4%3.2 13 1,4%4.0 ICS 15 25,8%4.1 Jelly Bean 16 2,7%
  11. 11. Video• Android Evolution
  12. 12. Fragmentación
  13. 13. ¿Cuál es el peor enemigo de Android?
  14. 14. ¿Cuál es el peor enemigo de Android?
  15. 15. ¿Cuál es el peor enemigo de Android?
  16. 16. ¿El porqué de la Fragmentación?• Evolución muy rápida 9 versiones en 5 años, 400 millones de dispositivos activados, cientos de diferentes modelos de terminales con Android instalado, y más de 300 partners en diversos ámbitos, hardware, software, proveedores de telefonía…
  17. 17. ¿El porqué de la Fragmentación?• Perfil de usuarios de Android A diferencia de los usuarios de Apple, que son conocidos estar muy al día de los lanzamientos de apps y tener una gran cantidad de las mismas instaladas en sus iPhones, la mayoría de ellas de pago, apenas un tercio de los usuarios Android cuenta con aplicaciones de pago en su terminal. Tampoco son fanáticos de descargar una gran cantidad de apps: sobre un 13% de ellos tiene más de 50 aplicaciones instaladas.http://dattatecblog.com/2011/12/%C2%BFcomo-es-un-usuario-de-android/
  18. 18. Todo tiene solución• Librerías de Compatibilidad de Google: • android-support-v4 • android-support-v13• Librerías de Compatibilidad no oficiales: • GreenDroid: http://greendroid.cyrilmottier.com/ • ActionBarSherlock: http://actionbarsherlock.com/• Guías de diseño • http://developer.android.com/intl/es/design/
  19. 19. Honeycomb, el punto de inflexión• En el 2011 se liberó Honeycomb, versión específica para tablets con muchas novedades.• Ese mismo año Google lanza su librería de compatibilidad.• Empiezan a aparecer librerías no oficiales para ofrecer compatibilidad a la ActionBar.
  20. 20. ICS, estandarizando el diseño• En enero del 2012 Google lanza unas guías de estilo para el desarrollo de Apps sobre ICS. “Tu aplicación debe esforzarse por combinar la belleza, la sencillez y la intención de crear una experiencia mágica, sin esfuerzo y poderosa”• Unos meses más tarde lavan la cara de la web de android developers para seguir el estilo ICS
  21. 21. Android-support• Proporciona a los desarrolladores una serie de bibliotecas estáticas de apoyo.• Desarrollar apps con compatibilidad para una versión de la API, utilizando características de una versión superior.• Android-support-v4  Compatibilidad API >=4• Android-support-v13  Compatibilidad API >=13
  22. 22. ActionBarSherlock• Extensión de la biblioteca de soporte diseñado para facilitar el uso del patrón de diseño ActionBar a través de todas las versiones de Android con una única API.• La biblioteca utiliza automáticamente la barra nativa cuando es posible (API >=11) o utiliza la implementación de Sherlock en caso contrario.
  23. 23. Patrones de Diseño
  24. 24. http://developer.android.com/intl/es/design/index.html
  25. 25. Action Bar• La Action Bar es una barra situada en la parte superior de cada pantalla, que suele ser persistente a lo largo de la aplicación
  26. 26. Action Bar1. Main Action Bar2. Top Bar3. Bottom Bar
  27. 27. Action Bar• Está dividida en 4 áreas funcionales que suelen ser utilizadas en la mayoría de las aplicaciones• Icono de la app• Vista de control• Action buttons• Action overflow
  28. 28. Icono de la app• Es la identidad de la aplicación, puede cambiarse por un icono distinto del de la misma.• Se encarga de la navegación, al pulsar sobre el icono vuelves al home, muestras un drawer…, es aconsejable activar la flecha de back, que actúa como el botón de back.
  29. 29. Vista de Control• Si la app muestra datos en diferentes vistas, este segmento está pensado para permitir al usuario cambiar de vistas.• Tabs (fijas o scrollables)• Spinners• Drawers
  30. 30. Action Buttons• Están destinados a las acciones más frecuentes de las actividades.• Dependiendo del espacio disponible en la barra se muestran los más importantes, y el resto van al overflow button.• Aquí deberían ir las acciones frecuentes, importantes o típicas.
  31. 31. Action Buttons• ifRoom: sólo aparece si hay espacio.• never: no aparecerá nunca en la action bar.• always: aparecerá siempre en la action bar, aunque por el tamaño del dispositivo y número de elementos mostrados no estuviera definido que apareciera.• collapseActionView: indica que es posible mover esta acción al overflow button.
  32. 32. Action Overflow• Este botón está destinado a contener las opciones menos frecuentes de la pantalla.• Es el equivalente al antiguo menú HW, y sólo aparece en dispositivos sin el mismo.• Dependiendo del tamaño del teléfono y la orientación el número de elementos que pueden mostrarse en la Action Bar varían.
  33. 33. Action Overflow
  34. 34. Ejemplos
  35. 35. ActionBar con Sherlock@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getSupportActionBar() != null) { getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true); }}@Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { finish(); startMain(false); } return true;}
  36. 36. Tabs con Sherlockprivate void initTabs() { String[] tabsTitleArray = getResources().getStringArray(R.array.main_tab); ActionBar actionbar = getSupportActionBar(); actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); for (int i = 0; i < NUM_TABS; i++) { actionbar.addTab(actionbar.newTab().setText( tabsTitleArray[i]).setTabListener(new MyTabsListener())); } }
  37. 37. Action Buttons con Sherlock@Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getSupportMenuInflater(); inflater.inflate(R.menu.activity_menu, menu); return true; }
  38. 38. Action Buttons con Sherlock<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/add_element" android:icon="@drawable/ic_action_add" android:showAsAction="always" android:title="@string/add"/> res/menu/activity_menu.xml <item android:id="@+id/delete_element" android:icon="@drawable/ic_action_delete" android:showAsAction="always" android:title="@string/delete"/> <item android:id="@+id/edit_element" android:icon="@drawable/ic_action_edit" android:showAsAction="always" android:title="@string/edit"/></menu>
  39. 39. PseudoActionBar (basada en layouts)<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/topbar_1" > <ImageView android:id="@+id/topbar_shadow" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/topbar_shadow" /> <TextView android:id="@+id/header_title_textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textAppearance="?android:attr/textAppearanceLarge" />……..
  40. 40. PseudoActionBar (basada en layouts)<LinearLayout android:id="@+id/header_right_buttons" android:layout_width="wrap_content" android:layout_height="33.33dp" android:layout_alignParentRight="true" android:layout_marginTop="8.67dp" android:layout_marginBottom="8.67dp" android:layout_marginRight="13.33dp" /> <LinearLayout android:id="@+id/header_left_buttons" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="10dp" /></RelativeLayout>
  41. 41. Tabs con PseudoActionBar<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/timeline_header_content" android:layout_width="match_parent" android:layout_height="wrap_content" > En la actividad, o el <LinearLayout fragment encargado de android:id="@+id/header_right_buttons" actuar como “ActionBar” android:layout_width="wrap_content" android:layout_height="wrap_content" una vista con un android:layout_alignParentRight="true" onClickListener por cada android:layout_centerVertical="true" acción… android:layout_marginRight="10dp" /> ……..
  42. 42. ActionButtons con PseudoActionBarpublic void addButton(boolean right, int buttonResource, final Runnable event) { ButtonAndIcon headerButton = new ButtonAndIcon(getActivity()); headerButton.setBackgroundButton(buttonResource); headerButton.setAction(event); if (right) { Añadir cada botón a la vista rightButtons.addView(headerButton); programaticamente desde } else { el fragment o actividad que leftButtons.addView(headerButton); lo compone. } ó } Añadir directamente en el layout que hará de action bar
  43. 43. Multi-Pane Layouts• Se introdujeron en Honeycomb para adaptar el contenido de las aplicaciones a los tamaños de pantalla de los tablets.• Permiten combinar múltiples vistas o dividir estas en una única en función del espacio disponible en la pantalla.
  44. 44. Multi-Pane Layouts
  45. 45. Multi-Pane Layouts
  46. 46. Multi-Pane Layouts• A nivel de implementación cuando hablamos de Multi- Pane nos referimos a los fragments.
  47. 47. Fragments• Fragmentos de interfaz de usuario que se pueden colocar en una actividad.• Se podrían considerar mini actividades, tienen su propio ciclo de vida, aunque asociado a la actividad que los contienen.
  48. 48. Multi-Pane Layouts <?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="horizontal" > res/layout-large/activity.xml <fragment android:id="@+id/listFragment" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent” class="com.example.android.ListFragment" /> <fragment android:id="@+id/detailFragment" android:layout_width="0dp" android:layout_weight="2" android:layout_height="match_parent" class="com.example.android.DetailFragment”/ > </LinearLayout>
  49. 49. Multi-Pane Layouts<?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="horizontal" > res/layout/activity.xml <fragment android:id="@+id/listFragment" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent” class="com.example.android.ListFragment" /></LinearLayout>
  50. 50. Multi-Pane Layouts<?xml version="1.0" encoding="utf-8"?><ListView xmlns:android="http://schemas.android.com/apk/res/android” android:id="@+id/list" android:layout_width=”match_parent” android:layout_height="match_parent” /> res/layout/list_fragment.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android” android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > res/layout/details_fragment.xml <EditText android:id="@+id/name_edit_text" android:layout_width="fill_parent" android:layout_height="40dp" android:hint="@string/name”/> …… </LinearLayout>
  51. 51. ¿Preguntas?
  52. 52. Enlaces de InterésLibrería de Compatibilidad:http://developer.android.com/intl/es/tools/extras/support-library.htmlLibrerías de soporte de la Action Bar:http://actionbarsherlock.com/https://github.com/cyrilmottier/GreenDroidPersonalizando la Action Bar:http://android-developers.blogspot.com.es/2011/04/customizing-action-bar.htmlCódigo con los ejemplos:https://github.com/jegumi/DevCon2012

×