➜ Mostrar Productos
Implementación de Fragment y RecyclerView en Carrito de Compras con Kotlin | Aprende a implementar un Fragment en Kotlin para mostrar una lista de productos usando RecyclerView en la lección 11 del curso de Carrito de Compras. Configura un adaptador personalizado, gestiona la base de datos con DBmanager, y agrega productos al carrito de manera dinámica. Ideal para
Implementación en Kotlin de un Fragment
llamado OficinaFragment
, que utiliza un RecyclerView
para mostrar una lista de productos en una cuadrícula (con GridLayoutManager
). Además, incluye una clase interna para el adaptador del RecyclerView
llamada AdapterProduct
, que maneja cómo se muestra cada producto individual en la lista.
Descripción del código:
-
Variables principales en el
Fragment
:rv
: ElRecyclerView
que mostrará los productos.adapter
: El adaptador que conectará los datos de la lista de productos con elRecyclerView
.dBmanager
: Instancia de la claseDBmanager
, que probablemente se encarga de las operaciones con la base de datos.listProducts
: Una lista de productos (ArrayList<Product>
) que se obtiene desde la base de datos.
-
Método
onCreateView
:- Infla el diseño XML asociado al
Fragment
(fragment_oficina
). - Inicializa la instancia de
DBmanager
. - Configura el
RecyclerView
con unGridLayoutManager
de 2 columnas. - Recupera una lista de productos desde la base de datos a través de
getListProducts
y la asigna alistProducts
. - Crea y asigna el adaptador
AdapterProduct
alRecyclerView
.
- Infla el diseño XML asociado al
-
Clase
AdapterProduct
:- Recibe como parámetros el contexto y la lista de productos que va a manejar.
- Hereda de
RecyclerView.Adapter
y contiene una clase interna llamadaViewHolder
que maneja las vistas individuales de los productos.
-
Clase interna
ViewHolder
:- Dentro de la clase
ViewHolder
, se inicializan las vistas que forman parte del diseño de cada producto en elRecyclerView
(list_products.xml
):rvNombre
:TextView
que muestra el nombre del producto.rvPrice
:TextView
que muestra el precio.rvImage
:ImageView
para mostrar la imagen del producto usando Picasso.rvBtnAdd
:Button
que se utiliza para agregar el producto al carrito de compras.
- Dentro de la clase
-
Método
onBindViewHolder
:- Se encarga de asignar los datos del producto a las vistas correspondientes.
- Utiliza Picasso para cargar la imagen del producto desde una URL.
- Configura el botón
rvBtnAdd
para agregar el producto seleccionado al carrito. Para ello, utiliza el métodoaddItem
deDBmanager
, que recibe un objetoCart
(con los detalles del producto).
-
Método
getItemCount
:- Devuelve el tamaño de la lista de productos que será utilizada por el
RecyclerView
.
- Devuelve el tamaño de la lista de productos que será utilizada por el
Funcionalidad del Fragment
:
Este fragmento muestra una lista de productos en un formato de cuadrícula. Cada producto tiene su nombre, precio, y una imagen, además de un botón para agregar el producto al carrito de compras. Cuando el usuario pulsa el botón, se agrega el producto a la base de datos del carrito y se muestra un mensaje con Toast
indicando el nombre del producto añadido.
Este tipo de implementación es común en aplicaciones de comercio electrónico para mostrar catálogos de productos y permitir la adición de artículos al carrito de compras.
Código:
class OficinaFragment : Fragment() {
lateinit var rv:RecyclerView
lateinit var adapter: AdapterProduct
lateinit var dBmanager: DBmanager
var listProducts = ArrayList<Product>()
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val root = inflater.inflate(R.layout.fragment_oficina, container, false)
dBmanager = DBmanager(root.context,null)
rv = root.findViewById(R.id.rv)
rv.apply { layoutManager=GridLayoutManager(root.context,2) }
listProducts =dBmanager.getListProducts(1) as ArrayList<Product>
adapter = AdapterProduct(root.context,listProducts)
rv.adapter = adapter
return root
}
class AdapterProduct(var context: Context,var listProduct:ArrayList<Product>):RecyclerView.Adapter<AdapterProduct.ViewHolder>()
{
class ViewHolder(item:View):RecyclerView.ViewHolder(item) {
val rvNombre = item.findViewById<TextView>(R.id.rv_nombre)
val rvPrice = item.findViewById<TextView>(R.id.rv_price)
val rvImage = item.findViewById<ImageView>(R.id.rv_image)
val rvBtnAdd = item.findViewById<Button>(R.id.rv_btn_add)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val root = LayoutInflater.from(parent.context).inflate(R.layout.list_products,parent,false)
return ViewHolder(root)
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val product =listProduct[position]
holder.rvNombre.text = product.name
holder.rvPrice.text = product.price.toString()
Picasso.get().load(_URLIMG+product.image).into(holder.rvImage)
val dBmanager = DBmanager(context,null)
holder.rvBtnAdd.setOnClickListener {
dBmanager.addItem(
Cart(
product.id,
product.name,
product.price,
1,
product.unit,
product.image
)
)
Toast.makeText(context,"producto "+product.name,Toast.LENGTH_LONG).show()
}
}
override fun getItemCount(): Int {
return listProduct.size
}
}
}
386 visitas
Capítulo 12 – Diseño XML del Carrito de Compra en Kotlin »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar