Presentación de los fragmentos

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



¿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



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



•  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



Panel doble (horizontal y vertical)

7 Page



Fragmentos: panel doble

Fragmento de Lista Fragmento

Activity

findFragmentById(R.id.DetailFragment)!

setContentView(R.layout.main)!

8 Page



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



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



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



Código 3.0: Diseño principal

fragment1 (lista)

fragment2 (detalle)

Horizontal de lado a lado

12 Page



Código 3.0: Diseño principal

Vertical de arriba a abajo

anchura y altura de la lista debe invertirse

13 Page



Código 3.0: Lista del fragmento

configurar el adaptador de lista

crear lista devo- lución d/elemento

encontrar fragmento d/detalle y actualizar la imagen

llamado nuevo ciclo de vida para ejecutar después de creada la actividad

14 Page



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



Código 3.0: Fragmentos UI

(fragmento 1) Enumerar elem.

(fragmento 2) Framelayout con ImageView

16 Page



•  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



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



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



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



Panel dual (Android 2.2 en horizontal)

21 Page



Panel simple (Android 2.2 en vertical)

22 Page



Fragmentos: panel doble

Fragmento de Lista Fragmento

FragmentActivity1

findFragmentById(R.id.DetailFragment)!


23 Page



Fragmentos: panel simple

Fragmento

Fragmento Activity1

Fragmento Activity2

Lista Fragmento

intent.setClass(getActivity(),Fragment2.class);!startActivity(intent);!


findViewById(R.id.DetailFragment) es NULO!

24 Page



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



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



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



Una explicación del código


28 Page



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



¡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



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



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



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



Agregará un Fragmento para ShowOneItemActivity

<LinearLayout …

<ScrollView …

res/layout/showoneitem.xml

ShowOneItemActivity.java Cómo se ve ahora

Encaje un Fragmento aquí

34 Page



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



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



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



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



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



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



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



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



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



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



¿Desea formular alguna pregunta?

Brasil - #appsum11br Argentina - #appsum11ar México - #appsum11mx

community.developer.motorola.com

45 Page



gracias

46 Page



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



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



Presentación de los fragmentos

Business