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