Veamos a comentar un segundo ejercicio de programación con Android que hace uso de los Fragments
Al final del post, este ejercicio nro 2 se encontrará publicado en nuestro repositorio público de GitHub:
Aclaro nuevamente que no se trata del material del curso descargado y subido a GitHub, sino que estoy siguiendo el enunciado planteado en el ejercicio y haciendo el proyecto de cero con el Android Studio, para fijar los conocimientos.
Comencemos:
Ejercicio nro 2: Tener un listado de productos, y cuando seleccionas un producto, se abre un nuevo fragment con el detalle. En el caso que se detecte que estamos en una tablet, el detalle estará integrado en la misma pantalla del listado....
Además de los conceptos de Fragments, tendremos que utilizar Table List con sus Adapters ....
Para poder comentar la
evolución del ejercicio, vamos a estar haciendo varios
push sobre el branch de GitHub, relatando los pasos intermedios.
Evolución:
Paso 1: "Creamos dos Fragments"- Commit & Push al Branch de GitHub
Comenzamos con el proyecto vacío y creamos dos Fragments:
Este estado intermedio los publicamos en GitHub bajo el blanch del ejercicio 02 de Android:
Y lo pueden ver reflejado en la historia del Branch por si les interesa partir de un estado intermedio de los fuentes. O sea, se realizó Commit & Push: "Paso 1: Creamos dos Fragments"
Paso 2: Objetivo: Crear una ListView
En el Fragmento uno, mostraremos un listado de 15 productos. Como el espacio es reducido, tendremos que armar un Tabla ListView, con su Adapter.
- Crearemos una clase Java Producto (id, nombre, descripción, precio)
- Creamos un ProductoAdapter que extiende de BaseAdapter para poder paginar sobre los productos
- Creamos una clase ProductoFactory que genera los 15 productos que vamos a utilizar
Para preparar el listado:
- En nuestro MainLayout, en su primer fragment .... que al momento solo tiene un TextView que dice "Hello Fragmento Listado", le vamos a agregar un componente interno ListView con id lista_productos destinado a "inflarse" por medio de java con "adapter_listado_productos.xml" que a continuación crearemos
- Creamos un nuevo LinearLayout "adapter_listado_productos.xml" que representa cada iteración dentro de la lista de productos. Y vamos a agregarles los TextView para mostrar los datos de los productos: solamente (id, nombre, precio) la descripción lo mostraremos en el fragment de detalle.
- Utilizaremos el método onStart() del fragment para inflar el ListView del fragment, ya que en ese momento están tanto la vista como el fragmento creado.
Como veremos a continuación en la siguiente captura, hemos logrado alcanzar estos objetivos, y tenemos en el fragmento 1 un scroll de los 15 productos de la juguetería
Paso 2: "Crear una List View"- Commit & Push al Branch de GitHub
Vamos a mostrar que bajo el tag "Paso 2 crear una List View" subimos al branch de GitHub este nuevo estado intermedio del ejercicio, por si alguien esta interesado en seguir el ejemplo a partir de este punto.
Tenemos dos fragmentos, y en el primer fragmento un listado de 15 productos, de una juguetería. Y como superan las dimensiones de la pantalla, tuvo que implementarse con una ListView que permite el scrolling.
Para mayor comodidad a la hora de recuperar la versión, hemos asignado un Tag de GitHub al punto intermedio que estamos haciendo commit & push:
Creamos el Tag v1.0.2
Que lo pueden recuperar de:
El contenido de los fuentes es el siguiente, donde el ejercicio 02 está en el punto descripto aquí:
Paso 3: Objetivo: Crear la sección de detalle
El objetivo de este paso, es que cuando hagamos click en cualquiera de los objetos del listado de productos de la Juguetería, en el segundo Fragment vemos la información de detalle.
Para lo cual, deberemos hacer los siguientes pasos:
a. Tomar el evento onClick sobre los ítem de la lista
b. Tener la posibilidad de referencia al MainActivity que tiene visibilidad a todos los Fragments.
c. Diseñar en el segundo Fragment una pantalla de detalle apropiada, para que además de los valores: id, nombre y precio, se muestre también la descripción del producto que forma parte de los datos.
¿Como hacemos para capturar el evento de click sobre un Item de la
ListView? Utilizamos el método
OnItemClickListener
¿Como hacemos para desde un Fragment poder llegar a modificar los datos del otro Fragment? Utilizamos una interface propia, llamada
Callback para definir los métodos que queremos implementar para llegar al otro fragmento.
Estas cosas se pueden revisar en la clase
frgmt_listado el código que vamos a subir a GitHub para esta etapa del ejercicio.
Y el punto de contacto, es que el context del Fragment es el Activity.
- En el Fragment: al context (es MainActivity) se lo castea a un Callback
- En el MainActivity: se lo hace extender de la interfaz Callback
Y de esta forma, en ambas clases, se tiene seguridad que el método de onProductoSelected estará disponible. Además, recordar que:
Activity: extends from Context
Paso 3: "Crear la sección de detalle" Commit & Push a GitHub
Hemos logrado enlazar el detalle al listado, compartimos una pantalla y el código fuente en GitHub con el tag v1.0.3 de este "Ejercicio 2"
Subimos a GitHub
Y dentro de GitHub hacemos el Tag 03 por si alguien le interesa recuperar el ejercicio desde este punto intermedio:
Paso 03: Aplicación Juguetería funcionando.
Vamos a cerrar el post con esta versión de la aplicación juguetería funcionando compartiendo un par de pantallas de su funcionamiento:
En la primera pantalla seleccionamos "Metegol" y muestra el detalle de un metegol.
En la segunda pantalla seleccionamos "Monopatín" y muestra el detalle de un monopatín.
Los contenidos que repasamos en este post, son:
- Fragments
- ListView
- Pantallas Master - Detail
En el próximo post, reutilizando los fragments y el código, ampliaremos el ejemplo para la versión tablet.
