GridView es la forma de vista de cuadrícula en la que los elementos dentro de la cuadrícula se organizan en el diseño de la cuadrícula. Los datos dentro de la cuadrícula deben agregarse desde la base de datos o desde la lista de arrays. En este artículo, crearemos una aplicación simple para mostrar los diferentes lenguajes de programación dentro de nuestra vista de cuadrícula con su nombre usando Jetpack Compose .
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 aplicación > java > 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 GridModal y agréguele 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 GridModal( // 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.
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.LazyVerticalGrid
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 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 = "Grid 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 grid
// view method to load our grid view.
gridView(LocalContext.current)
}
}
}
}
}
}
// on below line we are creating grid view function for loading our grid view.
@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterialApi::class)
@Composable
fun gridView(context: Context) {
// on below line we are creating and initializing our array list
lateinit var courseList: List<GridModal>
courseList = ArrayList<GridModal>()
// on below line we are adding data to our list.
courseList = courseList + GridModal("Android", R.drawable.android)
courseList = courseList + GridModal("JavaScript", R.drawable.js)
courseList = courseList + GridModal("Python", R.drawable.python)
courseList = courseList + GridModal("C++", R.drawable.c)
courseList = courseList + GridModal("C#", R.drawable.csharp)
courseList = courseList + GridModal("Java", R.drawable.java)
courseList = courseList + GridModal("Node Js", R.drawable.nodejs)
// on below line we are adding lazy
// vertical grid for creating a grid view.
LazyVerticalGrid(
// on below line we are setting the
// column count for our grid view.
cells = GridCells.Fixed(2),
// on below line we are adding padding
// from all sides to our grid view.
modifier = Modifier.padding(10.dp)
) {
// on below line we are displaying our
// items upto the size of the list.
items(courseList.size) {
// on below line we are creating a
// card for each item of our grid view.
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[it].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 column on below sides.
Column(
// on below line we are adding padding
// padding for our column and filling the max size.
Modifier
.fillMaxSize()
.padding(5.dp),
// on below line we are adding
// horizontal alignment for our column
horizontalAlignment = Alignment.CenterHorizontally,
// on below line we are adding
// vertical arrangement for our column
verticalArrangement = Arrangement.Center
) {
// on below line we are creating image for our grid view item.
Image(
// on below line we are specifying the drawable image for our image.
painter = painterResource(id = courseList[it].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 the below line we are adding a spacer.
Spacer(modifier = Modifier.height(9.dp))
// on below line we are creating
// a text for our grid view item
Text(
// inside the text on below line we are
// setting text as the language name
// from our modal class.
text = courseList[it].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
)
}
}
}
}
}
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