Curso Carrito de Compra en Kotlin - Api Laravel
Diseño XML del Carrito de Compra en Kotlin
En esta sección del curso de desarrollo de un carrito de compras con Kotlin, vamos a enfocarnos en el diseño de la interfaz gráfica del carrito utilizando XML. La interfaz de usuario es una parte fundamental de cualquier aplicación móvil, ya que es la puerta de interacción entre el usuario
En esta lección, aprenderás a crear el diseño visual de un carrito de compras en una aplicación Android utilizando XML. Este diseño permitirá mostrar los productos seleccionados por el usuario en una lista, con opciones para eliminar todos los artículos del carrito o proceder con la compra. Para ello, vamos a utilizar un ListView
, una estructura sencilla y efectiva para mostrar datos en forma de lista.
Comenzaremos creando el archivo XML que representará la interfaz gráfica de nuestro carrito de compras. Este archivo estará compuesto por un ListView para mostrar los artículos del carrito y dos botones que permitirán eliminar todos los productos o proceder con la compra.
En el directorio res/layout, crea un nuevo archivo XML llamado activity_cart.xml.
Usaremos un ConstraintLayout como contenedor principal. Este tipo de layout nos proporciona mayor flexibilidad para organizar los elementos de la interfaz de manera responsiva.
xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".CartActivity">
<!-- ListView para mostrar los productos en el carrito -->
<ListView
android:id="@+id/lv"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/buttonContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:padding="16dp"
tools:listitem="@layout/item_cart_product" />
<!-- Contenedor de botones -->
<LinearLayout
android:id="@+id/buttonContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:orientation="horizontal"
android:padding="16dp">
<!-- Botón para eliminar todos los productos del carrito -->
<Button
android:id="@+id/btnDeleteCart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Eliminar"
android:backgroundTint="@color/teal_700"
android:textColor="@color/white"
android:layout_marginEnd="8dp" />
<!-- Botón para proceder con la compra -->
<Button
android:id="@+id/btnSend"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Proceder"
android:backgroundTint="@color/teal_700"
android:textColor="@color/white"
android:layout_marginStart="8dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Para cada producto que se muestre en el ListView, necesitamos definir su diseño. Esto se hace creando un archivo XML separado, cart_item.xml, que contendrá la estructura de cómo se verá cada ítem del carrito.
xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="16dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="@color/white">
<LinearLayout
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imImagen"
android:layout_width="90dp"
android:padding="5dp"
android:layout_height="90dp" />
<LinearLayout
android:id="@+id/layoutInner"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="@+id/tvNombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Product Name"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Precio: $ "
android:textColor="@color/black"
android:textSize="14sp" />
<TextView
android:id="@+id/tvPrecio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="=10"
android:textColor="@color/black"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<LinearLayout
android:layout_width="120dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="@+id/btnDecremento"
android:layout_width="50dp"
android:layout_height="30dp"
android:text="-"
android:background="@color/teal_700"
android:textColor="@color/white"
android:textSize="25sp"
android:textStyle="bold"/>
<TextView
android:id="@+id/tvCantidad"
android:layout_width="50dp"
android:layout_height="30dp"
android:gravity="center"
android:text="0"
android:textSize="18sp"
/>
<Button
android:id="@+id/btnIncremento"
android:layout_width="50dp"
android:layout_height="30dp"
android:text="+"
android:textSize="18sp"
android:background="@color/teal_700"
android:textColor="@color/white"
/>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_weight="1"
android:id="@+id/tvImporte"
android:textSize="16sp"
android:text="00.00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
En este diseño básico, mostramos tres elementos por producto:
Una imagen del producto (ImageView).
El nombre del producto (TextView).
El precio del producto (TextView).
En la siguiente lección, veremos cómo conectar este diseño con el código Kotlin. Usaremos un adaptador para rellenar el ListView con productos reales, y te enseñaremos cómo manejar la lógica para eliminar productos del carrito o proceder con la compra.
61 visitas
« Capítulo 11 – Mostrar Productos
Capítulo 13 – AddItem »
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024