Capitulo 11 del Módulo 4 Catálogo de productos

➜ 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:

  1. Variables principales en el Fragment:

    • rv: El RecyclerView que 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.
  2. Método onCreateView:

    • Infla el diseño XML asociado al Fragment (fragment_oficina).
    • Inicializa la instancia de DBmanager.
    • Configura el RecyclerView con un GridLayoutManager de 2 columnas.
    • Recupera una lista de productos desde la base de datos a través de getListProducts y la asigna a listProducts.
    • Crea y asigna el adaptador AdapterProduct al RecyclerView.
  3. 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 llamada ViewHolder que maneja las vistas individuales de los productos.
  4. Clase interna ViewHolder:

    • Dentro de la clase ViewHolder, se inicializan las vistas que forman parte del diseño de cada producto en el RecyclerView (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.
  5. 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étodo addItem de DBmanager, que recibe un objeto Cart (con los detalles del producto).
  6. Método getItemCount:

    • Devuelve el tamaño de la lista de productos que será utilizada por el RecyclerView.

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

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

¡Qué aprenderás?

tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú