Ejemplo práctico: implementación de Fragments en una App Android

29/08/2014
Interfaz usuario, Nivel Básico, Notificaciones, Premium

Vamos a desarrollar un pequeño proyecto Android para mostrar de forma práctica la implementación y el uso de Fragments.

En este ejemplo, definiremos un directorio de contactos, utilizando una vista tipo Master/Details (*), que permitirá seleccionar un contacto de una lista situada a la izquierda de la pantalla, mostrando información del mismo en la parte derecha. Para ello crearemos una Activity principal, encargada de definir los dos Fragments necesarios para mostrar ambas áreas de información, que heredará de la clase FragmentActivity.

(*): tipo de vista que permite manejar las relaciones Padre/Hijo o Master/Details, posibilitando mostrar el detalle del encabezado seleccionado o Maestro.

Como es habitual, puedes descargar todo el código del proyecto al final de este tutorial.

Elementos necesarios para el proyecto

Una Activity principal que herede de FragmentActivity, y definir dos layout de tipo Fragment.
Una clase que herede de Fragment, un Array de Objetos Contacto ya inicializados, un componente de tipo ListView y un adapter para cargarlo en este último.
Una clase que herede de Fragment, para mostrar en un componente de tipo TextView información sobre el contacto seleccionado.
Una clase Contacto, encargada de almacenar y devolver los valores asignados.

Contactos/src/com.academiaandroid.contactos/MainActivity.java

[...]

	//Se referencia la Clase FragmentLista para acceder a la interfaz definida. 
	import com.academiaandroid.contactos.FragmentLista.ContactoListener;

