Android e Jetpack Compose: crie menus flexíveis com Slot API

Android e Jetpack Compose: crie menus flexíveis com Slot API | Alura Cursos Online

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:icon="@drawable/ic_logout_white"
        android:title="Sair do App"
        app:showAsAction="ifRoom"
        />
</menu>

private fun configuraActionBar() {
        addMenuProvider(object : MenuProvider{
            override fun onCreateMenu(menu: Menu, menuInflater: MenuInflater) {
                menuInflater.inflate(R.menu.action_bar, menu)
            }
            override fun onMenuItemSelected(menuItem: MenuItem): Boolean {
                return true
            }
        })
    }

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            App()
        }
    }
}
@Composable
fun App() {
    ArtigoSlotAPITheme {
        Surface {

    }
}


}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen() {
    Scaffold(
        topBar = { ScaffoldTopBar() },
    ){
        Box(
            modifier = Modifier.padding(it)
        ) {
            ScaffoldImage()
        }
    }
}

@Composable
fun ScaffoldTopBar() {
    Row(
        modifier = Modifier
            .background(Purple700)
            .padding(12.dp)
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Icon(
            Icons.Rounded.Home,
            contentDescription = null,
            tint = Color.White
        )
        Text(
            text = "Alura",
            color = Color.White,
            textAlign = TextAlign.Center,
            fontSize = 22.sp
        )
        Icon(
            Icons.Rounded.ExitToApp,
            contentDescription = null,
            tint = Color.White
        )
    }
}

@Composable
fun ProductsSection(
    title: String,
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    Section(
        title = {
            Text(
                text = title,
                Modifier.padding(
                    start = 16.dp,
                    end = 16.dp
                ),
                fontSize = 20.sp,
                fontWeight = FontWeight(400)
            )
        },
        content = {
            LazyRow(
                Modifier
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(16.dp),
                contentPadding = PaddingValues(horizontal = 16.dp)
            ) {
                items(products) { p ->
                    ProductItem(product = p)
                }
            }
        },
        modifier = modifier
    )
}

val sampleShops: List<Shop> = listOf(
    Shop(
        name = "Carrinho SuperMercado",
        logo = "https://images.pexels.com/photos/264547/pexels-photo-264547.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ),
    Shop(
        name = "Padaria",
        logo = "https://images.pexels.com/photos/1855214/pexels-photo-1855214.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ),
    Shop(
        name = "Floricultura",
        logo = "https://images.pexels.com/photos/2111192/pexels-photo-2111192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ),
    Shop(
        name = "Loja de Roupas",
        logo = "https://images.pexels.com/photos/102129/pexels-photo-102129.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ),
    Shop(
        name = "Hotéis",
        logo = "https://images.pexels.com/photos/237272/pexels-photo-237272.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
    ),
)
val sampleShopSections = mapOf(
    "Lojas Parceiras" to sampleShops
)

@Composable
fun Partner(
    shop: Shop,
    modifier: Modifier = Modifier,
) {
    Surface(
        modifier,
    ) {
        Column(
            Modifier
                .heightIn(150.dp, 200.dp)
                .width(100.dp)
        ) {
            val imageSize = 100.dp
            AsyncImage(
                model = shop.logo,
                contentDescription = null,
                Modifier
                    .size(imageSize)
                    .clip(shape = CircleShape),
                contentScale = ContentScale.Crop,
                placeholder = painterResource(id = R.drawable.placeholder)
            )
            Text(
                text = shop.name,
                fontSize = 16.sp,
                maxLines = 2,
                textAlign = TextAlign.Center,
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier
                    .padding(8.dp)
                    .fillMaxWidth()
            )
        }
    }
}

@Composable
fun PartnersSection(
    title: String,
    shop: List<Shop>,
    modifier: Modifier = Modifier
) {
    Section(
        title = {
            Text(
                text = title,
                Modifier.padding(
                    start = 16.dp,
                    end = 16.dp
                ),
                fontSize = 20.sp,
                fontWeight = FontWeight(400),
                maxLines = 2,
                overflow = TextOverflow.Ellipsis
            )
        },
        content = {
            LazyRow(
                Modifier
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(16.dp),
                contentPadding = PaddingValues(horizontal = 16.dp)
            ) {
                items(shop) { s ->
                    Partner(shop = s)
                }
            }
        },
        modifier = modifier
    )
}

@Composable
fun HomeScreen(
        ...
) {
    Column {
        ...
        LazyColumn(
                ...
        ) {
            if (text.isBlank()) {
                ...
                for (shopSections in sampleShopSections){
                    val title = shopSections.key
                    val shop = shopSections.value
                    item {
                        PartnersSection(title = title, shop = shop)
                    }
                }
            } else {
                ...
            }
        }
    }
}

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Resumo

Matheus Perez

Inscreva-se em nossa Newsletter

Introdução

Criando menu na Action Bar (Sistema de Views)

Criando um arquivo de menu

Configurando o menu

Configurando a ActionBar

Chamando a função no onCreate

Criando o menu com o Slot API do Jetpack Compose

O que é Slot API?

Layouts divididos em setor

Como utilizar o Slot API para criar um menu

Criando o composable inicial

Composable para a tela principal

Utilizando o Scaffold

Personalizando o Scaffold

Resultado da implementação do Slot API

Criando seu próprio Slot

Analisando o projeto

Criando o componente com Slot

Melhorando a implementação do slot

Refatorando o Projeto

Desafio

Implementando o desafio

Criando o Modelo de Dados

Base de dados

Implementando o Card da Loja

Criando a seção de lojas parceiras

Finalizando

Conclusão

Explore por tópico

Leia também

Chamando a função no `onCreate`