➜ 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: El- RecyclerViewque mostrará los productos.
- adapter: El adaptador que conectará los datos de la lista de productos con el- RecyclerView.
- dBmanager: Instancia de la clase- DBmanager, 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 RecyclerViewcon unGridLayoutManagerde 2 columnas.
- Recupera una lista de productos desde la base de datos a través de getListProductsy la asigna alistProducts.
- Crea y asigna el adaptador AdapterProductalRecyclerView.
 
- 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.Adaptery contiene una clase interna llamadaViewHolderque 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:- TextViewque muestra el nombre del producto.
- rvPrice:- TextViewque muestra el precio.
- rvImage:- ImageViewpara mostrar la imagen del producto usando Picasso.
- rvBtnAdd:- Buttonque 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 rvBtnAddpara agregar el producto seleccionado al carrito. Para ello, utiliza el métodoaddItemdeDBmanager, 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
        }
    }
}
                                        819 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