[...]

	/*La Clase MainActivity debe heredar de FragmentActivity, ya que se trata de la clase base para poder usar Fragments en una Activity*/
	public class MainActivity extends FragmentActivity implements ContactoListener{

[...]

 	//Se declara y enlaza la clase FragmentLista con el componente definido a nivel de layout.
      FragmentLista frgListado 	=(FragmentLista)getSupportFragmentManager().findFragmentById
	(R.id.fragmentListaContactos);
        
      //Se realiza la llamada al método setContactoListener() indicándolo como 	parámetro el contexto.
      frgListado.setContactoListener(this);

[...]

	//Método que se ejecutará cuando se seleccione un contacto de la lista.
	@Override
	public void onContactoSeleccionado(Contacto c) {
	boolean detalle = (getSupportFragmentManager().findFragmentById(R.id.fragmentInformacion) != null);
		 
		if(detalle) {
		            ((FragmentInfoContacto)getSupportFragmentManager()
		            .findFragmentById(R.id.fragmentInformacion))
		            .mostrarDetalle("Nombre: " + c.getNombre() + "\nApellidos: " + c.getApellidos() 
		            + "\nTeléfono: " + c.getTelefono() + "\nDirección: " + c.getDireccion());
		        	}		        
	}	

[...]

[...]

//Se referencia la Clase FragmentLista para acceder a la interfaz definida.

import com.academiaandroid.contactos.FragmentLista.ContactoListener;

[...]

/*La Clase MainActivity debe heredar de FragmentActivity, ya que se trata de la clase base para poder usar Fragments en una Activity*/

public class MainActivity extends FragmentActivity implements ContactoListener{

[...]

//Se declara y enlaza la clase FragmentLista con el componente definido a nivel de layout.

FragmentLista frgListado =(FragmentLista)getSupportFragmentManager().findFragmentById

(R.id.fragmentListaContactos);

//Se realiza la llamada al método setContactoListener() indicándolo como parámetro el contexto.

frgListado.setContactoListener(this);

[...]

//Método que se ejecutará cuando se seleccione un contacto de la lista.

@Override

public void onContactoSeleccionado(Contacto c) {

boolean detalle = (getSupportFragmentManager().findFragmentById(R.id.fragmentInformacion) != null);

if(detalle) {

((FragmentInfoContacto)getSupportFragmentManager()

.findFragmentById(R.id.fragmentInformacion))

.mostrarDetalle("Nombre: " + c.getNombre() + "\nApellidos: " + c.getApellidos()

+ "\nTeléfono: " + c.getTelefono() + "\nDirección: " + c.getDireccion());

}

[...]

Contactos/src/com.academiaandroid.contactos/Contacto.java

[...]

	//Clase encargada de almacenar los valores del nombre, apellido, teléfono y dirección de un contacto.
	public class Contacto {
	
		private String nombre;
[...]

	public Contacto(String nombre, String apellidos, String telefono, String direccion)
	{
		this.nombre = nombre;

[...]

	//Devuelve el valor almacenado en el campo nombre
	public String getNombre() {
		return nombre;
	}
	
	//Almacena un valor en el campo nombre
	public void setNombre(String nombre) {
		this.nombre = nombre;
	}

[...]

//Clase encargada de almacenar los valores del nombre, apellido, teléfono y dirección de un contacto.

public class Contacto {

private String nombre;

[...]

public Contacto(String nombre, String apellidos, String telefono, String direccion)

{

this.nombre = nombre;

[...]

//Devuelve el valor almacenado en el campo nombre

public String getNombre() {

return nombre;

}

//Almacena un valor en el campo nombre

public void setNombre(String nombre) {

this.nombre = nombre;

}

Contactos/src/com.academiaandroid.contactos/FragmentLista.java

[...]

	//Clase que heredará de Fragment para implementar los métodos onCreateView() y onActivityCreated().
	public class FragmentLista extends Fragment {

[...]

	/*Método dónde se crea el Fragment y se asigna el layout a este. En este Fragment se define un control de selección ListView para mostrar la lista de contactos.*/
	@Override
    	public View onCreateView(LayoutInflater inflater,
                             ViewGroup container,
                             Bundle savedInstanceState) {
 
        	return inflater.inflate(R.layout.fragment_lista_contactos, container,false);
    }

[...]

	/*Método que se ejecutará cuando la Activity del Fragment esté completamente creada.*/
	@Override
    	public void onActivityCreated(Bundle state) {
        super.onActivityCreated(state);
        
        //Asignamos al componente ListView el recurso definido a nivel de Layout.
        listaContactosLV = (ListView)getView().findViewById(R.id.listContactos); 
        
        //Cargamos el adaptador en el componente ListView.
        listaContactosLV.setAdapter(new AdapterListaContactos(this));
        
        //Evento encargado de controlar que elemento de la lista ha sido seleccionado.
        listaContactosLV.setOnItemClickListener(new OnItemClickListener() {
        	@Override
            public void onItemClick(AdapterView<?> list, View view, int pos, long id) {
                if (contactoListener!=null) {
                	contactoListener.onContactoSeleccionado(
                  Contacto)listaContactosLV.getAdapter().getItem(pos));

			Contacto contacto = (Contacto)list.getItemAtPosition(pos);
                	Toast.makeText(getActivity(), "Contacto Seleccionado: " + contacto.getNombre(), Toast.LENGTH_LONG).show();
                }
            }
		});        
    	}

[...]

	/*Método que se encargará de construir un nuevo objeto View con el layout creado a partir de esta nueva Activity, mostrando en cada una de las líneas del ListView esta nueva vista.*/
      public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View item = inflater.inflate(R.layout.list_item_contactos, null);

        TextView tvNombre = (TextView)item.findViewById(R.id.tvNombre);
        tvNombre.setText(contacto[position].getNombre());

        TextView tvTelefono = (TextView)item.findViewById(R.id.tvTelefono);
        tvTelefono.setText(contacto[position].getTelefono());

        return(item);
    }

[...]

[...]

//Clase que heredará de Fragment para implementar los métodos onCreateView() y onActivityCreated().

public class FragmentLista extends Fragment {

[...]

/*Método dónde se crea el Fragment y se asigna el layout a este. En este Fragment se define un control de selección ListView para mostrar la lista de contactos.*/

@Override

public View onCreateView(LayoutInflater inflater,

ViewGroup container,

Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_lista_contactos, container,false);

}

[...]

/*Método que se ejecutará cuando la Activity del Fragment esté completamente creada.*/

@Override

public void onActivityCreated(Bundle state) {

super.onActivityCreated(state);

//Asignamos al componente ListView el recurso definido a nivel de Layout.

listaContactosLV = (ListView)getView().findViewById(R.id.listContactos);

//Cargamos el adaptador en el componente ListView.

listaContactosLV.setAdapter(new AdapterListaContactos(this));

//Evento encargado de controlar que elemento de la lista ha sido seleccionado.

listaContactosLV.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> list, View view, int pos, long id) {

if (contactoListener!=null) {

contactoListener.onContactoSeleccionado(

Contacto)listaContactosLV.getAdapter().getItem(pos));

Contacto contacto = (Contacto)list.getItemAtPosition(pos);

Toast.makeText(getActivity(), "Contacto Seleccionado: " + contacto.getNombre(), Toast.LENGTH_LONG).show();

}

});

}

[...]

/*Método que se encargará de construir un nuevo objeto View con el layout creado a partir de esta nueva Activity, mostrando en cada una de las líneas del ListView esta nueva vista.*/

public View getView(int position, View convertView, ViewGroup parent) {

LayoutInflater inflater = context.getLayoutInflater();

View item = inflater.inflate(R.layout.list_item_contactos, null);

TextView tvNombre = (TextView)item.findViewById(R.id.tvNombre);

tvNombre.setText(contacto[position].getNombre());

TextView tvTelefono = (TextView)item.findViewById(R.id.tvTelefono);

tvTelefono.setText(contacto[position].getTelefono());

return(item);

}

[...]

Contactos/src/com.academiaandroid.contactos/FragmentInfoContacto.java

[...]
//Clase que heredará de Fragment para implementar el método onCreateView().
public class FragmentInfoContacto extends Fragment{
	/*Método dónde se crea el Fragment y se asigna el layout a este. En este Fragment se definen los elementos necesarios para mostrar la información del contacto seleccionado.*/	
	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
 
        	return inflater.inflate(R.layout.fragment_info_contactos, 
		container, false);
    	}
	
	//Método que mostrará los datos del contacto seleccionado.
    	public void mostrarDetalle(String texto) {
        TextView txtInformacion =
            (TextView)getView().findViewById(R.id.informacionTV);
        	 txtInformacion.setText(texto);
    		}
	}
[...]

[...]

//Clase que heredará de Fragment para implementar el método onCreateView().

public class FragmentInfoContacto extends Fragment{

/*Método dónde se crea el Fragment y se asigna el layout a este. En este Fragment se definen los elementos necesarios para mostrar la información del contacto seleccionado.*/

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_info_contactos,

container, false);

}

//Método que mostrará los datos del contacto seleccionado.

public void mostrarDetalle(String texto) {

TextView txtInformacion =

(TextView)getView().findViewById(R.id.informacionTV);

txtInformacion.setText(texto);

}

[...]

Contactos/res/layout/activity_main.xml

[...]

 <fragment
        android:id="@+id/fragmentListaContactos"
        android:layout_width="0px"
        android:layout_height="match_parent"
        android:layout_marginRight="10dp"
        android:layout_weight="30"
        class="com.academiaandroid.contactos.FragmentLista" />
 
    <fragment class="com.academiaandroid.contactos.FragmentInfoContacto"
        android:id="@+id/fragmentInformacion"
        android:layout_weight="70"
        android:layout_width="0px"
        android:layout_height="match_parent" />

[...]

[...]

<fragment

android:id="@+id/fragmentListaContactos"

android:layout_width="0px"

android:layout_height="match_parent"

android:layout_marginRight="10dp"

android:layout_weight="30"

class="com.academiaandroid.contactos.FragmentLista" />

<fragment class="com.academiaandroid.contactos.FragmentInfoContacto"

android:id="@+id/fragmentInformacion"

android:layout_weight="70"

android:layout_width="0px"

android:layout_height="match_parent" />

[...]

Contactos/res/layout/fragment_lista_contactos.xml

[...]

<ListView
        android:id="@+id/listContactos"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_weight="1" >
   </ListView>

[...]

[...]

<ListView

android:id="@+id/listContactos"

android:layout_width="match_parent"

android:layout_height="400dp"

android:layout_alignParentBottom="true"

android:layout_alignParentEnd="true"

android:layout_alignParentLeft="true"

android:layout_weight="1" >

</ListView>

[...]

Contactos/res/layout/fragment_info_contactos .xml

[...]

<TextView
        android:id="@+id/informacionTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="43dp"
        android:layout_marginTop="47dp"
        android:background="#BAB6B6"
        android:text="Aquí se mostrará la información complementaria del contacto seleccionado"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="#ffffff" />

[...]

[...]

<TextView

android:id="@+id/informacionTV"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:layout_marginLeft="43dp"

android:layout_marginTop="47dp"

android:background="#BAB6B6"

android:text="Aquí se mostrará la información complementaria del contacto seleccionado"

android:textAppearance="?android:attr/textAppearanceMedium"

android:textColor="#ffffff" />

[...]

Contactos/res/layout/list_item_contactos.xml

[...]
<TableLayout>
<TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tvNombre"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sin Nombre"
            android:textAppearance="?android:attr/textAppearanceLarge" />

    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tvTelefono"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sin Teléfono"
            android:textAppearance="?android:attr/textAppearanceSmall" />

    </TableRow>

   </TableLayout>

[...]

[...]

<TableRow

android:id="@+id/tableRow1"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >

<TextView

android:id="@+id/tvNombre"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Sin Nombre"

android:textAppearance="?android:attr/textAppearanceLarge" />

</TableRow>

<TableRow

android:id="@+id/tableRow2"

android:layout_width="wrap_content"

android:layout_height="wrap_content" >

<TextView

android:id="@+id/tvTelefono"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Sin Teléfono"

android:textAppearance="?android:attr/textAppearanceSmall" />

</TableRow>

</TableLayout>

[...]

Descarga del proyecto

(formato zip, tamaño 3,8 MB)

Download

En la siguiente publicación de esta serie, explicaremos todo este proyecto en un videotutorial

fragments interfaz usuario

Academia Android

Esta entrada tiene un comentario

Funcionalidades en Android Studio: editor de layout, selección de colores para diseño y depuración | Academia Android dice:

04/02/2015 a las 1:04 pm

[…] a detallar este proyecto, ya que no es el objetivo de esta publicación (si te interesa, puedes consultar otros tutoriales donde desarrollamos una App de lista de contactos). Comentaremos tan solo que la aplicación […]

Los comentarios están cerrados.

Elementos necesarios para el proyecto

Descarga del proyecto

Share This

Academia Android

Entradas relacionadas

Esta entrada tiene un comentario