Introducción Fragments en Android

Buenos días, a continuación vamos a ver un ejemplo en el que podemos introducirnos en los Fragments para Android.

---

Como ya sabemos, una Activity ocupa normalmente el tamaño de una pantalla en un smartphone, mostrando las diferentes views que generan la interfaz gráfica de usuario en una aplicación. La activity es esencialmente un contenedor para las vistas.

Sin embargo, cuando una activity es mostrada en un dispositivo con una pantalla larga, como en una tablet, es algo fuera de lugar. Como la pantalla es mucho mas grande, todas las views harán lo posible para hacer uso completo de este espacio sobrante, lo que hace que se produzcan cambios en la jerarquía de las views. Un enfoque mejor es el uso de «mini-activities», la cual contiene cada uno su set de views. En tiempo de ejecución, una activity puede tener una o mas mini-activities, dependiendo de la orientación de pantalla del dispositivo. En Android 3.0 y después, estas mini-activities son conocidas como fragments.

Vamos a pensar que un Fragment es otra forma de Activity. Creamos Fragments que contienen views, al igual que una activity, solo que los Fragments siempre están dentro de una Activity.

En el ejemplo que vamos a hacer, vamos a crear 2 Fragments los cuales irán metidos dentro de un FragmentActivity.

Para comenzar, vamos a crear un proyecto, el cual podemos llamar como queramos.

Cuando nuestro proyecto esté creado, vamos a ir punto por punto para lograr lo que queremos.

• FragmentsExample

  Esta es nuestra Activity principal, la cual contendrá los 2 Fragment posteriores. En realidad no tiene demasiada complicación, ya que es mas que nada un simple contenedor para nuestros 2 Fragments.

  		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  		    xmlns:tools="http://schemas.android.com/tools"
  		    android:layout_width="match_parent"
  		    android:layout_height="match_parent"
  		    android:orientation="horizontal"
  		    tools:context=".FragmentsActivity" >
  		
  		    <fragment
  		        android:id="@+id/fragment1"
  		        android:name="sekth.droid.fragments.Fragment1"
  		        android:layout_width="0dp"
  		        android:layout_height="fill_parent"
  		        android:layout_weight="1" />
  		
  		    <fragment
  		        android:id="@+id/fragment2"
  		        android:name="sekth.droid.fragments.Fragment2"
  		        android:layout_width="0dp"
  		        android:layout_height="fill_parent"
  		        android:layout_weight="1" />
  		
  		</LinearLayout>
  		

  Como vemos en el código, nuestra pantalla principal estará partida en 2, y cada una de las mitades está ocupada por un Fragment, como veremos posteriormente.

  En el código java de nuestra activity, no tenemos que cambiar demasiado, solo un pequeño detalle que tiene que ver con las versiones de Android, ya que los Fragment fueron introducidos a partir de la versión de Android 3.0 HoneyComb, y por tanto si queremos usarlo en versiones anteriores, nuestra Activity debe heredar de la clase FragmentActivity, que está dentro del package de soporte.

  		public class FragmentsActivity extends FragmentActivity {
  
  			@Override
  			protected void onCreate(Bundle savedInstanceState) {
  				super.onCreate(savedInstanceState);
  				setContentView(R.layout.activity_fragments);
  			}
  		}
  		

• Fragment1

  Con la Activity terminada, vamos a hacer nuestro primer Fragment. Para ello crearemos una nueva clase Java que hereda de la clase Fragment. Una vez creada nuestra clase, creamos un nuevo archivo xml en la carpeta res/layout, al cual llamaremos fragment1.xml

  		<?xml version="1.0" encoding="utf-8"?>
  		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  		    android:layout_width="match_parent"
  		    android:layout_height="match_parent"
  		    android:orientation="vertical"
  		    android:background="#00FF00" >
  		    <TextView 
  		        android:layout_width="fill_parent"
  		        android:layout_height="wrap_content"
  		        android:text="Este es el Fragment 1"
  		        android:textColor="#000000"
  		        android:textSize="25sp" />
  		
  		</LinearLayout>
  		

  Este fragment es muy básico y solo hemos añadido un TextView con un texto que nos indica que fragment es. Hemos definido un color de background para el LinearLayout muy llamativo, para poder ver luego la diferencia en la aplicación en ejecución.

  A continuación vamos al código java el cual tendrá todo el código de nuestro Fragment, como si de una Activity se tratara:

  		public class Fragment1 extends Fragment {
  
  			@Override
  			public View onCreateView(LayoutInflater inflater, ViewGroup container,
  					Bundle savedInstanceState) {
  				// TODO Auto-generated method stub
  				
  				// Inflamos el Layout con el fragment
  				return inflater.inflate(R.layout.fragment1, container, false);
  			}
  			
  		}
  		

  En el método onCreateView retornamos un objeto de la clase View. Este View será nuestro fragment, y como podemos ver lo hemos rellenado con nuestro archivo fragment1.xml

  Con esto, ya tendríamos nuestro primer Fragment listo.

• Fragment2

  El Fragment2 no difiere demasiado del Fragment1, cambiaremos un poco en su archivo xml y poco mas en su Fragment2.java.

  		<?xml version="1.0" encoding="utf-8"?>
  		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  		    android:layout_width="match_parent"
  		    android:layout_height="match_parent"
  		    android:orientation="vertical"
  		    android:background="#FFFE00" >
  		    <TextView 
  		        android:layout_width="fill_parent"
  		        android:layout_height="wrap_content"
  		        android:text="Este es el Fragment 2"
  		        android:textSize="25sp"
  		        android:textColor="#000000"/>
  		    
  		
  		</LinearLayout>		
  		

  En este caso, la interfaz de nuestro fragment2.xml es igual, excepto por el color de fondo, que es amarillo, y el texto, que nos informa de que pertenece al Fragment2.

  En la clase Fragment2.java, lo único que cambiamos es la referencia al archivo layout que hemos usado, ya que el Fragment2 tiene su propio layout:

  		public class Fragment2 extends Fragment {
  
  			@Override
  			public View onCreateView(LayoutInflater inflater, ViewGroup container,
  					Bundle savedInstanceState) {
  				// TODO Auto-generated method stub
  				
  				// Inflamos el layout con el fragment
  				return inflater.inflate(R.layout.fragment2, container, false);
  			}
  		
  		}
  		

Una vez tenemos todo realizado, las piezas encajan, y podemos ejecutar nuestra aplicación, la cual al ejecutarse veremos como nuestra actividad principal está partida en 2, y en cada mitad tenemos un Fragment, el Fragment1 a la izquierda, y el Fragment2 a la derecha, y con los colores tan llamativos nos daremos cuenta inmediatamente.

Aquí vemos un vídeo, para verlo en ejecución:

---

En esta entrada, hemos podido introducirnos un poco en los Fragment, lo cual como veremos en futuras entradas, pueden ser muy reutilizables y pueden comunicarse entre sí por tanto tendremos pequeñas actividades funcionando dentro de una misma actividad.

El Código de este ejemplo podeis bajarlo de aquí

Sin mas, cualquier aporte o corrección son bienvenidos. Saludos!!!