Aula 05: Layouts básicos com Jetpack Compose

Fundamentos de Layouts

Componentes Principais

Os componentes básicos de layout no Compose são Row, Column, e Box. Esses componentes permitem arranjar elementos na vertical, horizontal, ou de forma sobreposta.

A Column é um componente que alinha seus filhos verticalmente. Cada elemento filho é empilhado abaixo do anterior. É útil para criar layouts estruturados verticalmente, como listas ou seções de informações. Você pode ajustar o espaçamento entre os elementos e o alinhamento dentro da coluna para personalizar a aparência de acordo com as necessidades do seu design.

A Row é semelhante à Column, mas alinha seus filhos horizontalmente. Os elementos são posicionados lado a lado, permitindo a criação de layouts horizontais como fileiras de botões ou ícones. Assim como com Columns, você pode especificar o espaçamento e alinhamento dos elementos para controlar exatamente como eles são apresentados na tela.

O Box é um componente flexível que permite sobrepor elementos um sobre o outro. Ele funciona como um contêiner de layout onde você pode posicionar elementos em camadas. Isso é útil para criar designs complexos ou personalizados onde os elementos se sobrepõem parcialmente ou ficam centralizados dentro de uma área especificada.

@Composable
fun RowColumnExample() {
    Column {
        Text("Column Item 1")
        Text("Column Item 2")
        Row {
            Text("Row Item 1")
            Text("Row Item 2")
        }
    }
}

Modificadores

Modifiers, ou modificadores, são ferramentas no Jetpack Compose que permitem modificar ou estilizar os componentes. Eles podem ser usados para alterar propriedades como tamanho, padding, background, e até funcionalidades de clique. Modifiers são aplicados de maneira encadeada, proporcionando uma maneira flexível e declarativa de personalizar a UI.

import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding

@Composable
fun StyledText() {
    Text(
        text = "Styled with Modifiers",
        modifier = Modifier
            .background(Color.Cyan)
            .padding(16.dp)
            .width(200.dp)
            .height(50.dp)
    )
}

Modificadores fillMaxWidth e padding.

Modificadores podem ter sobrecargas, permitindo, por exemplo, especificar diferentes maneiras de criar padding.

Arrangement e Alignment

O Alignment define como os elementos são alinhados dentro de um contêiner, como Row, Column, ou Box. Ele determina a posição dos elementos no eixo vertical ou horizontal (eixo principal de cada elemento), oferecendo controle preciso sobre como os componentes são posicionados tanto na direção principal quanto na direção cruzada do layout.

O Arrangement controla o espaçamento entre os elementos filhos dentro de Rows ou Columns, utilizando o eixo secundário como referência. Ele permite especificar como os elementos devem ser distribuídos, seja com espaçamento entre eles, tudo no início, centro ou fim do layout. Isso facilita a criação de interfaces esteticamente agradáveis ao controlar como o espaço extra é utilizado.

@Composable
fun AlignedContent() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text("Left")
        Text("Right")
    }
}

Box

O Box pode ser utilizado para sobrepor itens e criar designs complexos onde os elementos precisam estar um em cima do outro.

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.LightGray)
    ) {
        Text("Bottom", Modifier.align(Alignment.BottomStart))
        Text("Top", Modifier.align(Alignment.TopEnd))
    }
}

Lazy Layouts

Utilize LazyColumn e LazyRow para listas eficientes e pagináveis, que são essenciais para tratar grandes quantidades de dados sem comprometer a performance.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items

@Composable
fun SimpleLazyColumn() {
    LazyColumn {
        items(listOf("Apple", "Banana", "Cherry")) { fruit ->
            Text("Fruit: $fruit", Modifier.padding(8.dp))
        }
    }
}

Customização e Temas

Themes

A customização de temas no Jetpack Compose permite adaptar a aparência do aplicativo em nível global. Utilizando o MaterialTheme, você pode definir cores, tipografia, e formas para fornecer uma identidade visual consistente em toda a aplicação. A personalização de temas oferece uma maneira eficiente de garantir uma experiência de usuário coerente e estilizada.

Abra o arquivo ui/theme/Theme.kt, você verá detalhes da implementação do tema da aplicação.

MaterialTheme é uma função composable que reflete os princípios de estilo da especificação do Material Design.

import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface

@Composable
fun ThemedGreeting() {
    MaterialTheme(
        colors = MaterialTheme.colors.copy(
            primary = Color.Magenta,
            primaryVariant = Color.DarkMagenta,
            secondary = Color.Cyan
        )
    ) {
        Surface {
            Text("Hello with Theme")
        }
    }
}

Para o uso de Ícones

Use o composable IconButton, por exemplo:

IconButton(onClick = onClose) {
    Icon(Icons.Filled.Close, contentDescription = "Close")
}

Adicione a seguinte linha às dependências no seu arquivo app/build.gradle.kts para mais ícones:


 implementation("androidx.compose.material:material-icons-extended")

Práticas Avançadas

Criando Layouts Compostos

Layouts compostos personalizados que melhor se encaixam nas necessidades específicas do design do aplicativo.

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.unit.dp

@Composable
fun CustomButton(content: @Composable () -> Unit) {
    Box(
        modifier = Modifier
            .padding(8.dp)
            .background(Color.Blue)
            .clickable { }
            .padding(16.dp)
    ) {
        content()
    }
}

@Composable
fun CustomButtonExample() {
    CustomButton {
        Text("Click Me!")
    }
}

Interoperabilidade com Views Tradicionais

É possível utilizar Views dentro do Compose e vice-versa, facilitando a migração de aplicativos existentes para o novo sistema.

// No arquivo MainActivity.kt
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AndroidViewExample()
        }
    }
}

@Composable
fun AndroidViewExample() {
    AndroidView(
        factory = { context ->
            Button(context).apply {
                text = "Old View Button"
                setOnClickListener {
                    // Código do botão ao ser clicado
                }
            }
        }
    )
}

note

Diferença entre componentes Surface e Scaffold:
- São estruturas fundamentais de layout. Algo como containers;
- Porém, Scaffold torna mais fácil o tratamento de área cobertas pelo Sistema Operacional (como barras de notificação, notch de câmera, botões de navegação, etc.);
- Isso é ainda mais importante após a decisão do Google de que as aplicações devem usar enableEdgeToEdge().
  - Isso significa que a aplicação é que deve tomar conta dessas áreas cobertas, ocupando a tela de "borda à borda";
- Com o Surface esse controle se torna bem mais complexo.

Referências

Exemplo Prático -> RGB Counter

Link do Repositório

https://github.com/tads-ufpr-alexkutzke/ds151-aula-05-counter

DS151 - Desenvolvimento Mobile - Prof. Alex Kutzke