Gilber
Posted on January 5, 2023
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,
)
💖 💪 🙅 🚩
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
android Getting the height of Android device independent of pixel densities in Jetpack Compose
July 18, 2024