Presentación de los fragmentos

Motorola Mobility

Anna Schaller
Peter van der Linden
Evangelistas de la tecnología Android
Plataformas y Servicios del Desarrollador

Presentación de los fragmentos

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.


¿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



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



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


Panel doble (horizontal y vertical)



Fragmentos: panel doble Activity

setContentView(R.layout.main)!

findFragmentById(R.id.DetailFragment)!

Fragmento
de Lista Fragmento



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


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


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.


Código 3.0:
Diseño principal

Horizontal
de lado a lado

fragment1
(lista)

fragment2
(detalle)



Código 3.0:
Diseño principal

Vertical
de arriba a abajo

anchura y altura de la
lista debe invertirse



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


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



Código 3.0:
Fragmentos UI

(fragmento 1)
Enumerar elem.

(fragmento 2)
Framelayout
con
ImageView



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



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"



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();!
! !}!
}!
}!


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



Panel dual (Android 2.2 en horizontal)



Panel simple (Android 2.2 en vertical)



Fragmentos: panel doble FragmentActivity1


findFragmentById(R.id.DetailFragment)!

Fragmento
de Lista Fragmento



Fragmentos: panel simple
Fragmento Fragmento
Activity1 Activity2

findViewById(R.id.DetailFragment) es NULO!

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



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



Anatomía de un proyecto: panel doble + panel simple
(Paquete de compatibilidad Android)
myFragmentProject
|-- AndroidManifest.xml
|-- /src
|------- /main.java // ampliar FragmentActivity
|------- /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)
|------- /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
|...


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.


Una explicación del código

© 2011


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



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


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 …



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>



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



Agregará un Fragmento para
ShowOneItemActivity

Cómo se ve ahora ShowOneItemActivity.java

Encaje un Fragmento aquí

res/layout/showoneitem.xml
<LinearLayout …

<ScrollView …



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.


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


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


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?



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.


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


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();



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


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)


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



¿Desea
formular
alguna

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

community.developer.motorola.com


gracias



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.



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.

Presentación de los fragmentos

Más contenido relacionado

Similar a Presentación de los fragmentos (20)

Más de Motorola Mobility - MOTODEV (20)

Último (20)

Presentación de los fragmentos