Implementar Maestro-Detalle con Fragments en Android

Buenas tardes, debido a que he recibido varios comentarios o peticiones sobre crear aplicaciones con Fragment y la funcionalidad de Maestro-Detalle, me he decidido a subir esta entrada.

---

La funcionalidad Maestro-Detalle es importante cuando vamos a desarrollar aplicaciones para dispositivos que son Tablet, ya que gracias a los Fragment podemos tener varios paneles a la vez en la pantalla. En el caso de que nuestra apiicación tenga como uso final solo los SmartPhone, esta funcionalidad no es mala idea, pero no le sacaríamos todo el potencial, ya que la diferencia entre tamaños de pantalla es bastante grande (aunque cada vez menos). En el caso de que nuestra aplicación tenga como finalidad cubrir los SmartPhone y las Tablets, es buena idea implementar este tipo de funcionalidad, ya que podemos controlar cuando el dispositivo es Tablet o SmartPhone, y así con una sola aplicación cubrir ambos dispositivos. Ahora mismo parece una locura, pero lo veremos a lo largo de la entrada.

Con esta pequeña introducción nos ponemos manos a la obra:

• Creación del Proyecto

  Para comenzar vamos a crear un proyecto de aplicación Android. Para ello nos dirigiremos a File->New->Android Application Project. Si no encontramos esta opción vamos a Other, y en la lista que nos aparece buscamos la opción deseada. También podemos introducir «Android» en el campo de texto para filtrar los resultados y que sea mas rápido.

  Una vez aceptemos el tipo de proyecto, nos aparecerá el asistente de Android, en el cual a través de unos simples pasos tendremos nuestro proyecto creado. En la primera ventana se nos da a elegir el nombre de nuestra aplicación, al igual que el nombre del proyecto. En mi caso lo he llamado «EjemploMaestroDetalle» aunque el nombre es lo de menos y podéis asignarle el que querais. El resto podeis dejarlo como querais o cambiar el rango de versiones de Android que vais a cubrir según vuestras necesidades.

  A medida que avancemos nos aparecerá la opción de crear nuestra primera Activity y su layout, en mi caso he dejado el nombre como está, MainActivity y su layout como activity_main.

  Una vez terminemos el asistente, tendremos nuestro proyecto listo y creado para seguir construyendo nuestra aplicación.

