Un ListView es un tipo de vista en el que los datos se muestran en una lista desplazable verticalmente y cada vista dentro de la lista se coloca una debajo de la otra. ListView se usa en la mayoría de las aplicaciones para mostrar los datos de cualquier categoría específica dentro de un formato desplazable verticalmente. En este artículo, veremos la implementación de ListView en Android usando Jetpack Compose . Para implementar ListView en Android usando Jetpack Compose, tenemos que usar el widget LazyColumn para mostrar un Listview.
Atributos del widget LazyColumn para mostrar un ListView
|
Atributos |
Descripción |
|---|---|
| Arreglo vertical | Este atributo se utiliza para especificar la disposición vertical en la vista de lista, |
| Arreglo horizontal | Este atributo se utiliza para especificar la disposición horizontal de la vista de lista. |
| modificador | El modificador se usa para agregar un estilo personalizado a la vista de lista, como el color de fondo, el relleno y el borde de nuestra vista de lista. |
| elementos | Se utiliza para especificar la interfaz de usuario para el elemento individual de la vista de lista que tenemos que mostrar. |
Implementación paso a paso
Paso 1: crear un nuevo proyecto
Para crear un nuevo proyecto en la versión Canary de Android Studio, consulte Cómo crear un nuevo proyecto en la versión Canary de Android Studio con Jetpack Compose .
Paso 2: Agregar ListView en el archivo MainActivity.kt
Vaya a la aplicación > java > el nombre del paquete de su aplicación y abra el archivo MainActivity.kt. Dentro de ese archivo, agregue el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.example.newcanaryproject
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Divider
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.ExperimentalUnitApi
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.TextUnitType
import androidx.compose.ui.unit.dp
import com.example.newcanaryproject.ui.theme.NewCanaryProjectTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NewCanaryProjectTheme {
// A surface container using the
// 'background' color from the theme
Surface(
// to add background color for our screen.
color = MaterialTheme.colors.background
) {
// on below line we are calling display
// list function to display the list
displayList()
}
}
}
}
}
// below is the Composable function
// which we have created for our ListView.
@OptIn(ExperimentalUnitApi::class)
@Composable
fun displayList() {
// on below line we arecreating a simple list
// of strings and adding different programming
// languages in it.
val languages = listOf(
"C++", "C", "C#", "Java", "Kotlin", "Dart", "Python", "Javascript", "SpringBoot",
"XML", "Dart", "Node JS", "Typescript", "Dot Net", "GoLang", "MongoDb",
)
// on below line we are
// creating a simple column
Column(
// inside this column we are specifying modifier
// to specify max width and max height
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
// on below line we are specifying horizontal alignment
horizontalAlignment = Alignment.CenterHorizontally
) {
// on below line we are creating a simple text
// view for displaying heading for our application
Text(
text = "Simple ListView Example",
// in modifier we are specifying padding
// for our text from all sides.
modifier = Modifier.padding(10.dp),
// on below line we are specifying
// style for our text
style = TextStyle(
color = Color.Black,
fontSize = TextUnit(value = 20.0F, type = TextUnitType.Sp)
), fontWeight = FontWeight.Black
)
// on below line we are calling lazy column
// for displaying listview.
LazyColumn {
// on below line we are populating
// items for listview.
items(languages) { language ->
// on below line we are specifying ui for each item of list view.
// we are specifying a simple text for each item of our list view.
Text(language, modifier = Modifier.padding(15.dp))
// on below line we are specifying
// divider for each list item
Divider()
}
}
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA