Contenu connexe Similaire à Presentación de los fragmentos (20) Plus de Motorola Mobility - MOTODEV (20) Presentación de los fragmentos 1. Motorola Mobility
Anna Schaller
Peter van der Linden
Evangelistas de la tecnología Android
Plataformas y Servicios del Desarrollador
Presentación de los fragmentos
2. MOTODEV App Summit 2011 Page 2
Fragmentos
• Permite que una aplicación se divida en subcomponentes para poder
manejarlos de manera individual y combinarlos de distintas formas,
como por ejemplo la creación de un multipanel UI.
© 2011 Motorola Mobility, Inc.
3. MOTODEV App Summit 2011 Page 3
¿Por qué fragmentos?
• Desde el punto de vista de un desarrollador, la transición más grande
de smartphones y tablets es el tamaño de la pantalla.
• Los fragmentos crean una puente para las aplicaciones en smartphones
y tablets que desean ser optimizadas
© 2011 Motorola Mobility, Inc.
4. MOTODEV App Summit 2011 Page 4
Cómo llegar allí
• Hay dos formas de hacerlo
– Android 3.0 SDK
– Paquete de compatibilidad Android
• Cantidad de diseños
– Soporte para paneles dual+ en cualquier lugar
– Soporte para panel simple en cualquier lugar
• Todavía se necesita algún tipo de Activity/es
• Crear un par de fragmentos
• Para cada fragmento visible, agregar un UI
• Agregar los fragmentos a una Activity
© 2011 Motorola Mobility, Inc.
5. MOTODEV App Summit 2011 Page 5
Planificar para diseños
• Tamaño de la pantalla
– pequeña, normal, grande, extragrande
• Para cada tamaño de pantalla hay 2 orientaciones
– Horizontal
– Vertical
• Planificar para las distintas configuraciones
– /res/layout-small-land y /res/layout-small-port
– /res/layout-normal-land y /res/layout-normal-port
– /res/layout-large-land y /res/layout-large-port
– /res/layout-xlarge-land y /res/layout-xlarge-land
© 2011 Motorola Mobility, Inc.
6. MOTODEV App Summit 2011 Page 6
Panel doble (horizontal y vertical)
© 2011 Motorola Mobility, Inc.
7. MOTODEV App Summit 2011 Page 7
Fragmentos: panel doble Activity
setContentView(R.layout.main)!
findFragmentById(R.id.DetailFragment)!
Fragmento
de Lista Fragmento
© 2011 Motorola Mobility, Inc.
8. MOTODEV App Summit 2011 Page 8
Cómo trabajar con fragmentos en Android 3.0
1. Crear una nueva clase para cada uno de sus fragmentos
• import android.app.Fragment;
– extender Fragment o ListFragment (en lugar de la Activity)
– agregar llamadas del ciclo de vida
2. Crear el archivo nuevo resource.xml para cada fragmento
<ViewGroup> <UI elements> </ViewGroup>!
3. Actualizar main.xml con la pestaña del fragmento nuevo para cada
fragmento
!<fragment class="my.new.fragment.class" !
! ! !android:id="@+id/fragmentIdX>!
4. En MainApp.java (se extiende a Activity)
• import android.app.Fragment;!
• Cargar el diseño de la aplicación con setContentView
(R.layout.main)
• Elementos de la lista Fragment1 se adjuntan a fragment2 con © 2011 Motorola Mobility, Inc.
findFragmentById(R.id.fragmentIdX).
9. MOTODEV App Summit 2011 Page 9
Anatomía de un proyecto. Panel doble solamente
(Android 3.0)
myFragmentProject
|-- AndroidManifest.xml
|-- /src
|------- /main.java // ampliar Activity
|------- /fragment1.java // ampliar Fragment, ListFragment, DialogFragment, etc.
|------- /fragment2.java // ampliar Fragment, ListFragment, DialogFragment, etc.
|--- /res
|------- /layout-land // diseño horizontal
|----------- /main.xml // archivo de recurso de la aplicación de diseño
horizontal c/pestañas del fragmento
|----------- /fragment1.xml // diseño UI del fragmento 1
|----------- /fragment2.xml // diseño horizontal UI del fragmento 2
|------- /layout-port // diseño vertical
|----------- /main.xml // archivo de recurso de aplicación vertical c/pestañas
del fragmento
|----------- /fragment2.xml // diseño vertical UI del fragmento 2
|------- /values-xlarge
|...
© 2011 Motorola Mobility, Inc.
10. MOTODEV App Summit 2011 Page 10
Código 3.0:
main.java
• La Activity principal aplica un diseño de la manera habitual durante
onCreate()!
• setContentView(R.layout.main) carga el archivo de recurso
que contiene el diseño con las pestañas <fragment>. Los
fragmentos crean una instancia en cuanto la actividad carga el
diseño. © 2011 Motorola Mobility, Inc.
11. MOTODEV App Summit 2011 Page 11
Código 3.0:
Diseño principal
Horizontal
de lado a lado
fragment1
(lista)
fragment2
(detalle)
© 2011 Motorola Mobility, Inc.
12. MOTODEV App Summit 2011 Page 12
Código 3.0:
Diseño principal
Vertical
de arriba a abajo
anchura y altura de la
lista debe invertirse
© 2011 Motorola Mobility, Inc.
13. MOTODEV App Summit 2011 Page 13
Código 3.0:
Lista del fragmento
llamado nuevo ciclo de
vida para ejecutar después
de creada la actividad
configurar el
adaptador de lista
crear lista devo-
lución d/elemento
encontrar frag-
mento d/detalle
y actualizar la
imagen
© 2011 Motorola Mobility, Inc.
14. MOTODEV App Summit 2011 Page 14
Código 3.0:
Detalle del fragmento
amplíe la vista
de los detalles
y cargue la
primera imagen
reemplace la
imagen según
la posición
de la lista
© 2011 Motorola Mobility, Inc.
15. MOTODEV App Summit 2011 Page 15
Código 3.0:
Fragmentos UI
(fragmento 1)
Enumerar elem.
(fragmento 2)
Framelayout
con
ImageView
© 2011 Motorola Mobility, Inc.
16. MOTODEV App Summit 2011 Page 16
Fragmentos con un UI
• Cómo definir los recursos UI
– Use las mismas vistas y grupos de
vistas que en una Activity
listfragment.xml fragment.xml
<TextView>! <FrameLayout>!
!<ImageView>!
<LinearLayout>!
<GridView>!
[. . .]
dialogfragment
© 2011 Motorola Mobility, Inc.
17. MOTODEV App Summit 2011 Page 17
Fragmentos sin un UI
• Dado que los fragmentos se pueden compartir a lo largo de las
Acitivities, usted puede ejecutar un hilo en un fragmento de trabajo y
compartir eso entre las Activities
• Sigue necesitando definir el fragmento en una clase separada
(Fragmento de subclase)
– /src/WorkerFragment.java
• No necesita un archivo de recurso porque no hay interfaz de usuario
– res/layout/WorkerFragment.xml
• No necesita pestaña de <fragment> en el archivo de diseño de la
Activity aunque ya no haya una identificación para encontrar al
fragmento
• Sin una @+id debe interactuar con el fragmento por vía de una
"etiqueta"
© 2011 Motorola Mobility, Inc.
18. MOTODEV App Summit 2011 Page 18
findFragmentByTag()
public static class WorkerFragment extends Fragment {!
![. . .] // haga algo en un subproceso en segundo plano!
}!
public static class MyOtherFragment extends Fragment {!
@Override!
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
! !FragmentManager fm = getFragmentManager();
!// verifique para ver si hemos retenido el fragmento de trabajo.
!mWorkFragment = (WorkerFragment)fm.findFragmentByTag("work");
!// Si no se retuvo (ni se ejecutó por primera vez), debemos crearlo.
!if (mWorkFragment == null) {
! mWorkFragment = new WorkerFragment();!
! // Dígale con quién está trabajando.
! mWorkFragment.setTargetFragment(this, 0);
! fm.beginTransaction().add(mWorkFragment, "work").commit();!
! !}!
}!
© 2011 Motorola Mobility, Inc.
}!
19. MOTODEV App Summit 2011 Page 19
Paquete de compatibilidad de Android
• Conocido como "Fragmentos para todos"
• Paquete de compatibilidad de Android frente a Honeycomb
• ¿Cuál es la diferencia?
• La biblioteca de compatibilidad funciona con niveles de IPA 4 y
superior
• Biblioteca nueva que debe agregarse a su proyecto
• Tipo de Activity nueva
• Nuevas API
© 2011 Motorola Mobility, Inc.
20. MOTODEV App Summit 2011 Page 20
Panel dual (Android 2.2 en horizontal)
© 2011 Motorola Mobility, Inc.
21. MOTODEV App Summit 2011 Page 21
Panel simple (Android 2.2 en vertical)
© 2011 Motorola Mobility, Inc.
22. MOTODEV App Summit 2011 Page 22
Fragmentos: panel doble FragmentActivity1
setContentView(R.layout.main)!
findFragmentById(R.id.DetailFragment)!
Fragmento
de Lista Fragmento
© 2011 Motorola Mobility, Inc.
23. MOTODEV App Summit 2011 Page 23
Fragmentos: panel simple
Fragmento Fragmento
Activity1 Activity2
setContentView(R.layout.main)!
findViewById(R.id.DetailFragment) es NULO!
intent.setClass(getActivity(),Fragment2.class);!
startActivity(intent);!
Lista
Fragmento Fragmento
© 2011 Motorola Mobility, Inc.
24. MOTODEV App Summit 2011 Page 24
Modificaciones para la biblioteca de compatibilidad
• Actualizar recursos
– El diseño vertical sólo tiene pestaña de fragment1 (no de fragment2)
• Actualizar código
• importar android.v4.support.*!
– Configurar booleano según la orientación
– Si la orientación== horizontal, es un panel doble
• Mostrar fragment1 y fragment2
– Si la orientación== vertical, es un panel simple
• Abra fragment2 en un nuevo FragmentActivity por vía de un intent
– Llame getSupportFragmentManager() en lugar de getFragmentManager()
© 2011 Motorola Mobility, Inc.
25. MOTODEV App Summit 2011 Page 25
Anatomía de un proyecto: panel doble + panel simple
(Paquete de compatibilidad Android)
myFragmentProject
|-- AndroidManifest.xml
|-- /src
|------- /main.java // ampliar FragmentActivity
|------- /fragment1.java // ampliar Fragment, ListFragment, DialogFragment, etc.
|------- /fragment2.java // ampliar Fragment, ListFragment, DialogFragment, etc.
|------- /fragment2Main.java // ampliar FragmentActivity
|--- /res
|------- /layout-land // diseño horizontal (orientación natural del tablet)
|----------- /main.xml // tablet o archivo de recurso de aplicación horizontal (doble)
|----------- /fragment1.xml // diseño UI del fragmento 1
|----------- /fragment2.xml // diseño UI del fragmento 2
|------- /layout-port // diseño vertical (orientación natural del smartphone)
|----------- /main.xml // phone o archivo de recurso de aplicación vertical (simple)
|----------- /fragment1.xml
|------- /values-xlarge
|...
© 2011 Motorola Mobility, Inc.
26. MOTODEV App Summit 2011 Page 26
Cómo usar el paquete de compatibilidad de Android
• Cómo configurar el entorno
– Descargar "Paquete de compatibilidad
de Android" con el AVD & SDK
Manager de Android. En su directorio
de instalación SDK, encontrará extras/
android/compatibility/v4/android-
support-v4.jar.
– Cree un nuevo proyecto Android en el
nivel de API seleccionada (4 a 10).
– Agregue android-support-v4.jar a su
directorio de bibliotecas/proyecto.
– Si usted es un usuario de Studio o
Eclipse, también agréguelo a su ruta de
generación para el proyecto (Project-
>Properties->Java Build Path-
>Libraries->Add JAR). © 2011 Motorola Mobility, Inc.
27. MOTODEV App Summit 2011 Page 27
Una explicación del código
© 2010 Motorola Mobility, Inc.
© 2011
28. MOTODEV App Summit 2011 Page 28
Panorama general
El smartphone necesita 2 pantallas
PULSAR
La d/la izquierda es una lista, la d/la derecha
c/detalles d/elem. seleccionado ListItem
El tablet tiene espacio para 2 pantallas
Pero no tenemos una manera
de poner 2 Activities en una pantalla...
© 2011 Motorola Mobility, Inc.
29. MOTODEV App Summit 2011 Page 29
¡Hasta ahora!
• Todavía no podemos poner dos Activities en pantalla
• Pero podemos hacer algo casi tan bueno
• Podemos poner la mayor parte de nuestra Activity en un
fragmento
• Los Fragmentos pueden estar en un diseño por sí mismos o con
Vistas u otros Fragmentos. El Marco ya nos da la recursos de
diseños alternativos para los distintos tamaños de pantalla. Por
eso, simplemente cree un diseño nuevo para los dispositivos
extragrandes.
• Voilà: hacer aplicaciones fáciles de usar en el tablet es "sólo
refactorizar"
© 2011 Motorola Mobility, Inc.
30. MOTODEV App Summit 2011 Page 30
Anatomía de una Aplicación (antes de los
fragmentos)
PULSAR
MainActivity.java ShowOneItemActivity.java
setContentView(
R.layout.showoneitem);
main.xml res/layout/showoneitem.xml
<LinearLayout …
<ScrollView …
© 2011 Motorola Mobility, Inc.
31. MOTODEV App Summit 2011 Page 31
Cómo ir a la pantalla siguiente
PULSAR
MainActivity.java ShowOneItemActivity.java
i = new Intent( Ctxt, onCreate(…) {
ShowOneItemActivity.class);
startActivity( i );
}
AndroidManifest.xml
<activity android:name=".MainActivity"/>
<activity android:name=”.ShowOneItemActivity"/>
</application>
© 2011 Motorola Mobility, Inc.
32. MOTODEV App Summit 2011 Page 32
La estrategia de fragmento para
ShowOneItemActivity
• Vamos a pasar todo el código ShowOneItemActivity a un
Fragmento
• ese Fragmento será invocado por ShowOneItemActivity cuando
esté en un dispositivo de pantalla pequeña, normal o grande
• …pero también puede ser incrustado en un diseño XML de
alguna otra Activity, cuando esté en una pantalla XL
• entonces, hay dos formas de llegar a ShowOneItemFragment
Desde la Activity que donó todo su código al Fragmento
Desde un diseño XML, que pertenece a alguna otra Activity
© 2011 Motorola Mobility, Inc.
33. MOTODEV App Summit 2011 Page 33
Agregará un Fragmento para
ShowOneItemActivity
Cómo se ve ahora ShowOneItemActivity.java
Encaje un Fragmento aquí
res/layout/showoneitem.xml
<LinearLayout …
<ScrollView …
© 2011 Motorola Mobility, Inc.
34. MOTODEV App Summit 2011 Page 34
Agregue un Fragmento para ShowOneItemActivity
setContentView(
ShowOneItemActivity.java r.layout.showoneitem_actfrag);
res/layout/showoneitem_actfrag.xml
<fragment
class=”ShowOneItemFragment”
android:layout_width=…
… extends Fragment {
ShowOneItemFragment.java public View onCreateView(
LayoutInflater i,
ViewGroup c, Bundle b) {
return i.inflate(
R.layout.showoneitem, c);
<LinearLayout …
showoneitem.xml
<ScrollView … © 2011 Motorola Mobility, Inc.
35. MOTODEV App Summit 2011 Page 35
El archivo XML para un fragmento
<?xml version="1.0" encoding="utf-8"?>!
<fragment!
xmlns:android=!
"http://schemas.android.com/apk/res/android"!
android:name="com.example.ShowOneItemFragment"!
android:layout_width="match_parent"!
android:layout_height="wrap_content"!
android:id="@+id/showoneitemfragment">!
</fragment>!
• Tamaño de diseño usual, para saber cuán alto y ancho
• puntos XML para el formato de archivo de Fragmento
• Debe darle una identificación o etiqueta
© 2011 Motorola Mobility, Inc.
36. MOTODEV App Summit 2011 Page 36
El código para un fragmento
public class Foo extends Fragment {
public void onCreate()!
public View onCreateView(...) !
public void onPause() !
...!
}!
• Cuando pasa el código desde la Activity, se delinea casi
a los mismos eventos LifeCycle
• Estos 3 métodos pueden alcanzar. Guarde en onPause
• onCreateView() amplía el XML,
regresa la raíz Vista del Fragmento
© 2011 Motorola Mobility, Inc.
37. MOTODEV App Summit 2011 Page 37
La historia hasta ahora
• Hemos refactorizado nuestra Activity en una Activity y un
Fragmento
• Todo el código de Activity pasó al Fragmento. La Activity
es ahora un contenido adicional para el Fragmento
• Podemos meternos en el código como una Activity o un
Fragmento
• ¿Cómo elegimos correctamente?
© 2011 Motorola Mobility, Inc.
38. MOTODEV App Summit 2011 Page 38
Use el recurso alternativo para lograr el diseño
correcto.
res/layout/main.xml
XML p/diseñar pantalla roja peq.
PULSAR
setContentView(R.layout.main)
res/layout-xlarge/main.xml
<fragment class= “a.b.c.d”
<fragment class=“w.x.y.z”
Let the frame work! © 2011 Motorola Mobility, Inc.
39. MOTODEV App Summit 2011 Page 39
Las listas podrían ser un gran problema con este
enfoque
• Usted no tiene un archivo XML para la lista como un todo
• Sólo tiene un archivo XML para una entrada en la lista
• setListAdapter hace la magia de colocar la ListView en la
ListActivity
• Pero necesita archivos XML para llegar a los fragmentos
desde las Activities
• ¿Cuál es la solución? ¡ListFragment! Similar a
ListActivity
© 2011 Motorola Mobility, Inc.
40. MOTODEV App Summit 2011 Page 40
Un último consejo
• Los Fragmentos son magníficos y querrá usarlos para refactorizar
sus aplicaciones para que sean fáciles de usar.
• Tenga cuidado de ser coherente con las clases de archivo y los
nombres de archivos XML.
• Algunos métodos muy dominantes requieren un pedido para
superclasificar. Por ejemplo, onCreate() cuando se usa un
FragmentActivity
• Dentro de un Fragmento, getActivity() es muy útil
• En una Activity, amplíe FragmentActivity para obtener las
operaciones del Fragmento, como getSupportFragmentManager();
© 2011 Motorola Mobility, Inc.
41. MOTODEV App Summit 2011 Page 41
Cómo usar los Fragmentos. Información
• Información práctica sobre los Fragmentos en la Guía del
Desarrollador 3.0
• Consulte la referencia 3.0 para API
• android.app.Fragment!
• android.app.ListFragment!
• Muestra una lista similar para ListActivity
• android.app.DialogFragment !
• Muestra un diálogo flotante!
• android.app.FragmentManager
• Interfaz para interactuar con el fragmento (findFragmentById)
• android.app.FragmentTransaction !
• API para las operaciones del fragmento (agregar, eliminar,
reemplazar, ocultar, mostrar)!
© 2011 Motorola Mobility, Inc.
42. MOTODEV App Summit 2011 Page 42
Cómo usar los fragmentos. Ejemplos
• Aplicación Honeycomb Gallery para fragmentos de Android 3.0
• En la carpeta extra del paquete de compatibilidad de Android
– /android-sdk/extras/android/compatibility/v4/samples/ApiDemos/src/com/
example/android/apis/app/
– Busque el fragmento<>.java para versión HC
– Fragmento<>Support*.java para código del paquete de compatibilidad de
Android
• Publicaciones del blog de Reto Meier
– http://blog.radioactiveyak.com/2011/02/android-app-surgery-earthquake-
redux.html
– http://blog.radioactiveyak.com/2011/02/strategies-for-honeycomb-and-
backwards.html
• Publicaciones del blog de Dianne Hackborn
– http://android-developers.blogspot.com/2011/02/android-30-fragments-
api.html (La API de los Fragmentos de Android 3.0)
© 2011 Motorola Mobility, Inc.
43. MOTODEV App Summit 2011 Page 43
Más información: developer.motorola.com
• Herramientas
– MOTODEV Studio: IDE basado en Eclipse con características adicionales
(ubicación de cadenas, gerente de base de datos)
– App Validator: herramienta en línea para prueba previa de las aplicaciones
de Android para compatibilidad en los dispositivos
• Artículos técnicos
– Sugerencias de programación de Motorola XOOM
– Cómo comprender la compresión de textura
• Especificaciones del producto
– http://developer.motorola.com/products/xoom/
• Paneles de discusión
© 2011 Motorola Mobility, Inc.
44. MOTODEV App Summit 2011 Page 44
¿Desea
formular
alguna
pregunta?
Brasil - #appsum11br
Argentina - #appsum11ar
México - #appsum11mx
community.developer.motorola.com
© 2011 Motorola Mobility, Inc.
46. MOTODEV App Summit 2011 Page 46
Licencias
Los ejemplos del código fuente que se exhiben en esta presentación pueden estar bajo la licencia
de Apache, Versión 2 según lo siguiente:
Copyright © 2010, Android Open Source Project. Todos los derechos reservados, salvo indicación
expresa en contrario.
Con licencia de Apache, Versión 2.0 (la "Licencia"); no podrá usar este archivo, salvo que cumpla con
lo que establece la Licencia. Puede conseguir una copia de la licencia en
http://www.apache.org/licenses/LICENSE-2.0.
Salvo que lo exija la legislación vigente o se preste conformidad por escrito, el software se distribuye
bajo la Licencia "EN EL ESTADO EN QUE SE ENCUENTRA", SIN GARANTÍAS NI CONDICIONES
DE NINGÚN TIPO, explícitas o implícitas. Consulte la Licencia para ver los permisos y las limitaciones
que rigen para la Licencia según el idioma específico.
© 2011 Motorola Mobility, Inc.
47. MOTODEV App Summit 2011 Page 47
Licencias
Los ejemplos del código fuente que se muestran en esta presentación pueden estar bajo la
licencia BSD, según lo siguiente:
Copyright © 2010-2011, Motorola, Inc. Todos los derechos reservados, salvo indicación expresa en contrario.
Se permite la redistribución y el uso en forma de fuente o binaria, con o sin modificación, siempre y cuando se cumpla con
las siguientes condiciones:
Las redistribuciones del código fuente deben conservar el aviso de derechos de autor arriba mencionado, la presente
lista de condiciones y el siguiente descargo de responsabilidad.
Las redistribuciones en forma binaria deben reproducir el aviso de derechos de autor arriba mencionado, la presente
lista de condiciones y el siguiente descargo de responsabilidad en la documentación y/u otros materiales suministrados
con la distribución.
Ni el nombre de Motorola, Inc. ni los nombres de sus distribuidores pueden usarse para avalar o promover productos
que deriven de este software sin previa autorización específica por escrito.
EL PRESENTE SOFTWARE SE SUMINISTRA POR LOS TITULARES DE LOS DERECHOS DE AUTOR Y
CONTRIBUYENTES EN EL ESTADO "EN QUE SE ENCUENTRA" Y SE RECHAZA TODA RESPONSABILIDAD DE
GARANTÍA IMPLÍCITA O EXPLÍCITA, A TÍTULO ENUNCIATIVO, LAS GARANTÍAS IMPLÍCITAS DE
COMERCIALIZACIÓN Y DE APTITUD PARA UN PROPÓSITO PARTICULAR. EN NINGÚN CASO PODRÁ EL
TITULAR DE LOS DERECHOS DE AUTOR O LOS CONTRIBUYENTES SER RESPONSABLE POR NINGÚN DAÑO
Y PERJUICIO DIRECTO, INDIRECTO, INCIDENTAL, ESPECIAL, PUNITIVO, O CONSECUENCIAL (A TÍTULO
ENUNCIATIVO DE ABASTECIMIENTO DE BIENES O SERVICIOS DE SUSTITUCIÓN; PÉRDIDA DE USO, DATOS O
GANANCIAS O INTERRUPCIÓN DE ACTIVIDADES) INDEPENDIENTEMENTE DE SU ORIGEN Y DE TODA TEORÍA
DE RESPONSABILIDAD, YA SEA EN EL CONTRATO, RESPONSABILIDAD ESTRICTA O POR LESIÓN JURÍDICA
(INCLUSO NEGLIGENCIA O DE OTRO MODO) QUE SURJA DE ALGUNA MANERA DEL USO DE ESTE
SOFTWARE, INCLUSO SI SE ADVIRTIÓ DE LA POSIBILIDAD DE DICHO DAÑO.
© 2011 Motorola Mobility, Inc.