• TituloFragment

  Antes de meternos con la Activity vamos a crear lo necesario para montar todo en la Activity. Para esta funcionalidad vamos a necesitar 2 Fragment, uno será un ListFragment que contendrá una lista de lo que sea, y otro Fragment que contendrá el contenido adecuado del elemento pulsado en el ListFragment.

  En este punto vamos a desarrollar la funcionalidad e importancia que tendrá este ListFragment. Vamos a ver su código, que luego explicaremos paso a paso:

  		public class TituloFragment extends ListFragment {
  
  			onTituloSelectedListener mCallback;
  		
  			// Interface que la Activity contenedora debe implementar
  			// para poder tener comunicación
  			public interface onTituloSelectedListener {
  				public void onTituloSelected(int position);
  			}
  		
  			@Override
  			public void onCreate(Bundle savedInstanceState) {
  				// TODO Auto-generated method stub
  				super.onCreate(savedInstanceState);
  				
  				// Establecemos el Adapter cuando se crea el Fragment
  				setListAdapter(new ArrayAdapter<String>(getActivity(),
  						android.R.layout.simple_list_item_1, Contenido.titulos));
  			}
  		
  			@Override
  			public void onAttach(Activity activity) {
  				// TODO Auto-generated method stub
  				super.onAttach(activity);
  				// Inicializamos nuestra variable de referencia del tipo
  				// onTituloSelectedListener junto con el valor del objeto
  				// activity que debe ser una Activity que implemente esta interface
  				try {
  					mCallback = (onTituloSelectedListener) activity;
  				} catch (ClassCastException e) {
  					Log.d("ClassCastException",
  							"La Activity debe implementar esta Interface");
  				}
  			}
  		
  			@Override
  			public void onListItemClick(ListView l, View v, int position, long id) {
  				// TODO Auto-generated method stub
  				super.onListItemClick(l, v, position, id);
  				
  				// Llamamos al método que implementa la Activity pasandole
  				// la posicion del elemento que hemos pulsado
  				mCallback.onTituloSelected(position);
  			}
  		
  		}
  		

  Como podemos observar en grandes rasgos, vemos que tiene una interface, carga un array en la lista y poco más. Vamos a analizar los elementos:

  • onTituloSelectedListener

    Esta interface es la que vamos a usar para comunicar este ListFragment con el otro Fragment, y esto se hará a través de la FragmentActivity o Activity.

    				public interface onTituloSelectedListener {
    					public void onTituloSelected(int position);
    				}
    				

  • onCreate

    En este método, perteneciente al ciclo de vida del Fragment vamos a establecer el ArrayAdapter en la lista, para cargar una serie de elementos.

    				@Override
    				public void onCreate(Bundle savedInstanceState) {
    					// TODO Auto-generated method stub
    					super.onCreate(savedInstanceState);
    					
    					// Establecemos el Adapter cuando se crea el Fragment
    					setListAdapter(new ArrayAdapter<String>(getActivity(),
    							android.R.layout.simple_list_item_1, Contenido.titulos));
    				}
    				

  • onAttach

    En este método, también perteneciente al ciclo de vida de los Fragment vamos a poder instanciar la variable de instancia que hemos definido, que es del tipo onTituloSelectedListener, exactamente, la interface que hemos creado. Esto lo hacemos para que pueda haber comunicación entre nuestra Activity y este Fragment. En el caso de que la Activity no implemente la interface recibiremos una excepción del tipo ClassCastException.

    				@Override
    				public void onAttach(Activity activity) {
    					// TODO Auto-generated method stub
    					super.onAttach(activity);
    					// Inicializamos nuestra variable de referencia del tipo
    					// onTituloSelectedListener junto con el valor del objeto
    					// activity que debe ser una Activity que implemente esta interface
    					try {
    						mCallback = (onTituloSelectedListener) activity;
    					} catch (ClassCastException e) {
    						Log.d("ClassCastException",
    								"La Activity debe implementar esta Interface");
    					}
    				}
    				

  • onListItemClick

    Este método viene con la clase ListFragment y nos debe de ser ya conocido de los ListView. Lo único que hará es llamar al método que la Activity implementa, pasandole la posición del elemento que hemos pulsado, y en la Activity se redirige el resto.

    				@Override
    				public void onListItemClick(ListView l, View v, int position, long id) {
    					// TODO Auto-generated method stub
    					super.onListItemClick(l, v, position, id);
    					
    					// Llamamos al método que implementa la Activity pasandole
    					// la posicion del elemento que hemos pulsado
    					mCallback.onTituloSelected(position);
    				}
    				

