Unicorn Commerce - Coding Bootcamp - The Unicorn Fullstack Professional Developer Guide to Modern Android Development - Parte 5

Unicorn Commerce - Sviluppo Android moderno Parte 5 - Jetpack Compose Grids

Questa serie utilizza le migliori pratiche di Jetpack Compose, tra cui Jetpack Compose Single Activity Architecture With Only Composables and No Fragments

Questa parte continua da dove ci eravamo interrotti nella Parte 4

Si prega di utilizzare il ramo feature/develop_starter_kit_part5 per proseguire

In alternativa, si può usare la versione starter-kit-part5 per proseguire

Implementeremo la griglia in questa versione dell'app Unicorn Commerce.

Innanzitutto, possiamo creare un file ProductsGrid.kt

All'interno del file Products.Grid.kt, possiamo dichiarare i seguenti 2 componibili

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.material.Card
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import app.unicornapp.mobile.android.unicorn.R

@Composable
fun ProductsGrid() {
    Column(Modifier.verticalScroll(rememberScrollState())) {
        repeat(10) {
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                repeat(2) {
                    ProductsGridCell()
                }
            }
        }
    }
}

@Composable
fun ProductsGridCell() {
    Card(
        elevation = 16.dp,
        modifier = Modifier.padding(8.dp)
    ) {
        Box(
            modifier = Modifier
                .requiredSize(180.dp, 180.dp)
                .padding(8.dp)
        ) {
            Image(
                painter = painterResource(id = R.drawable.dont_panic_tshirt_1),
                contentDescription = "T-shirt"
            )
            Text(
                text = "Don't Panic T-shirt",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(4.dp)
                    .background(Color.White)
                    .align(Alignment.TopStart)
            )
            Text(
                text = "$29.99",
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .background(Color.White)
                    .padding(start = 4.dp, end = 4.dp)
                    .align(Alignment.BottomEnd)
            )
        }

    }
}

@Composable
fun ProductsScreen(
    navController: NavController,
) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Image(
            painterResource(
                id = R.drawable.banner_bg_6),
            contentDescription = "",
            contentScale = ContentScale.FillBounds,
            modifier = Modifier.matchParentSize()
        )
        Column(
            Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                modifier = Modifier.clickable {
                    navController.navigate(Screen.HomeScreen.route) {
                        popUpTo(Screen.HomeScreen.route) {
                            inclusive = true
                        }
                    }
                },
                text = "Products",
                color = Color.White,
                fontSize = MaterialTheme.typography.titleSmall.fontSize,
                fontWeight = FontWeight.Bold
            )
            ProductsGrid()
        }
    }
}

@Preview
@Composable
fun ProductsScreenPreview() {
    ProductsScreen(navController = rememberNavController())
}

Jetpack Compose semplifica l'implementazione delle griglie.

Continueremo a implementare layout pigri per l'app Unicorn nella parte 6