Deslizar Action Box en Android usando Jetpack Compose

Si es un usuario de Android, debe haber visto aplicaciones que muestran la lista de elementos y cada uno de esos elementos se puede arrastrar hacia la izquierda o hacia la derecha para realizar alguna acción en particular. La aplicación Gmail para Android es el ejemplo más común, donde puede arrastrar un elemento hacia la izquierda o hacia la derecha desde la bandeja de entrada para archivarlo. De manera similar, en la aplicación Contactos y teléfono, puede arrastrar un elemento hacia la izquierda para enviar un mensaje y hacia la derecha para realizar una llamada. Dichos elementos en términos técnicos se conocen como botones de acción de deslizamiento y se pueden usar para realizar varias tareas con el gesto del usuario de arrastrar hacia la izquierda o hacia la derecha.

 

Entonces, en este artículo, le mostraremos cómo puede crear un cuadro de acción de deslizamiento en Android usando Jetpack Compose . Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: Agregar dependencia (biblioteca de terceros) en el archivo build.gradle (Módulo)

Agregue la dependencia a continuación (biblioteca de terceros) en el archivo build.gradle (Módulo).

dependencies {
    implementation "me.saket.swipe:swipe:1.0.0"
}

Paso 3: agregar activos vectoriales para acciones de deslizamiento en la carpeta dibujable

Como hemos deslizado hacia la izquierda y hacia la derecha, podemos trazar dos funciones separadas. Cada uno de ellos podría mostrarse mediante Texto o alguna imagen. En nuestra aplicación de demostración, hemos colocado dos imágenes (Recursos vectoriales) para mostrar dos funciones diferentes cuando se arrastran a cada lado. Para agregar activos vectoriales, siga este artículo Cómo agregar activos vectoriales en Android Studio

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.geeksforgeeks.jcswipeableactionbox
  
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.sp
import me.saket.swipe.SwipeAction
import me.saket.swipe.SwipeableActionsBox
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
  
            // Creating a Simple Scaffold
            // Layout for the application
            Scaffold(
  
                // Creating a Top Bar
                topBar = { TopAppBar(title = { Text("GFG | Swipeable Action Box", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
  
                // Creating Content
                content = {
  
                    // Creating a Column Layout
                    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
  
                        // Fetching local context
                        val mLocalContext = LocalContext.current
  
                        // Creating a Swipe Action for Calling; 
                        // setting icon, background and what
                        // happens when swiped
                        val mCall = SwipeAction(
                            icon = painterResource(R.drawable.ic_call),
                            background = Color.Green,
                            isUndo = true,
                            onSwipe = { Toast.makeText(mLocalContext, "Calling",Toast.LENGTH_SHORT).show()}
                        )
  
                        // Creating a Swipe Action for Sending a message;
                        // setting icon, background and what happens when swiped
                        val mMessage = SwipeAction(
                            icon = painterResource(R.drawable.ic_message),
                            background = Color.Yellow,
                            isUndo = true,
                            onSwipe = { Toast.makeText(mLocalContext, "Sending Message",Toast.LENGTH_SHORT).show()}
                        )
  
                        // Creating a Swipe Action Box with start
                        // action as calling and end action as sending message
                        SwipeableActionsBox(startActions = listOf(mCall), endActions = listOf(mMessage)) {
  
                            // Creating a Button inside Swipe Action Box
                            Button(onClick = { /*TODO*/ }, colors = ButtonDefaults.buttonColors(backgroundColor = Color(0XFF0F9D58))) {
                                Text(text = "Swipe Left or Right", fontSize = 25.sp, color = Color.White)
                            }
                        }
                    }
                }
            )
        }
    }
}

Producción:

Puede ver que podemos crear un botón de acción de deslizamiento.