• ContenidoFragment

  Esta es la clase del otro Fragment que vamos a usar y será el encargado de mostrar el contenido para un elemento que pulsemos en el ListFragment. En este Fragment debemos implementar algún método más, ya que recibirá una posición y tendremos que tratar con ella para mostrar el contenido.

  Vamos a ver su código para luego comentar cada método que necesitemamos implementar:

  		public class ContenidoFragment extends Fragment {
  			public static final String POSICION = "position";
  			int position = -1;
  		
  			@Override
  			public View onCreateView(LayoutInflater inflater, ViewGroup container,
  					Bundle savedInstanceState) {
  				// TODO Auto-generated method stub
  		
  				// Comprobamos si se recupera de un estado anterior
  				if (savedInstanceState != null) {
  					position = savedInstanceState.getInt("position");
  				}
  		
  				return inflater.inflate(R.layout.contenido_fragment, container, false);
  			}
  		
  			@Override
  			public void onStart() {
  				// TODO Auto-generated method stub
  				super.onStart();
  		
  				// Comprobamos si tenemos argumentos
  				Bundle args = getArguments();
  				if (args != null) {
  					// Si tenemos argumentos, establecemos la posicion
  					actualizarContenido(args.getInt(POSICION));
  				} else if (position != -1) {
  					// Si la variable de instancia es diferente a -1
  					// quiere decir que nos hemos recuperado de un estado anterior
  					// y actualizamos el contenido
  					actualizarContenido(position);
  				}
  			}
  		
  			public void actualizarContenido(int position) {
  		
  				// Instanciamos el TextView y establecemos el contenido
  				TextView tvContenido = (TextView) getActivity().findViewById(
  						R.id.tvContenido);
  				tvContenido.setText(Contenido.descripcion[position]);
  		
  				// Guardamos la posicion del elemento que estamos consultando
  				this.position = position;
  			}
  		
  			@Override
  			public void onSaveInstanceState(Bundle outState) {
  				// TODO Auto-generated method stub
  				super.onSaveInstanceState(outState);
  		
  				// Guardamos el estado de la posicion del elemento
  				// que estábamos consultando
  				outState.putInt(POSICION, position);
  			}
  		
  		}
  		

  Analicemos todo por partes:

  • onCreateView

    Este método pertenece al ciclo de vida de los Fragment. en él vamos a crear el View del Fragment, que será «inflado» por el objeto de la clase LayoutInflater haciendo uso de un layout muy simple, el cuál únicamente contiene un TextView.

    Observamos también que tratamos el objeto savedInstanceState para comprobar si el Fragment se está recuperando de un estado anterior. Con esto controlaremos que si por algún caso hemos cambiado orientación de la pantalla o algo, al recrearse el Fragment volvamos a tener disponible el contenido que estábamos usando, y no ninguno en su lugar.

    				@Override
    				public View onCreateView(LayoutInflater inflater, ViewGroup container,
    						Bundle savedInstanceState) {
    					// TODO Auto-generated method stub
    			
    					// Comprobamos si se recupera de un estado anterior
    					if (savedInstanceState != null) {
    						position = savedInstanceState.getInt("position");
    					}
    			
    					return inflater.inflate(R.layout.contenido_fragment, container, false);
    				}
    				

  • actualizarContenido

    Este método debemos crearlo y será el encargado de recibir un entero con un valor, el cual trataremos. Instanciaremos el TextView del layout, para tener acceso a el y a continuación estableceremos su contenido en base al entero que hemos recibido.

    				public void actualizarContenido(int position) {
    
    					// Instanciamos el TextView y establecemos el contenido
    					TextView tvContenido = (TextView) getActivity().findViewById(
    							R.id.tvContenido);
    					tvContenido.setText(Contenido.descripcion[position]);
    			
    					// Guardamos la posicion del elemento que estamos consultando
    					this.position = position;
    				}
    				

  • onStart

    Este método también pertenece al ciclo de vida de los Fragment y lo usaremos para llamar al método actualizarContenido. Este método se ejecuta cuando el Fragment ya ha sido creado, y se ha empezado a ejecutar. Comprobamos si tiene algún argumento mediante el uso de la clase Bundle. Si este objeto no es null vamos a extraer el dato guardado y lo vamos a mandar al método actualizarContenido el cual tratará con el entero que hemos extraído. En el caso de que nuestra variable de instancia tenga un valor de -1, vamos a actualizar el contenido con el valor de nuestra variable de instancia, lo que quiere decir que el Fragment se ha recuperado de un estado anterior.

    				@Override
    				public void onStart() {
    					// TODO Auto-generated method stub
    					super.onStart();
    			
    					// Comprobamos si tenemos argumentos
    					Bundle args = getArguments();
    					if (args != null) {
    						// Si tenemos argumentos, establecemos la posicion
    						actualizarContenido(args.getInt(POSICION));
    					} else if (position != -1) {
    						// Si la variable de instancia es diferente a -1
    						// quiere decir que nos hemos recuperado de un estado anterior
    						// y actualizamos el contenido
    						actualizarContenido(position);
    					}
    				}
    				

  • onSaveInstanceState

    Este método lo vamos a usar para guardar el estado del Fragment, ya que así podremos restaurarlo y volver a la aplicación justo por donde lo dejamos.

    				@Override
    				public void onSaveInstanceState(Bundle outState) {
    					// TODO Auto-generated method stub
    					super.onSaveInstanceState(outState);
    			
    					// Guardamos el estado de la posicion del elemento
    					// que estábamos consultando
    					outState.putInt(POSICION, position);
    				}
    				

