Exemplo LazyVerticalGrid com jetpack compose

gilbercs

Gilber

Posted on January 5, 2023

Exemplo LazyVerticalGrid com jetpack compose

Os elementos combináveis LazyVerticalGrid e LazyHorizontalGrid oferecem suporte à exibição de itens em uma grade. Uma grade vertical lenta mostra os itens em um contêiner de rolagem vertical, dividido em várias colunas, enquanto grades horizontais lentas fazem o mesmo no eixo horizontal.

package br.com.gilbercs.lazycolumn

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
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.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import br.com.gilbercs.lazycolumn.ui.theme.LazycolumnTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LazycolumnTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val addItem = arrayListOf<Item>()
                    //Linguagem C
                    addItem.add(
                       Item(
                           icon = R.drawable.icon_c,
                           language = "Linguagem C",
                           content = "C",
                           description = "C é uma das linguagens de programação mais populares[4][5] e" +
                                   "existem poucas arquiteturas para as quais não existem compiladores" +
                                   "para C. C tem influenciado muitas outras linguagens de programação" +
                                   "(por exemplo, a linguagem Java),[6] mais notavelmente C++, que" +
                                   "originalmente começou como uma extensão para C."
                       )
                    )
                    //Linguagem Java
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_java,
                            language = "Linguagem JAVA",
                            content = "JAVA",
                            description = "é uma linguagem de programação orientada a objetos desenvolvida " +
                                    "na década de 90 por uma equipe de programadores chefiada por James Gosling," +
                                    " na empresa Sun Microsystems, que em 2008 foi adquirido pela empresa Oracle" +
                                    "Corporation."
                        )
                    )
                    //Linguagem C++
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_python,
                            language = "Linguagem PYTHON",
                            content = "PYTHON",
                            description = "é uma linguagem de programação orientada a objetos desenvolvida " +
                                    "na década de 90 por uma equipe de programadores chefiada por James Gosling," +
                                    " na empresa Sun Microsystems, que em 2008 foi adquirido pela empresa Oracle" +
                                    "Corporation."
                        )
                    )
                    //Linguagem PHP
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_cc,
                            language = "Linguagem C++",
                            content = "C++",
                            description = "é uma linguagem de programação compilada multi-paradigma e de uso geral. " +
                                    "Desde os anos 1990 é uma das linguagens comerciais mais populares, sendo bastante " +
                                    "usada também na academia por seu grande desempenho e base de utilizadores."
                        )
                    )
                    //linguagem p
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_php,
                            language = "Linguagem PHP",
                            content = "PHP",
                            description = "é uma linguagem de programação de alto nível e de propósito geral." +
                                    "Sua filosofia de design enfatiza a legibilidade do código com o uso de recuo" +
                                    "significativo. Python é tipado dinamicamente e coletado como lixo."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_kotlin,
                            language = "Linguagem KOTLIN",
                            content = "KOTLIN",
                            description = "é uma linguagem de programação multiplataforma, orientada a objetos e" +
                                    "funcional, concisa e estaticamente tipada, desenvolvida pela JetBrains em " +
                                    "2011, que compila para a Máquina virtual Java e que também pode ser traduzida " +
                                    "para a linguagem JavaScript e compilada para código nativo."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_js,
                            language = "Linguagem JAVASCRIPT",
                            content = "JAVASCRIPT",
                            description = "é uma linguagem de programação interpretada estruturada, de script em alto nível com " +
                                    "tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das " +
                                    "três principais tecnologias da World Wide Web."
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_net,
                            language = "NET",
                            content = "NET",
                            description = "NET é um framework livre e de código aberto para os sistemas operacionais Windows, " +
                                    "Linux e macOS. É um sucessor de código aberto do .NET Framework. " +
                                    "O projeto é desenvolvido principalmente pela Microsoft e lançado com a Licença MIT"
                        )
                    )
                    addItem.add(
                        Item(
                            icon = R.drawable.icon_react,
                            language = "REACT",
                            content = "REACT",
                            description = "é uma biblioteca Javascript criada pelo Facebook. É usada para desenvolver aplicativos " +
                                    "para os sistemas Android e iOS de forma nativa."
                        )
                    )
                    LazyGridList(item = addItem)
                }
            }
        }
    }
}
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyGridList(item: List<Item>){
    LazyVerticalGrid(cells = GridCells.Fixed(2)){
        items(item){item ->
            Card(modifier = Modifier
                .fillMaxWidth()
                .padding(all = 10.dp),
                elevation = 10.dp,
                shape = RoundedCornerShape(size = 16.dp)
            ) {
                ItemLazy(item = item)
            }
        }
    }
}

@Composable
fun ItemLazy(item: Item){
Row(modifier = Modifier
    .fillMaxSize()
    .padding(all = 8.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically) {
    Image(painter = painterResource(id = item.icon), contentDescription = item.content,
    modifier = Modifier
        .size(60.dp)
        .clip(CircleShape)
        .border(1.0.dp, color = MaterialTheme.colors.primaryVariant, CircleShape))
    Spacer(modifier = Modifier.width(8.dp))
    var isExpanded by remember { mutableStateOf(false)}
    Column(modifier = Modifier
        .fillMaxWidth()
        .clickable { isExpanded = !isExpanded }) {
        Text(
            text = item.language,
            color = MaterialTheme.colors.primaryVariant,
            style = MaterialTheme.typography.subtitle2,
            fontWeight = FontWeight.Bold,
            fontSize = 18.sp)
        Spacer(modifier = Modifier.height(4.dp))
        val surfaceColor by animateColorAsState(
            if (isExpanded) MaterialTheme.colors.primary else MaterialTheme.colors.surface)
        Spacer(modifier = Modifier.height(4.dp))
        if (isExpanded){
            Surface(shape = MaterialTheme.shapes.medium,
                elevation = 1.dp,
                color = surfaceColor,
                modifier = Modifier
                    .animateContentSize()
                    .fillMaxWidth()
                    .padding(all = 1.dp)) {
                Text(
                    modifier = Modifier.padding(all = 4.dp),
                    text = item.description,
                    fontWeight = FontWeight.Bold,
                    fontSize = 16.sp,
                    textAlign = TextAlign.Justify
                )
            }
        }
    }
}

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    LazycolumnTheme {
    }
}
data class Item(
    val icon: Int,
    val content: String,
    val language: String,
    val description: String,
)
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
gilbercs
Gilber

Posted on January 5, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related