Charla devconf

Patrones de Diseño en Android.
La lucha por la standarización
Jesús Gumiel (@jegumi) DevCon 2012

Índice
• Introducción
• Evolución de Android
• Fragmentación
• Patrones de diseño

Los orígenes
• Andi Rubin, considerado el
Padre de Android.
• Vicepresidente de Ingeniería
supervisando el desarrollo de
Android

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

Gráfica distribución (Noviembre 2012)

Tabla distribución (Noviembre 2012)
Versión Nombre Api Distribución
1.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%

¿Cuál es el peor enemigo de Android?

¿El porqué de la Fragmentación?
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…
• Evolución muy rápida

¿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/

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/

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.

ICS, estandarizando el diseño
• En enero del 2012 Google lanza unas guías de estilo
para el desarrollo de Apps sobre ICS.
• Unos meses más tarde lavan la cara de la web de
android developers para seguir el estilo 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”

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

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.

http://developer.android.com/intl/es/design/index.html

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

Action Bar
1. Main Action Bar
2. Top Bar
3. Bottom Bar

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

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.

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

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.

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.

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.

ActionBar con Sherlock
@Override
public 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;
}

Tabs con Sherlock
private 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()));
}
}

Action Buttons con Sherlock
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getSupportMenuInflater();
inflater.inflate(R.menu.activity_menu, menu);
return true;
}

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"/>
<item
android:id="@+id/delete_element"
android:icon="@drawable/ic_action_delete"
android:title="@string/delete"/>
<item
android:id="@+id/edit_element"
android:icon="@drawable/ic_action_edit"
android:title="@string/edit"/>
</menu>
res/menu/activity_menu.xml

PseudoActionBar (basada en layouts)
<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_height="wrap_content"
android:background="@drawable/topbar_shadow" />
<TextView
android:id="@+id/header_title_textView"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
……..

PseudoActionBar (basada en layouts)
<LinearLayout
android:id="@+id/header_right_buttons"
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_centerVertical="true"
android:layout_marginLeft="10dp" />
</RelativeLayout>

Tabs con PseudoActionBar
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/timeline_header_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="@+id/header_right_buttons"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp" />
……..
En la actividad, o el
fragment encargado de
actuar como “ActionBar”
una vista con un
onClickListener por cada
acción…

ActionButtons con PseudoActionBar
public void addButton(boolean right, int buttonResource, final Runnable event) {
ButtonAndIcon headerButton = new ButtonAndIcon(getActivity());
headerButton.setBackgroundButton(buttonResource);
headerButton.setAction(event);
if (right) {
rightButtons.addView(headerButton);
} else {
leftButtons.addView(headerButton);
}
}
Añadir cada botón a la vista
programaticamente desde
el fragment o actividad que
lo compone.
ó
Añadir directamente en el
layout que hará de action
bar

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.

Multi-Pane Layouts
• A nivel de implementación cuando hablamos de Multi-
Pane nos referimos a los fragments.

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.

Multi-Pane Layouts
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<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_height="match_parent"
class="com.example.android.DetailFragment”/ >
</LinearLayout>
res/layout-large/activity.xml

Multi-Pane Layouts
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<fragment
android:id="@+id/listFragment"
android:layout_height="match_parent”
class="com.example.android.ListFragment" />
</LinearLayout>
res/layout/activity.xml

Multi-Pane Layouts
<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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android”
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="@+id/name_edit_text"
android:layout_height="40dp"
android:hint="@string/name”/>
……
</LinearLayout>
res/layout/details_fragment.xml

Enlaces de Interés
Librería de Compatibilidad:
http://developer.android.com/intl/es/tools/extras/support-library.html
Librerías de soporte de la Action Bar:
http://actionbarsherlock.com/
https://github.com/cyrilmottier/GreenDroid
Personalizando la Action Bar:
http://android-developers.blogspot.com.es/2011/04/customizing-action-bar.html
Código con los ejemplos:
https://github.com/jegumi/DevCon2012

Charla devconf

Más contenido relacionado

Similar a Charla devconf (20)

Charla devconf

Notas del editor