Proyectos de desarrollo para dispositivos móviles

Fragmentos Android

Fragmento❖ Un fragmento es una parte de una actividad con ciclo de

vida propio.

❖ Recibe sus propios eventos.

❖ Se puede agregar o quitar mientras la actividad se está ejecutando.

❖ Se puede decir que es una "subActividad".

❖ Permiten reusar código.

Una actividad, tres fragmentos

Actividad

FragmentoA

FragmentoB

FragmentoC

Diferentes pantallas❖ Los fragmentos permiten configurar la GUI dependiendo de la

pantalla en que corre la app.

Ciclo de vida del fragmento

❖ Normalmente sobrescribimos los métodos del ciclo de vida:

➡ onCreate

➡ onCreateView

➡ onPause

Ejercicio

❖ Crea un proyecto nuevo:

PruebaFragmentos

❖ Selecciona el template:

Bottom Navigation Activity❖ Nombre de la actividad inicial:

Principal

Revisa el proyectoRevisa el código y determina:

‣ Cómo se agrega la barra de navegación.

‣ Cómo se configuran los botones de la barra de navegación.

‣ Cómo responder a los eventos, de los botones, de la barra de navegación.

‣ Corre la app y observa el comportamiento.

‣ Agrega un nuevo botón.

Creando fragmentos❖ Crea un fragmento para la

opción de Home.❖ Observa que se crea un

archivo .java y otro .xml❖ Crea la interfaz de usuario

para este fragmento.

Agregando fragmentosLa forma más sencilla de agregar un fragmento es con un componente <fragment>, pero también es la menos flexible.

De esta manera puedes agregar fragmentos 'estáticos', es decir se comportan como cualquier otro componente.

Agregando fragmentos de manera dinámica

❖ Los fragmentos se pueden manipular de manera dinámica.

❖ Agregamos un 'contenedor' a la interfaz y con programación podemos poner/quitar fragmentos.

Agregar un fragmento

HomeFrag fragHome = new HomeFrag();

FragmentManager fm = getSupportFragmentManager();

FragmentTransaction transaccion = fm.beginTransaction();

transaccion.replace(R.id.contFragmentos, fragHome);

transaccion.commit();

Opciones para agregar fragmentosHomeFrag fragHome = new HomeFrag(); FragmentManager fm = getSupportFragmentManager(); FragmentTransaction transaccion = fm.beginTransaction(); transaccion.replace(R.id.contFragmentos, fragHome);

transaccion.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);

transaccion.addToBackStack(null); // Pila de pantallas

transaccion.commit();

Ahora te toca a tiCrea los otros 3 fragmentos para completar la app. Muestra el correspondiente cada vez que el usuario selecciona un botón diferente en la barra de navegación.

Práctica

❖ Implementamos una app que muestre un índice con una lista de materias.

❖ Al oprimir una materia se carga la información detallada.

❖ En el teléfono hay dos actividades.

❖ En la tableta, hay una sola mostrando la lista y los detalles.

DiseñoMaestroActiv DetalleActiv

<fragment>MateriaDetalleFrag

- indice+ setIndice

Creando el proyecto

❖ Crea el proyecto Materias.

❖ La actividad principal es MaestroActiv. Empty Activity.

❖ SDK mínimo 19.❖ Crea una segunda actividad

DetalleActiv. Empty Activity.

Navegación❖ Agrega un botón de prueba en la actividad principal.

❖ Al hacer click al botón, inicia la segunda actividad por medio de un Intent.

❖ Crea un emulador de tablet y prueba la app tanto en teléfono como en tableta.

Agregando un fragmento

❖ Agrega un fragmento en blanco al proyecto.

❖ Nombre: MateriaDetalleFrag.

❖ Pide que se cree el archivo XML.

Layout del fragmento

1. fragment_materia_detalle.xml

❖ Agrega/Modifica el TextView (tvTitulo) como título que contendrá el nombre de la materia que se despliega.

❖ Agrega un TextView (tvDetalle). Ocupa todo el espacio inferior disponible para desplegar la información de la materia.

Agregando un fragmento2. activity_detalle.xml

❖ Utiliza un componente fragment para agregar el fragmento al layout de detalle.

DetalleActiv<fragment> fragDetalleMateriaDetalleFrag

- indice+ setIndice

DiseñoMaestroActiv

findF

ragm

entB

yId

Comunicándonos con el Fragmento❖ Crea la clase Materia que servirá para proporcionar los

