adaptive-apps-samples/Grid/app/src/main/java/com/example/gridsample/GridSample.kt at 223b73fcbe3e919f2a468c69cfd2da0755fa31f6 · android/adaptive-apps-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
package com.example.gridsample

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalGridApi
import androidx.compose.foundation.layout.Grid
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeDrawingPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.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.graphics.luminance
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.gridsample.ui.theme.MyApplicationTheme

@OptIn(ExperimentalGridApi::class)
@Composable
fun GridSample() {
    val colors = listOf(
        Color(0xFFF44336), // Red
        Color(0xFFE91E63), // Pink
        Color(0xFF9C27B0), // Purple
        Color(0xFF3F51B5), // Indigo
        Color(0xFF2196F3), // Blue
        Color(0xFF00BCD4), // Cyan
        Color(0xFF4CAF50), // Green
        Color(0xFFFFEB3B), // Yellow
        Color(0xFFFF9800), // Orange
        Color(0xFF795548)  // Brown
    )

    Column(modifier = Modifier.safeDrawingPadding().padding(16.dp).fillMaxSize().verticalScroll(rememberScrollState())) {
        Text(
            text = "Grid sample",
            fontSize = 30.sp,
            fontWeight = FontWeight.Bold,
            color = MaterialTheme.colorScheme.onBackground,
            modifier = Modifier.padding(bottom = 8.dp)
        )

        Text(
            text = "Display Grid layout variations on this device.",
            fontSize = 14.sp,
            color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.7f),
            modifier = Modifier.padding(bottom = 16.dp)
        )

        Grid(
            config = {
                repeat(3) { column(0.333f) }
                gap(4.dp)
            },
        ) {
            for (index in 0 until 10) {
                val bgColor = colors[index % colors.size]
                val isLight = bgColor.luminance() > 0.5f
                val textColor = if (isLight) Color.Black else Color.White

                val itemModifier = when (index) {
                    0 -> Modifier.gridItem(rowSpan = 2)
                    6 -> Modifier.gridItem(columnSpan = 2)
                    else -> Modifier
                }

                val boxModifier = itemModifier
                    .padding(2.dp)
                    .fillMaxWidth()
                    .background(bgColor, shape = RoundedCornerShape(16.dp))
                    .let {
                        if (index == 0) it.fillMaxHeight() else it.height(100.dp)
                    }

                Box(
                    modifier = boxModifier
                ) {
                    Text(
                        text = "${index + 1}",
                        color = textColor,
                        modifier = Modifier.align(Alignment.Center),
                        fontSize = 40.sp
                    )
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun GridSamplePreview() {
    MyApplicationTheme {
        GridSample()
    }
}