Post on 27-May-2015
Anna Schaller Peter van der Linden
Evangelistas de la tecnología Android Plataformas y Servicios del Desarrollador
Motorola Mobility
Presentación de los fragmentos
2 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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.
3 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
¿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
4 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
5 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
• 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
Planificar para diseños
6 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Panel doble (horizontal y vertical)
7 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Fragmentos: panel doble
Fragmento de Lista Fragmento
Activity
findFragmentById(R.id.DetailFragment)!
setContentView(R.layout.main)!
8 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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 findFragmentById(R.id.fragmentIdX).
9 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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 | . . .
10 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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.
11 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Código 3.0: Diseño principal
fragment1 (lista)
fragment2 (detalle)
Horizontal de lado a lado
12 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Código 3.0: Diseño principal
Vertical de arriba a abajo
anchura y altura de la lista debe invertirse
13 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Código 3.0: Lista del fragmento
configurar el adaptador de lista
crear lista devo- lución d/elemento
encontrar frag- mento d/detalle y actualizar la imagen
llamado nuevo ciclo de vida para ejecutar después de creada la actividad
14 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
15 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Código 3.0: Fragmentos UI
(fragmento 1) Enumerar elem.
(fragmento 2) Framelayout con ImageView
16 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
• Cómo definir los recursos UI – Use las mismas vistas y grupos de
vistas que en una Activity
Fragmentos con un UI
listfragment.xml <TextView>!
fragment.xml <FrameLayout>!
!<ImageView>! <LinearLayout>! <GridView>! [. . .] dialogfragment
17 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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"
18 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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();!
! !}! }!}!
19 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
20 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Panel dual (Android 2.2 en horizontal)
21 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Panel simple (Android 2.2 en vertical)
22 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Fragmentos: panel doble
Fragmento de Lista Fragmento
FragmentActivity1
findFragmentById(R.id.DetailFragment)!
setContentView(R.layout.main)!
23 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Fragmentos: panel simple
Fragmento
Fragmento Activity1
Fragmento Activity2
Lista Fragmento
intent.setClass(getActivity(),Fragment2.class);!startActivity(intent);!
setContentView(R.layout.main)!
findViewById(R.id.DetailFragment) es NULO!
24 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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()
25 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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 | . . .
26 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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).
27 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Una explicación del código
© 2010 Motorola Mobility, Inc.
28 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Panorama general
PULSAR
El smartphone necesita 2 pantallas 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...
29 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
¡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"
30 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Anatomía de una Aplicación (antes de los fragmentos)
PULSAR
setContentView( R.layout.showoneitem);
<LinearLayout …
<ScrollView …
res/layout/showoneitem.xml
ShowOneItemActivity.java MainActivity.java
main.xml
31 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Cómo ir a la pantalla siguiente
PULSAR
onCreate(…) {
}
ShowOneItemActivity.java i = new Intent( Ctxt, ShowOneItemActivity.class); startActivity( i );
MainActivity.java
<activity android:name=".MainActivity"/> <activity android:name=”.ShowOneItemActivity"/> </application>
AndroidManifest.xml
32 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
33 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Agregará un Fragmento para ShowOneItemActivity
<LinearLayout …
<ScrollView …
res/layout/showoneitem.xml
ShowOneItemActivity.java Cómo se ve ahora
Encaje un Fragmento aquí
34 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Agregue un Fragmento para ShowOneItemActivity
<LinearLayout …
<ScrollView …
showoneitem.xml
setContentView( r.layout.showoneitem_actfrag); ShowOneItemActivity.java
<fragment class=”ShowOneItemFragment” android:layout_width=…
res/layout/showoneitem_actfrag.xml
… extends Fragment { public View onCreateView( LayoutInflater i, ViewGroup c, Bundle b) { return i.inflate( R.layout.showoneitem, c);
ShowOneItemFragment.java
35 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
36 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
37 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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?
38 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
Use el recurso alternativo para lograr el diseño correcto.
PULSAR
XML p/diseñar pantalla roja peq.
<fragment class= “a.b.c.d”
<fragment class=“w.x.y.z”
res/layout-xlarge/main.xml
res/layout/main.xml
setContentView(R.layout.main)
Let the frame work!
39 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
40 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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();
41 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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)!
42 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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)
43 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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
44 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
¿Desea formular alguna pregunta?
Brasil - #appsum11br Argentina - #appsum11ar México - #appsum11mx
community.developer.motorola.com
45 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
gracias
46 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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.
47 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011
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.
48 Page
© 2011 Motorola Mobility, Inc.
MOTODEV App Summit 2011