• MainActivity

  Ahora sí vamos a implementar lo necesario para que nuestra aplicación funcione tanto en dispositivos SmartPhones como Tablets adaptando el diseño de la UI.

  Para comenzar vamos a ver que debemos crear 2 archivos xml para su layout. Uno vendrá ya creado y vamos a ver su contenido a continuación:

  		<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  		    xmlns:tools="http://schemas.android.com/tools"
  		    android:id="@+id/fragment_container"
  		    android:layout_width="match_parent"
  		    android:layout_height="match_parent"
  		    tools:context=".MainActivity" >
  		
  		</FrameLayout>
  		

  Como vemos tenemos un elemento FrameLayout el cuál será el contenedor del Fragment. Este layout será el que usará Android en caso de que el dispositivo sea SmartPhone.

  Ahora vamos a ir a la carpeta res/, donde crearemos otra carpeta dentro de ella, llamado layout-large. En esta carpeta vamos a crear un nuevo archivo layout, con el mismo nombre que el anterior, «activity_main.xml». Este layuot contendrá lo siguiente:

  		<?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:baselineAligned="false"
  		    android:orientation="horizontal" >
  		
  		    <fragment
  		        android:id="@+id/tituloFragment"
  		        android:name="sekth.droid.maestrodetalle.Fragments.TituloFragment"
  		        android:layout_width="0dp"
  		        android:layout_height="match_parent"
  		        android:layout_weight="1" />
  		
  		    <fragment
  		        android:id="@+id/contenidoFragment"
  		        android:name="sekth.droid.maestrodetalle.Fragments.ContenidoFragment"
  		        android:layout_width="0dp"
  		        android:layout_height="match_parent"
  		        android:layout_weight="3" />
  		
  		</LinearLayout>
  		

  vemos que al contrario que el anterior, vamos a tener un LinearLayout con orientación horizontal y almacenará 2 Fragment. Esto es así ya que en el caso de ejecutar la aplicación en una Tablet, directamente se usará este layout y tendremos nuestra funcionalidad Maestro-Detalle.

  Bien, ya tenemos los layouts, pero ahora tenemos que manejar como usarlos junto a nuestros Fragments y los distintos tipos de pantalla, vamos a ello.

  En el código de nuestra Activity tendremos lo siguiente:

  		public class MainActivity extends FragmentActivity implements
  				TituloFragment.onTituloSelectedListener {
  		
  			@Override
  			protected void onCreate(Bundle savedInstanceState) {
  				super.onCreate(savedInstanceState);
  				setContentView(R.layout.activity_main);
  		
  				// Comprobamos si estamos usando la version con
  				// con el FrameLayout
  				if (findViewById(R.id.fragment_container) != null) {
  					if (savedInstanceState != null) {
  						return;
  					}
  		
  					// Establecemos el ListFragment en el caso de que sea la version
  					// de un panel (SmartPhone)
  					TituloFragment fragment = new TituloFragment();
  					getSupportFragmentManager().beginTransaction()
  							.add(R.id.fragment_container, fragment, null).commit();
  				}
  			}
  		
  			@Override
  			public void onTituloSelected(int position) {
  				// TODO Auto-generated method stub
  		
  				// Comprobamos si tenemos disponible el Fragment de
  				// contenido
  				ContenidoFragment contFragment = (ContenidoFragment) getSupportFragmentManager()
  						.findFragmentById(R.id.contenidoFragment);
  		
  				if (contFragment != null) {
  					// Si está disponible, estamos en la versión de 2 paneles
  					contFragment.actualizarContenido(position);
  				} else {
  					// Si no está disponible, estamos en el layout
  					// del FrameLayout, y tenemos que cambiar los Fragment
  					contFragment = new ContenidoFragment();
  					Bundle args = new Bundle();
  		
  					// Establecemos la posición que hemos elegido
  					args.putInt(ContenidoFragment.POSICION, position);
  					contFragment.setArguments(args);
  		
  					// Reemplazamos el Fragment que había por el nuevo
  					getSupportFragmentManager().beginTransaction()
  							.replace(R.id.fragment_container, contFragment)
  							.addToBackStack(null).commit();
  				}
  			}
  		
  		}
  		

  Vamos a analizar todo parte por parte:

  • onCreate

    Este método pertenece al ciclo de vida de una Activity y es el primero en ejecutarse.

    				@Override
    				protected void onCreate(Bundle savedInstanceState) {
    					super.onCreate(savedInstanceState);
    					setContentView(R.layout.activity_main);
    			
    					// Comprobamos si estamos usando la version con
    					// con el FrameLayout
    					if (findViewById(R.id.fragment_container) != null) {
    						if (savedInstanceState != null) {
    							return;
    						}
    			
    						// Establecemos el ListFragment en el caso de que sea la version
    						// de un panel (SmartPhone)
    						TituloFragment fragment = new TituloFragment();
    						getSupportFragmentManager().beginTransaction()
    								.add(R.id.fragment_container, fragment, null).commit();
    					}
    				}
    				

    Lo primero que hacemos es comprobar si existe un View llamado «fragment_container». Esta View corresponde al FrameLayout de nuestro activity_main en la carpeta res/layout. Cuando ejecutamos la aplicación en un SmartPhone se comprobará el layout que se ha elegido, si estamos usando este layout, y la View con id «fragment_container» está disponible, quiere decir que estamos usando la versión en la que solo mostramos un Fragment a la vez, por tanto establecemos el ListFragment que hemos denominado TituloFragment.

    En el caso de que se ejecutara en una tablet, el resultado de la comprobación con el método findViewById sería null, y por tanto los Fragment ya estarían colocados, como hemos hecho en el layout para Tablets.

  • onTituloSelected

    Este método tenemos que implementarlo cuando nuestra Activity implementa la interface de nuestro TituloFragment. Aquí trataremos también si se está ejecutando la versión SmartPhone, en el cual deberemos reemplazar el Fragment que ya existe por el otro, o la versión de Tablet, en el cuál le mandaremos un extra con la posición.

    				@Override
    				public void onTituloSelected(int position) {
    					// TODO Auto-generated method stub
    			
    					// Comprobamos si tenemos disponible el Fragment de
    					// contenido
    					ContenidoFragment contFragment = (ContenidoFragment) getSupportFragmentManager()
    							.findFragmentById(R.id.contenidoFragment);
    			
    					if (contFragment != null) {
    						// Si está disponible, estamos en la versión de 2 paneles
    						contFragment.actualizarContenido(position);
    					} else {
    						// Si no está disponible, estamos en el layout
    						// del FrameLayout, y tenemos que cambiar los Fragment
    						contFragment = new ContenidoFragment();
    						Bundle args = new Bundle();
    			
    						// Establecemos la posición que hemos elegido
    						args.putInt(ContenidoFragment.POSICION, position);
    						contFragment.setArguments(args);
    			
    						// Reemplazamos el Fragment que había por el nuevo
    						getSupportFragmentManager().beginTransaction()
    								.replace(R.id.fragment_container, contFragment)
    								.addToBackStack(null).commit();
    					}
    				}
    				

    Lo primero que hacemos es comprobar si tenemos disponible un ContenidoFragment disponible. En el caso de que esté disponible quiere decir que estamos usando la versión de 2 paneles (Tablet), por tanto lo único que haremos es llamar a su método actualizarContenido pasandole un entero, que es la posición que hemos recibido como argumento.

    En caso contrario, estamos en la versión de 1 panel únicamente a la vez (SmartPhone) por lo que deberemos reemplazar el Fragment que ya existe por otro. Lo que haremos es instanciar el Fragment, crear un objeto de la clase Bundle para pasarle la posición y agregarselo. A continuación hacemos uso del método getSupportFragmentManager() para comenzar una transacción en la que reemplazaremos el contenido que ya existe por el nuevo Fragment. Luego hacemos uso del método addToBackStack() para poder volver al Fragment anterior y completamos el cambio con el método commit().

Con esto tendríamos ya nuestra aplicación funcionando tanto en Tablets como en SmartPhones con un comportamiento diferente debido a sus tipos de pantalla.

Vemos a continuación una serie de capturas de pantalla y un vídeo en el que vemos la diferencia entre ambos dispositivos.

Unos vídeos de los diferentes emuladores ejecutando la misma aplicación:

Ejemplo en Tablet:

Ejemplo en SmartPhone:

---

Con esta entrada hemos visto como adaptar nuestras aplicaciones tanto a dispositivos Tablet como SmartPhone por medio del uso de Fragment. Al principio puede ser algo complejo pero todo es tener claro lo que queremos hacer para hacerlo sin dudas y sin tener que cambiar la mitad de la aplicación mas adelante.

Este ejemplo es muy parecido al que se encuentra en la página web de Android Developer, el cuál es el siguiente: http://developer.android.com/training/basics/fragments/communicating.html . Comov eremos es prácticamente igual, ya que llegado a cierto punto todo termina pareciendose cuando tienen la misma funcionalidad.

El código usado en el ejemplo podéis descargarlo de aquí y está disponible también en GitHub: aquí

Sin más, cualquier aporte o corrección es bienvenido.

Saludos!!!