datos que queremos desplegar.❖ https://gist.github.com/rmroman/4fdacaefb1dcf352f0ba97cd5ec2ec85

❖ Ahora, la actividad (DetalleActiv) necesita indicarle al fragmento cuál materia desplegar.

❖ Agrega a MateriaDetalleFrag una variable de instancia indice de tipo int y el método set.

FragmentManager❖ Para comunicarse con el fragmento, la actividad

requiere una referencia al fragmento.

❖ Esto se logra con el método findFragmentById() del administrador de fragmentos.

MateriaDetalleFrag fragmento = (MateriaDetalleFrag)getSupportFragmentManager().findFragmentById(R.id.fragMateriaDetalle);

❖ Si ya tenemos la referencia, podemos enviar el indice que se quiere mostrar usando el método setIndice.fragmento.setIndice(1); // Prueba rápida

Cambiando propiedades del fragmento❖ En el método onStart(), recuperamos las referencias a

los componentes que queremos modificar.@Override public void onStart() { super.onStart();

View v = getView(); if (v != null) { TextView tvMateria = v.findViewById(R.id.tvMateria); TextView tvDetalle = v.findViewById(R.id.tvDetalle); Materia materia = Materia.materias[indice]; tvMateria.setText(materia.getNombre()); tvDetalle.setText(materia.getDescripcion()); } }

Implementa la lista de materias❖ Crea un nuevo fragmento sin layout, llámalo

ListaMateriasFrag.

❖ Cambia la superclase y el método onCreate.public class ListaMateriasFrag extends ListFragment { public ListaMateriasFrag() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return super.onCreateView(inflater, container, savedInstanceState); } }

Datos para la lista

❖ En el método onCreateView vamos a crear el adaptador de la lista.

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

String[] materias = new String[Materia.materias.length]; for(int i=0; i<materias.length; i++) { materias[i] = Materia.materias[i].getNombre(); }

ArrayAdapter<String> adaptador = new ArrayAdapter<String>(inflater.getContext(), android.R.layout.simple_list_item_1, materias);

setListAdapter(adaptador);

return super.onCreateView(inflater, container, savedInstanceState); }

DetalleActiv<fragment> fragDetalleMateriaDetalleFrag

- indice+ setIndice

DiseñoMaestroActiv

<fragment> ListaMateriasFrag

findF

ragm

entB

yId

Agrega la lista a la actividad principal❖ En activity_maestro.xml agregamos un fragment de tipo

ListaMateriasFrag.

❖ Corre la app y observa cómo despliega la lista de materias.

❖ Solo falta detectar el click sobre la materia y llamar al detalle con el dato correspondiente.❖ Este click lo detecta el fragmento, lee el índice correspondiente

y lo manda a la actividad, para que, a su vez, lo reenvíe a la actividad de Detalle. Después la actividad de detalle lo manda al fragmento detalle para mostrar el detalle de la materia. 😁

DetalleActiv<fragment> fragDetalleMateriaDetalleFrag

- indice+ setIndice

DiseñoMaestroActiv

<fragment> ListaMateriasFrag

indice

click

indice

Interfaces❖ Declara una interface en el fragmento de la lista.

static interface Listener { void itemClicked(long id); }

private Listener listener;

❖ En el método onAttach, guarda el contexto (actividad)public void onAttach(Context context) { super.onAttach(context); this.listener = (Listener)context; }

❖ Sobrescribe el método que recibe el evento.public void onListItemClick(ListView l, View v, int position, long id) { if (listener!=null) { listener.itemClicked(position); } }

Implementando la interface

❖ Implementa la interface en la actividad principal y sobrescribe el método itemClicked.

public class MaestroActiv extends AppCompatActivity implements ListaMateriasFrag.Listener { @Override public void itemClicked(int posicion) { Intent intDetalle = new Intent(this, DetalleActiv.class); intDetalle.putExtra("ID", posicion); startActivity(intDetalle); } }

Terminando❖ Finalmente, en la actividad de Detalle, lee el valor que

se pasó en el Intent y envíalo al fragmento.public class DetalleActiv extends AppCompatActivity {

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detalle);

MateriaDetalleFrag fragmento = (MateriaDetalleFrag)getSupportFragmentManager().findFragmentById(R.id.fragMateria); //fragmento.setId(1); int id = getIntent().getExtras().getInt("ID"); fragmento.setId(id); } }