ListView horizontal en Android usando Jetpack Compose

Muchas aplicaciones de Android presentan datos en forma de listas desplazables horizontalmente. Esta lista se puede desplazar horizontalmente. En este artículo, veremos cómo implementar ListView horizontal en aplicaciones de Android usando Jetpack Compose. 

Nota: si busca código Java para Jetpack Compose, tenga en cuenta que Jetpack Compose solo está disponible en Kotlin. Utiliza funciones como rutinas, y el manejo de las anotaciones @Composable está a cargo de un compilador Kotlin. No hay ningún método para que Java acceda a estos. Por lo tanto, no puede usar Jetpack Compose si su proyecto no es compatible con Kotlin.

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 redacció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: crear una clase modelo

Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java/Kotlin y nombre su clase como ListModel y agréguele el siguiente código. Se agregan comentarios al código para una explicación más detallada. 

// in the below line, we are creating a
// model class for our data class.
data class ListModel(
      
    // in the below line, we are creating two variable
    // one is for language name which is string.
    val languageName: String,
      
    // next variable is for our
    // image which is an integer.
    val languageImg: Int
)

Paso 3: agregar un nuevo color en el archivo Color.kt

Vaya a aplicación > java > nombre del paquete de su aplicación > ui.theme > archivo Color.kt y agréguele el siguiente código. Los comentarios se agregan en el código para una explicación más detallada. 

import androidx.compose.ui.graphics.Color
  
val Purple200 = Color(0xFF0F9D58)
val Purple500 = Color(0xFF0F9D58)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
  
// in the below line, we are adding different colors.
val greenColor = Color(0xFF0F9D58)

Paso 4: agregar imágenes a la carpeta dibujable

Copie todas las imágenes que desee agregar a su vista de cuadrícula. Vaya a aplicación > res > dibujable. Haga clic derecho sobre él y pegue todas las imágenes en la carpeta dibujable.

Paso 5: 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 al código para una explicación más detallada. 

import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.material.*
import androidx.compose.runtime.*
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.text.style.TextAlign
import androidx.compose.ui.unit.*
import coil.compose.rememberAsyncImagePainter
import com.example.newcanaryproject.ui.theme.*
import java.util.*
  
class MainActivity : ComponentActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NewCanaryProjectTheme {
                // in the below line, we are specifying
                // background color for our application
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    // in the below line, we are specifying theme as scaffold.
                    Scaffold(
                        // in scaffold we are specifying top bar.
                        topBar = {
                            // inside top bar we are specifying background color.
                            TopAppBar(backgroundColor = greenColor,
                                // along with that we are specifying title for our top bar.
                                title = {
                                    // in the top bar we are specifying title as a text
                                    Text(
                                        // in the below line, we are specifying text
                                        // to display in top app bar.
                                        text = "Horizontal List View Example",
  
                                        // in the below line, we are specifying modifier
                                        // to fill max width.
                                        modifier = Modifier.fillMaxWidth(),
  
                                        // in the below line, we are specifying text alignment.
                                        textAlign = TextAlign.Center,
  
                                        // in the below line, we are specifying color for our text.
                                        color = Color.White
                                    )
                                }
                            )
                        }
                    ) {
                        // in the below line, we are calling custom list
                        // view function to display custom listview.
                        customListView(LocalContext.current)
                    }
                }
            }
        }
    }
}
  
  
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun customListView(context: Context) {
    // in the below line, we are creating and
    // initializing our array list
    lateinit var courseList: List<ListModel>
    courseList = ArrayList<ListModel>()
  
    // in the below line, we are adding data to our list.
    courseList = courseList + ListModel("Android", R.drawable.android)
    courseList = courseList + ListModel("JavaScript", R.drawable.js)
    courseList = courseList + ListModel("Python", R.drawable.python)
    courseList = courseList + ListModel("C++", R.drawable.c)
    courseList = courseList + ListModel("C#", R.drawable.csharp)
    courseList = courseList + ListModel("Java", R.drawable.java)
    courseList = courseList + ListModel("Node Js", R.drawable.nodejs)
  
    // in the below line, we are creating a
    // lazy row for displaying a horizontal list view.
    LazyRow {
        // in the below line, we are setting data for each item of our listview.
        itemsIndexed(courseList) { index, item ->
            // in the below line, we are creating a card for our list view item.
            Card(
                // inside our grid view on below line
                // we are adding on click for each item of our grid view.
                onClick = {
                    // inside on click we are displaying the toast message.
                    Toast.makeText(
                        context,
                        courseList[index].languageName + " selected..",
                        Toast.LENGTH_SHORT
                    ).show()
                },
                // in the below line, we are adding
                // padding from our all sides.
                modifier = Modifier
                    .padding(8.dp)
                    .width(120.dp),
  
                // in the below line, we are adding
                // elevation for the card.
                elevation = 6.dp
            )
            {
                // in the below line, we are creating
                // a row for our list view item.
                Column(
                    // for our row we are adding modifier
                    // to set padding from all sides.
                    modifier = Modifier
                        .padding(8.dp)
                        .fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    // in the below line, inside row we are adding spacer
                    Spacer(modifier = Modifier.height(5.dp))
  
                    // in the below line, we are adding Image to display the image.
                    Image(
                        // in the below line, we are specifying the drawable image for our image.
                        painter = painterResource(id = courseList[index].languageImg),
  
                        // in the below line, we are specifying
                        // content description for our image
                        contentDescription = "img",
  
                        // in the below line, we are setting height
                        // and width for our image.
                        modifier = Modifier
                            .height(60.dp)
                            .width(60.dp)
                            .padding(5.dp),
  
                        alignment = Alignment.Center
                    )
  
                    // in the below line, we are adding spacer between image and a text
                    Spacer(modifier = Modifier.height(5.dp))
  
                    // in the below line, we are creating a text.
                    Text(
                        // inside the text on below line we are
                        // setting text as the langaueg name
                        // from our model class.
                        text = courseList[index].languageName,
  
                        // in the below line, we are adding padding
                        // for our text from all sides.
                        modifier = Modifier.padding(4.dp),
  
                        // in the below line, we are adding color for our text
                        color = Color.Black, textAlign = TextAlign.Center
                    )
                }
            }
        }
    }
}

Ahora ejecute su aplicación para ver el resultado.

Producción: