From c95e7dd564d395225007777a5ab6ef822f19cc8f Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Mon, 4 Mar 2024 16:25:48 +0000 Subject: [PATCH 1/4] Add snippets for ContextualFlowRow --- .../snippets/layouts/FlowLayoutSnippets.kt | 166 +++++++++++++++++- gradle/libs.versions.toml | 2 +- 2 files changed, 162 insertions(+), 6 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt index 941ae99df..2542c8513 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt @@ -16,12 +16,27 @@ package com.example.compose.snippets.layouts +import android.graphics.Color +import androidx.compose.animation.animateContentSize +import androidx.compose.animation.core.Spring +import androidx.compose.animation.core.spring import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.gestures.scrollable +import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxScopeInstance.matchParentSize +import androidx.compose.foundation.layout.ContextualFlowColumn +import androidx.compose.foundation.layout.ContextualFlowColumnOverflow +import androidx.compose.foundation.layout.ContextualFlowColumnOverflowScope +import androidx.compose.foundation.layout.ContextualFlowRow +import androidx.compose.foundation.layout.ContextualFlowRowOverflow +import androidx.compose.foundation.layout.ContextualFlowRowOverflowScope import androidx.compose.foundation.layout.ExperimentalLayoutApi +import androidx.compose.foundation.layout.FlowColumn import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize @@ -30,17 +45,31 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.wrapContentHeight +import androidx.compose.foundation.layout.wrapContentWidth +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.verticalScroll +import androidx.compose.material.Button import androidx.compose.material.Chip import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.Text import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color +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.compose.snippets.util.MaterialColors +import org.w3c.dom.Text +import kotlin.random.Random @Preview @OptIn(ExperimentalLayoutApi::class) @@ -262,10 +291,10 @@ private fun FlowItems() { @OptIn(ExperimentalMaterialApi::class) @Composable -fun ChipItem(text: String) { +fun ChipItem(text: String, onClick: () -> Unit = {}) { Chip( modifier = Modifier.padding(end = 4.dp), - onClick = {}, + onClick = onClick, leadingIcon = {}, border = BorderStroke(1.dp, Color(0xFF3B3A3C)) ) { @@ -426,9 +455,136 @@ fun FlowLayout_FractionalSizing() { ) { val itemModifier = Modifier .clip(RoundedCornerShape(8.dp)) - Box(modifier = itemModifier.height(200.dp).width(60.dp).background(Color.Red)) - Box(modifier = itemModifier.height(200.dp).fillMaxWidth(0.7f).background(Color.Blue)) - Box(modifier = itemModifier.height(200.dp).weight(1f).background(Color.Magenta)) + Box(modifier = itemModifier + .height(200.dp) + .width(60.dp) + .background(Color.Red)) + Box(modifier = itemModifier + .height(200.dp) + .fillMaxWidth(0.7f) + .background(Color.Blue)) + Box(modifier = itemModifier + .height(200.dp) + .weight(1f) + .background(Color.Magenta)) } // [END android_compose_flow_layout_fractional_sizing] } + +@OptIn(ExperimentalLayoutApi::class) +@Preview +@Composable +fun ContextualFlowLayoutExample() { + // [START android_compose_layouts_contextual_flow] + val totalCount = 40 + var maxLines by remember { + mutableStateOf(2) + } + + val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope -> + val remainingItems = totalCount - scope.shownItemCount + ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = { + if (remainingItems == 0) { + maxLines = 2 + } else { + maxLines += 5 + } + }) + } + ContextualFlowRow( + modifier = Modifier + .fillMaxWidth(1f) + .padding(8.dp) + .wrapContentHeight(align = Alignment.Top) + .verticalScroll(rememberScrollState()), + verticalArrangement = Arrangement.spacedBy(8.dp), + horizontalArrangement = Arrangement.spacedBy(8.dp), + maxLines = maxLines, + overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator( + minRowsToShowCollapse = 4, + expandIndicator = moreOrCollapseIndicator, + collapseIndicator = moreOrCollapseIndicator + ), + itemCount = totalCount + ) { index -> + ChipItem("Item $index") + } + // [END android_compose_layouts_contextual_flow] +} + +@OptIn(ExperimentalLayoutApi::class) +@Preview +@Composable +fun ContextualFlowRow_ItemPosition() { + /* Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp)) + ContextualFlowRow( + modifier = Modifier + .fillMaxWidth(1f) + .height(210.dp) + .padding(20.dp), + horizontalArrangement = Arrangement.spacedBy(10.dp), + verticalArrangement = Arrangement.spacedBy(20.dp), + maxItemsInEachRow = 4, + itemCount = 12 + ) { + val width = Random.nextInt(80, 100).dp.coerceAtMost(maxWidthInLine) + val height = 50.dp.coerceAtMost(100.dp) + Box( + Modifier + .width(width) + .height(height) + .background(MatchingColors.getByIndex(indexInLine)!!.color) + ) { + Text( + text = "Ln: ${this@ContextualFlowRow.lineIndex}" + + "\nPs: ${this@ContextualFlowRow.indexInLine}", + fontSize = 18.sp, + modifier = Modifier.padding(3.dp) + ) + } + }*/ +} + +enum class MatchingColors(val index: Int, val color: Color) { + ZERO(0, Color.Green), + ONE(1, Color.Yellow), + TWO(2, Color.Blue), + THREE(3, Color.Cyan); + + companion object { + fun getByIndex(index: Int): MatchingColors? { + return values().firstOrNull { it.index == index } + } + } +} + +@OptIn(ExperimentalLayoutApi::class) +@Preview +@Composable +fun FillMaxColumnWidth() { + FlowColumn( + Modifier + .padding(20.dp) + .wrapContentHeight(align = Alignment.Top) + .fillMaxWidth(), + horizontalArrangement = Arrangement.spacedBy(10.dp), + verticalArrangement = Arrangement.spacedBy(20.dp), + maxItemsInEachColumn = 3, + ) { + repeat(9) { + Box( + Modifier + .height(100.dp) + .fillMaxColumnWidth(1f) + .background(Color.Green) + ) { + + Text( + text = "hi $it", + fontSize = 18.sp, + modifier = Modifier.padding(3.dp) + ) + } + } + } +} \ No newline at end of file diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index a6ea28987..3ef0f72c9 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -22,7 +22,7 @@ coil = "2.5.0" # @keep compileSdk = "34" compose-compiler = "1.5.4" -compose-latest = "1.7.0-alpha01" +compose-latest = "1.7.0-alpha03" coroutines = "1.7.3" google-maps = "18.2.0" gradle-versions = "0.51.0" From b0bab80ae02e2c31b7bd8d2fc31cb0eaaf357c1d Mon Sep 17 00:00:00 2001 From: riggaroo Date: Tue, 5 Mar 2024 16:11:24 +0000 Subject: [PATCH 2/4] Apply Spotless --- .../snippets/layouts/FlowLayoutSnippets.kt | 48 ++++++++----------- 1 file changed, 20 insertions(+), 28 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt index 2542c8513..7d397531e 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt @@ -17,21 +17,11 @@ package com.example.compose.snippets.layouts import android.graphics.Color -import androidx.compose.animation.animateContentSize -import androidx.compose.animation.core.Spring -import androidx.compose.animation.core.spring import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border -import androidx.compose.foundation.clickable -import androidx.compose.foundation.gestures.scrollable -import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box -import androidx.compose.foundation.layout.BoxScopeInstance.matchParentSize -import androidx.compose.foundation.layout.ContextualFlowColumn -import androidx.compose.foundation.layout.ContextualFlowColumnOverflow -import androidx.compose.foundation.layout.ContextualFlowColumnOverflowScope import androidx.compose.foundation.layout.ContextualFlowRow import androidx.compose.foundation.layout.ContextualFlowRowOverflow import androidx.compose.foundation.layout.ContextualFlowRowOverflowScope @@ -46,11 +36,9 @@ import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentHeight -import androidx.compose.foundation.layout.wrapContentWidth import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll -import androidx.compose.material.Button import androidx.compose.material.Chip import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.Text @@ -63,13 +51,11 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color -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.compose.snippets.util.MaterialColors import org.w3c.dom.Text -import kotlin.random.Random @Preview @OptIn(ExperimentalLayoutApi::class) @@ -291,7 +277,7 @@ private fun FlowItems() { @OptIn(ExperimentalMaterialApi::class) @Composable -fun ChipItem(text: String, onClick: () -> Unit = {}) { +fun ChipItem(text: String, onClick: () -> Unit = {}) { Chip( modifier = Modifier.padding(end = 4.dp), onClick = onClick, @@ -455,18 +441,24 @@ fun FlowLayout_FractionalSizing() { ) { val itemModifier = Modifier .clip(RoundedCornerShape(8.dp)) - Box(modifier = itemModifier - .height(200.dp) - .width(60.dp) - .background(Color.Red)) - Box(modifier = itemModifier - .height(200.dp) - .fillMaxWidth(0.7f) - .background(Color.Blue)) - Box(modifier = itemModifier - .height(200.dp) - .weight(1f) - .background(Color.Magenta)) + Box( + modifier = itemModifier + .height(200.dp) + .width(60.dp) + .background(Color.Red) + ) + Box( + modifier = itemModifier + .height(200.dp) + .fillMaxWidth(0.7f) + .background(Color.Blue) + ) + Box( + modifier = itemModifier + .height(200.dp) + .weight(1f) + .background(Color.Magenta) + ) } // [END android_compose_flow_layout_fractional_sizing] } @@ -587,4 +579,4 @@ fun FillMaxColumnWidth() { } } } -} \ No newline at end of file +} From b6d2e4772ad6411cc8afff6fb57f0e5014dc2590 Mon Sep 17 00:00:00 2001 From: Rebecca Franks Date: Fri, 8 Mar 2024 14:35:39 +0000 Subject: [PATCH 3/4] Update flow snippets --- .../snippets/layouts/FlowLayoutSnippets.kt | 93 +++++++------------ 1 file changed, 33 insertions(+), 60 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt index 7d397531e..e288009de 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt @@ -16,7 +16,6 @@ package com.example.compose.snippets.layouts -import android.graphics.Color import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.background import androidx.compose.foundation.border @@ -29,10 +28,12 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowColumn import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.Spacer +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.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.wrapContentHeight @@ -41,7 +42,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.verticalScroll import androidx.compose.material.Chip import androidx.compose.material.ExperimentalMaterialApi -import androidx.compose.material.Text +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -55,7 +56,6 @@ import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import com.example.compose.snippets.util.MaterialColors -import org.w3c.dom.Text @Preview @OptIn(ExperimentalLayoutApi::class) @@ -485,11 +485,12 @@ fun ContextualFlowLayoutExample() { } ContextualFlowRow( modifier = Modifier + .safeDrawingPadding() .fillMaxWidth(1f) - .padding(8.dp) + .padding(16.dp) .wrapContentHeight(align = Alignment.Top) .verticalScroll(rememberScrollState()), - verticalArrangement = Arrangement.spacedBy(8.dp), + verticalArrangement = Arrangement.spacedBy(4.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), maxLines = maxLines, overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator( @@ -504,79 +505,51 @@ fun ContextualFlowLayoutExample() { // [END android_compose_layouts_contextual_flow] } -@OptIn(ExperimentalLayoutApi::class) -@Preview -@Composable -fun ContextualFlowRow_ItemPosition() { - /* Text("Ln: Line No\nPs: Position No. in Line", modifier = Modifier.padding(20.dp)) - ContextualFlowRow( - modifier = Modifier - .fillMaxWidth(1f) - .height(210.dp) - .padding(20.dp), - horizontalArrangement = Arrangement.spacedBy(10.dp), - verticalArrangement = Arrangement.spacedBy(20.dp), - maxItemsInEachRow = 4, - itemCount = 12 - ) { - val width = Random.nextInt(80, 100).dp.coerceAtMost(maxWidthInLine) - val height = 50.dp.coerceAtMost(100.dp) - Box( - Modifier - .width(width) - .height(height) - .background(MatchingColors.getByIndex(indexInLine)!!.color) - ) { - Text( - text = "Ln: ${this@ContextualFlowRow.lineIndex}" + - "\nPs: ${this@ContextualFlowRow.indexInLine}", - fontSize = 18.sp, - modifier = Modifier.padding(3.dp) - ) - } - }*/ -} - -enum class MatchingColors(val index: Int, val color: Color) { - ZERO(0, Color.Green), - ONE(1, Color.Yellow), - TWO(2, Color.Blue), - THREE(3, Color.Cyan); - - companion object { - fun getByIndex(index: Int): MatchingColors? { - return values().firstOrNull { it.index == index } - } - } -} - @OptIn(ExperimentalLayoutApi::class) @Preview @Composable fun FillMaxColumnWidth() { + //[START android_compose_flow_layouts_fill_max_column_width] FlowColumn( Modifier .padding(20.dp) - .wrapContentHeight(align = Alignment.Top) + .fillMaxHeight() .fillMaxWidth(), - horizontalArrangement = Arrangement.spacedBy(10.dp), - verticalArrangement = Arrangement.spacedBy(20.dp), - maxItemsInEachColumn = 3, + horizontalArrangement = Arrangement.spacedBy(8.dp), + verticalArrangement = Arrangement.spacedBy(8.dp), + maxItemsInEachColumn = 5, ) { - repeat(9) { + repeat(listDesserts.size) { Box( Modifier - .height(100.dp) - .fillMaxColumnWidth(1f) - .background(Color.Green) + .fillMaxColumnWidth() + .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp)) + .padding(8.dp) ) { Text( - text = "hi $it", + text = listDesserts[it], fontSize = 18.sp, modifier = Modifier.padding(3.dp) ) } } } + //[END android_compose_flow_layouts_fill_max_column_width] } +private val listDesserts = listOf( + "Apple", + "Banana", + "Cupcake", + "Donut", + "Eclair", + "Froyo", + "Gingerbread", + "Honeycomb", + "Ice Cream Sandwich", + "Jellybean", + "KitKat", + "Lollipop", + "Marshmallow", + "Nougat", +) \ No newline at end of file From 666d1984422280569c4470eaa3418d0e9cdba37c Mon Sep 17 00:00:00 2001 From: riggaroo Date: Fri, 8 Mar 2024 14:38:18 +0000 Subject: [PATCH 4/4] Apply Spotless --- .../example/compose/snippets/layouts/FlowLayoutSnippets.kt | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt index e288009de..203f12838 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/FlowLayoutSnippets.kt @@ -509,7 +509,7 @@ fun ContextualFlowLayoutExample() { @Preview @Composable fun FillMaxColumnWidth() { - //[START android_compose_flow_layouts_fill_max_column_width] + // [START android_compose_flow_layouts_fill_max_column_width] FlowColumn( Modifier .padding(20.dp) @@ -535,7 +535,7 @@ fun FillMaxColumnWidth() { } } } - //[END android_compose_flow_layouts_fill_max_column_width] + // [END android_compose_flow_layouts_fill_max_column_width] } private val listDesserts = listOf( "Apple", @@ -552,4 +552,4 @@ private val listDesserts = listOf( "Lollipop", "Marshmallow", "Nougat", -) \ No newline at end of file +)