Listview se utiliza para mostrar datos de una manera desplazable verticalmente. Hemos visto Cómo crear un ListView simple en Android Jetpack Compose. En este artículo, veremos cómo crear un ListView personalizado para mostrar múltiples datos dentro de Jetpack Compose . Crearemos una aplicación simple en la que mostraremos diferentes idiomas dentro de nuestra vista de lista junto con sus nombres. Al hacer clic en cualquiera de los idiomas, mostraremos un mensaje Toast .
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: Crear una clase modal
Vaya 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 ListModal y agregue el siguiente código. Se agregan comentarios en el código para conocer en detalle.
Kotlin
package com.example.newcanaryproject // on below line we are creating a // modal class for our data class. data class ListModal( // on 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. Se agregan comentarios en el código para conocer en detalle.
Kotlin
package com.example.newcanaryproject.ui.theme import androidx.compose.ui.graphics.Color val Purple200 = Color(0xFF0F9D58) val Purple500 = Color(0xFF0F9D58) val Purple700 = Color(0xFF3700B3) val Teal200 = Color(0xFF03DAC5) // on 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 dentro del código para comprender el código con más detalle.
Kotlin
package com.example.newcanaryproject
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.GridCells
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyVerticalGrid
import androidx.compose.foundation.lazy.itemsIndexed
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 {
// on below line we are specifying
// background color for our application
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
// on 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 tile as a text
Text(
// on below line we are specifying text
// to display in top app bar.
text = "Custom List View Example",
// on below line we are specifying modifier
// to fill max width.
modifier = Modifier.fillMaxWidth(),
// on below line we are specifying text alignment.
textAlign = TextAlign.Center,
// on below line we are specifying color for our text.
color = Color.White
)
}
)
}
) {
// on below line we are calling custom list
// view function to display custom listview.
customListView(LocalContext.current)
}
}
}
}
}
}
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun customListView(context: Context) {
// on below line we are creating and
// initializing our array list
lateinit var courseList: List<ListModal>
courseList = ArrayList<ListModal>()
// on below line we are adding data to our list.
courseList = courseList + ListModal("Android", R.drawable.android)
courseList = courseList + ListModal("JavaScript", R.drawable.js)
courseList = courseList + ListModal("Python", R.drawable.python)
courseList = courseList + ListModal("C++", R.drawable.c)
courseList = courseList + ListModal("C#", R.drawable.csharp)
courseList = courseList + ListModal("Java", R.drawable.java)
courseList = courseList + ListModal("Node Js", R.drawable.nodejs)
// on below line we are creating a
// lazy column for displaying a list view.
LazyColumn {
// on below line we are setting data for each item of our listview.
itemsIndexed(courseList) { index, item ->
// on 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()
},
// on below line we are adding
// padding from our all sides.
modifier = Modifier.padding(8.dp),
// on below line we are adding
// elevation for the card.
elevation = 6.dp
)
{
// on below line we are creating
// a row for our list view item.
Row(
// for our row we are adding modifier
// to set padding from all sides.
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
) {
// on below line inside row we are adding spacer
Spacer(modifier = Modifier.width(5.dp))
// on below line we are adding image to display the image.
Image(
// on below line we are specifying the drawable image for our image.
painter = painterResource(id = courseList[index].languageImg),
// on below line we are specifying
// content description for our image
contentDescription = "Javascript",
// on below line we are setting height
// and width for our image.
modifier = Modifier
.height(60.dp)
.width(60.dp)
.padding(5.dp)
)
// on below line we are adding spacer between image and a text
Spacer(modifier = Modifier.width(5.dp))
// on 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 modal class.
text = courseList[index].languageName,
// on below line we are adding padding
// for our text from all sides.
modifier = Modifier.padding(4.dp),
// on 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:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA