From 41a154bc08f7f9d4881b2cb536a7e7e1934cfb41 Mon Sep 17 00:00:00 2001 From: Faithful Uchenna Okoye Date: Thu, 26 Jan 2023 17:32:37 +0000 Subject: [PATCH 01/13] Deprecating FlowRow and FlowColumn in Accompanist for the official FlowRow and FlowColumn in Androidx.Compose Foundations. FlowLayouts is now supported in Androidx.Compose. Provided is a migration guide to move to the official version. --- docs/flowlayout.md | 113 +++++++++++++++++- flowlayout/api/current.api | 32 ++--- .../com/google/accompanist/flowlayout/Flow.kt | 52 ++++++++ .../accompanist/flowlayout/FlowLayoutTest.kt | 1 + .../sample/flowlayout/FlowColumnSample.kt | 1 + .../sample/flowlayout/FlowRowSample.kt | 1 + 6 files changed, 182 insertions(+), 18 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 767c248ea..bb342a072 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -2,9 +2,14 @@ [![Maven Central](https://img.shields.io/maven-central/v/com.google.accompanist/accompanist-flowlayout)](https://search.maven.org/search?q=g:com.google.accompanist) -Flow layouts adapted from the versions which were available in [Jetpack Compose][compose] until they were removed. +Flow Layouts in Accompanist is now deprecated. Please see the migration guide below to begin using +Flow Layouts in Androidx. -Unlike the standard `Row` and `Column` composables, these layout children across multiple rows/columns if they exceed the available space. +The official `androidx.compose.foundation` FlowLayouts support is very similar to accompanist/flowlayouts, with a few changes. + +It is most similar to `Row` and `Column` and shares similar modifiers and the scopes. +Unlike the standard `Row` and `Column` composables, these layout children across multiple +rows/columns if they exceed the available space. ## Usage @@ -18,6 +23,110 @@ FlowColumn { } ``` +## Migration Guide to the official FlowLayouts + +1. Replace import packages to point to Androidx.Compose +``` kotlin +import androidx.compose.foundation.layout.FlowColumn +``` + +``` kotlin +import androidx.compose.foundation.layout.FlowRow +``` + +For `FlowColumn`: +2. Replace Modifier `mainAxisAlignment` with `verticalArrangement` +3. Replace Modifier `crossAxisAlignment` with `horizontalAlignment` + +For `FlowRow` +4. `mainAxisAlignment` is now `horizontalArrangement` +5. `crossAxisAlignment` is now `verticalAlignment` + +``` kotlin +FlowColumn( + modifier = Modifier, + verticalArrangement = Arrangement.Top, + horizontalAlignment: = Alignment.Start, + content = { // columns } +) +``` + +``` kotlin +FlowRpw( + modifier = Modifier, + horizontalArrangement = Arrangement.Start, + verticalAlignment: = Alignment.Top, + content = { // rows } +) +``` + +6. Replace `mainAxisSpacing` with `VerticalArrangement.spacedBy(50.dp)` in `FlowColumn` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowRow` +``` kotlin +FlowColumn( + verticalArrangement = VerticalArrangement.spacedBy(50.dp), + content = { // columns } +) +``` + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + content = { // rows } +) +``` + +7. `crossAxisSpacing` can be supported by adding a padding to each child + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + { Box(Modifier.padding(bottom = 20.dp) } +) +``` + +8. `lastLineMainAxisAlignment` can be supported by using `alignBy` on the respective child + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp) +) { Box(Modifier.alignBy(FirstBaseLine) } + +``` + +### New Features: +#### Add weights to each child +To scale an item based on the size of its parent and the space available, adding weights are perfect. +Adding a weight in `FlowRow` and `FlowColumn` is different than in `Row` and `Column` + +In `FlowLayout` it is based on the number of items placed on the row it falls on and their weights. +First we check to see if an item can fit in the current row or column based on its intrinsic size. +If it fits and has a weight, its final size is grown based on the available space and the number of items +with weights placed on the row or column it falls on. + +Because of the nature of `FlowLayouts` an item only grows and does not reduce in size. Its width in `FlowRow` +or height in `FlowColumn` determines it minimum width or height, and then grows based on its weight +and its available space, and the other items that fall on its row and column and their respective weights. + +If it cannot fit based on its intrinsic minimum size, then it is placed in the next row and column. +Once all the number of items that can fit the new row and column is calculated, +then its final width and size is calculated + +``` kotlin +FlowRow() + { repeat(20) { Box(Modifier.size(20.dp).weight(1f, true) } } + +``` + +#### Create a maximum number of items in row or column +You may choose to limit the number of items that appear in each row in `FlowRow` or column in `FlowColumn` +This can be configured using `maxItemsInEachRow` or `maxItemsInEachColumn`: +``` kotlin +FlowRow(maxItemsInEachRow = 3) + { repeat(10) { Box(Modifier.size(20.dp).weight(1f, true) } } +``` + +## Examples + For examples, refer to the [samples](https://github.com/google/accompanist/tree/main/sample/src/main/java/com/google/accompanist/sample/flowlayout). ## Download diff --git a/flowlayout/api/current.api b/flowlayout/api/current.api index 57c716548..0fee2de0c 100644 --- a/flowlayout/api/current.api +++ b/flowlayout/api/current.api @@ -1,29 +1,29 @@ // Signature format: 4.0 package com.google.accompanist.flowlayout { - public enum FlowCrossAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; + @Deprecated public enum FlowCrossAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; } public final class FlowKt { - method @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); - method @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); } - public enum MainAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; + @Deprecated public enum MainAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; } - public enum SizeMode { - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Expand; - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Wrap; + @Deprecated public enum SizeMode { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Expand; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Wrap; } } diff --git a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt index 1ffd98a4d..f68bf2b94 100644 --- a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt +++ b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt @@ -44,6 +44,17 @@ import kotlin.math.max * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last row. */ @Composable +@Deprecated( + """ +accompanist/FlowRow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowRow", + "androidx.compose.foundation.layout.FlowRow", + "androidx.compose.ui.Modifier" + ) +) public fun FlowRow( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -82,6 +93,17 @@ public fun FlowRow( * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last column. */ @Composable +@Deprecated( + """ +accompanist/FlowColumn is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowColumn", + "androidx.compose.foundation.layout.FlowColumn", + "androidx.compose.ui.Modifier" + ) +) public fun FlowColumn( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -108,6 +130,12 @@ public fun FlowColumn( /** * Used to specify the alignment of a layout's children, in cross axis direction. */ +@Deprecated( + """ +accompanist/FlowCrossAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class FlowCrossAxisAlignment { /** * Place children such that their center is in the middle of the cross axis. @@ -123,12 +151,24 @@ public enum class FlowCrossAxisAlignment { End, } +@Deprecated( + """ +accompanist/FlowMainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public typealias FlowMainAxisAlignment = MainAxisAlignment /** * Layout model that arranges its children in a horizontal or vertical flow. */ @Composable +@Deprecated( + """ +accompanist/Flow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) private fun Flow( modifier: Modifier, orientation: LayoutOrientation, @@ -278,6 +318,12 @@ private fun Flow( * Used to specify how a layout chooses its own size when multiple behaviors are possible. */ // TODO(popam): remove this when Flow is reworked +@Deprecated( + """ +accompanist/SizeMode is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class SizeMode { /** * Minimize the amount of free space by wrapping the children, @@ -294,6 +340,12 @@ public enum class SizeMode { /** * Used to specify the alignment of a layout's children, in main axis direction. */ +@Deprecated( + """ +accompanist/MainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class MainAxisAlignment(internal val arrangement: Arrangement.Vertical) { // TODO(soboleva) support RTl in Flow // workaround for now - use Arrangement that equals to previous Arrangement diff --git a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt index 784d1da60..970db01dd 100644 --- a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt +++ b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt @@ -33,6 +33,7 @@ import java.util.concurrent.CountDownLatch import java.util.concurrent.TimeUnit import kotlin.math.roundToInt +@Suppress("DEPRECATION") @RunWith(AndroidJUnit4::class) class FlowLayoutTest : LayoutTest() { @Test diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt index 874f2755c..c9b9d305a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowColumn import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowColumnSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt index ef5d44b46..3eb06e71a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowRow import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowRowSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) From 722370f128a514003846edc299cfd97f2cde1ce2 Mon Sep 17 00:00:00 2001 From: Faithful Uchenna Okoye Date: Thu, 26 Jan 2023 17:32:37 +0000 Subject: [PATCH 02/13] [FlowLayout] Deprecate FlowRow and FlowColumn This deprecates FlowRow and FlowColumn in Accompanist for the official FlowRow and FlowColumn in Androidx.Compose Foundations. FlowLayouts is now supported in Androidx.Compose. Provided is a migration guide to move to the official version. --- docs/flowlayout.md | 113 +++++++++++++++++- flowlayout/api/current.api | 32 ++--- .../com/google/accompanist/flowlayout/Flow.kt | 52 ++++++++ .../accompanist/flowlayout/FlowLayoutTest.kt | 1 + .../sample/flowlayout/FlowColumnSample.kt | 1 + .../sample/flowlayout/FlowRowSample.kt | 1 + 6 files changed, 182 insertions(+), 18 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 767c248ea..bb342a072 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -2,9 +2,14 @@ [![Maven Central](https://img.shields.io/maven-central/v/com.google.accompanist/accompanist-flowlayout)](https://search.maven.org/search?q=g:com.google.accompanist) -Flow layouts adapted from the versions which were available in [Jetpack Compose][compose] until they were removed. +Flow Layouts in Accompanist is now deprecated. Please see the migration guide below to begin using +Flow Layouts in Androidx. -Unlike the standard `Row` and `Column` composables, these layout children across multiple rows/columns if they exceed the available space. +The official `androidx.compose.foundation` FlowLayouts support is very similar to accompanist/flowlayouts, with a few changes. + +It is most similar to `Row` and `Column` and shares similar modifiers and the scopes. +Unlike the standard `Row` and `Column` composables, these layout children across multiple +rows/columns if they exceed the available space. ## Usage @@ -18,6 +23,110 @@ FlowColumn { } ``` +## Migration Guide to the official FlowLayouts + +1. Replace import packages to point to Androidx.Compose +``` kotlin +import androidx.compose.foundation.layout.FlowColumn +``` + +``` kotlin +import androidx.compose.foundation.layout.FlowRow +``` + +For `FlowColumn`: +2. Replace Modifier `mainAxisAlignment` with `verticalArrangement` +3. Replace Modifier `crossAxisAlignment` with `horizontalAlignment` + +For `FlowRow` +4. `mainAxisAlignment` is now `horizontalArrangement` +5. `crossAxisAlignment` is now `verticalAlignment` + +``` kotlin +FlowColumn( + modifier = Modifier, + verticalArrangement = Arrangement.Top, + horizontalAlignment: = Alignment.Start, + content = { // columns } +) +``` + +``` kotlin +FlowRpw( + modifier = Modifier, + horizontalArrangement = Arrangement.Start, + verticalAlignment: = Alignment.Top, + content = { // rows } +) +``` + +6. Replace `mainAxisSpacing` with `VerticalArrangement.spacedBy(50.dp)` in `FlowColumn` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowRow` +``` kotlin +FlowColumn( + verticalArrangement = VerticalArrangement.spacedBy(50.dp), + content = { // columns } +) +``` + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + content = { // rows } +) +``` + +7. `crossAxisSpacing` can be supported by adding a padding to each child + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + { Box(Modifier.padding(bottom = 20.dp) } +) +``` + +8. `lastLineMainAxisAlignment` can be supported by using `alignBy` on the respective child + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp) +) { Box(Modifier.alignBy(FirstBaseLine) } + +``` + +### New Features: +#### Add weights to each child +To scale an item based on the size of its parent and the space available, adding weights are perfect. +Adding a weight in `FlowRow` and `FlowColumn` is different than in `Row` and `Column` + +In `FlowLayout` it is based on the number of items placed on the row it falls on and their weights. +First we check to see if an item can fit in the current row or column based on its intrinsic size. +If it fits and has a weight, its final size is grown based on the available space and the number of items +with weights placed on the row or column it falls on. + +Because of the nature of `FlowLayouts` an item only grows and does not reduce in size. Its width in `FlowRow` +or height in `FlowColumn` determines it minimum width or height, and then grows based on its weight +and its available space, and the other items that fall on its row and column and their respective weights. + +If it cannot fit based on its intrinsic minimum size, then it is placed in the next row and column. +Once all the number of items that can fit the new row and column is calculated, +then its final width and size is calculated + +``` kotlin +FlowRow() + { repeat(20) { Box(Modifier.size(20.dp).weight(1f, true) } } + +``` + +#### Create a maximum number of items in row or column +You may choose to limit the number of items that appear in each row in `FlowRow` or column in `FlowColumn` +This can be configured using `maxItemsInEachRow` or `maxItemsInEachColumn`: +``` kotlin +FlowRow(maxItemsInEachRow = 3) + { repeat(10) { Box(Modifier.size(20.dp).weight(1f, true) } } +``` + +## Examples + For examples, refer to the [samples](https://github.com/google/accompanist/tree/main/sample/src/main/java/com/google/accompanist/sample/flowlayout). ## Download diff --git a/flowlayout/api/current.api b/flowlayout/api/current.api index 57c716548..0fee2de0c 100644 --- a/flowlayout/api/current.api +++ b/flowlayout/api/current.api @@ -1,29 +1,29 @@ // Signature format: 4.0 package com.google.accompanist.flowlayout { - public enum FlowCrossAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; + @Deprecated public enum FlowCrossAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; } public final class FlowKt { - method @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); - method @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); } - public enum MainAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; + @Deprecated public enum MainAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; } - public enum SizeMode { - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Expand; - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Wrap; + @Deprecated public enum SizeMode { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Expand; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Wrap; } } diff --git a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt index 1ffd98a4d..f68bf2b94 100644 --- a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt +++ b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt @@ -44,6 +44,17 @@ import kotlin.math.max * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last row. */ @Composable +@Deprecated( + """ +accompanist/FlowRow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowRow", + "androidx.compose.foundation.layout.FlowRow", + "androidx.compose.ui.Modifier" + ) +) public fun FlowRow( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -82,6 +93,17 @@ public fun FlowRow( * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last column. */ @Composable +@Deprecated( + """ +accompanist/FlowColumn is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowColumn", + "androidx.compose.foundation.layout.FlowColumn", + "androidx.compose.ui.Modifier" + ) +) public fun FlowColumn( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -108,6 +130,12 @@ public fun FlowColumn( /** * Used to specify the alignment of a layout's children, in cross axis direction. */ +@Deprecated( + """ +accompanist/FlowCrossAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class FlowCrossAxisAlignment { /** * Place children such that their center is in the middle of the cross axis. @@ -123,12 +151,24 @@ public enum class FlowCrossAxisAlignment { End, } +@Deprecated( + """ +accompanist/FlowMainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public typealias FlowMainAxisAlignment = MainAxisAlignment /** * Layout model that arranges its children in a horizontal or vertical flow. */ @Composable +@Deprecated( + """ +accompanist/Flow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) private fun Flow( modifier: Modifier, orientation: LayoutOrientation, @@ -278,6 +318,12 @@ private fun Flow( * Used to specify how a layout chooses its own size when multiple behaviors are possible. */ // TODO(popam): remove this when Flow is reworked +@Deprecated( + """ +accompanist/SizeMode is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class SizeMode { /** * Minimize the amount of free space by wrapping the children, @@ -294,6 +340,12 @@ public enum class SizeMode { /** * Used to specify the alignment of a layout's children, in main axis direction. */ +@Deprecated( + """ +accompanist/MainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class MainAxisAlignment(internal val arrangement: Arrangement.Vertical) { // TODO(soboleva) support RTl in Flow // workaround for now - use Arrangement that equals to previous Arrangement diff --git a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt index 784d1da60..970db01dd 100644 --- a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt +++ b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt @@ -33,6 +33,7 @@ import java.util.concurrent.CountDownLatch import java.util.concurrent.TimeUnit import kotlin.math.roundToInt +@Suppress("DEPRECATION") @RunWith(AndroidJUnit4::class) class FlowLayoutTest : LayoutTest() { @Test diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt index 874f2755c..c9b9d305a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowColumn import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowColumnSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt index ef5d44b46..3eb06e71a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowRow import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowRowSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) From d6f7ddf22dda98e21e6e7923fd4a6399de1b1f16 Mon Sep 17 00:00:00 2001 From: Faithful Uchenna Okoye Date: Thu, 26 Jan 2023 17:32:37 +0000 Subject: [PATCH 03/13] [FlowLayout] Deprecate FlowRow and FlowColumn This deprecates FlowRow and FlowColumn in Accompanist for the official FlowRow and FlowColumn in Androidx.Compose Foundations. FlowLayouts is now supported in Androidx.Compose. Provided is a migration guide to move to the official version. --- docs/flowlayout.md | 113 +++++++++++++++++- flowlayout/api/current.api | 32 ++--- .../com/google/accompanist/flowlayout/Flow.kt | 52 ++++++++ .../accompanist/flowlayout/FlowLayoutTest.kt | 1 + .../sample/flowlayout/FlowColumnSample.kt | 1 + .../sample/flowlayout/FlowRowSample.kt | 1 + 6 files changed, 182 insertions(+), 18 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 767c248ea..bb342a072 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -2,9 +2,14 @@ [![Maven Central](https://img.shields.io/maven-central/v/com.google.accompanist/accompanist-flowlayout)](https://search.maven.org/search?q=g:com.google.accompanist) -Flow layouts adapted from the versions which were available in [Jetpack Compose][compose] until they were removed. +Flow Layouts in Accompanist is now deprecated. Please see the migration guide below to begin using +Flow Layouts in Androidx. -Unlike the standard `Row` and `Column` composables, these layout children across multiple rows/columns if they exceed the available space. +The official `androidx.compose.foundation` FlowLayouts support is very similar to accompanist/flowlayouts, with a few changes. + +It is most similar to `Row` and `Column` and shares similar modifiers and the scopes. +Unlike the standard `Row` and `Column` composables, these layout children across multiple +rows/columns if they exceed the available space. ## Usage @@ -18,6 +23,110 @@ FlowColumn { } ``` +## Migration Guide to the official FlowLayouts + +1. Replace import packages to point to Androidx.Compose +``` kotlin +import androidx.compose.foundation.layout.FlowColumn +``` + +``` kotlin +import androidx.compose.foundation.layout.FlowRow +``` + +For `FlowColumn`: +2. Replace Modifier `mainAxisAlignment` with `verticalArrangement` +3. Replace Modifier `crossAxisAlignment` with `horizontalAlignment` + +For `FlowRow` +4. `mainAxisAlignment` is now `horizontalArrangement` +5. `crossAxisAlignment` is now `verticalAlignment` + +``` kotlin +FlowColumn( + modifier = Modifier, + verticalArrangement = Arrangement.Top, + horizontalAlignment: = Alignment.Start, + content = { // columns } +) +``` + +``` kotlin +FlowRpw( + modifier = Modifier, + horizontalArrangement = Arrangement.Start, + verticalAlignment: = Alignment.Top, + content = { // rows } +) +``` + +6. Replace `mainAxisSpacing` with `VerticalArrangement.spacedBy(50.dp)` in `FlowColumn` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowRow` +``` kotlin +FlowColumn( + verticalArrangement = VerticalArrangement.spacedBy(50.dp), + content = { // columns } +) +``` + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + content = { // rows } +) +``` + +7. `crossAxisSpacing` can be supported by adding a padding to each child + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + { Box(Modifier.padding(bottom = 20.dp) } +) +``` + +8. `lastLineMainAxisAlignment` can be supported by using `alignBy` on the respective child + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp) +) { Box(Modifier.alignBy(FirstBaseLine) } + +``` + +### New Features: +#### Add weights to each child +To scale an item based on the size of its parent and the space available, adding weights are perfect. +Adding a weight in `FlowRow` and `FlowColumn` is different than in `Row` and `Column` + +In `FlowLayout` it is based on the number of items placed on the row it falls on and their weights. +First we check to see if an item can fit in the current row or column based on its intrinsic size. +If it fits and has a weight, its final size is grown based on the available space and the number of items +with weights placed on the row or column it falls on. + +Because of the nature of `FlowLayouts` an item only grows and does not reduce in size. Its width in `FlowRow` +or height in `FlowColumn` determines it minimum width or height, and then grows based on its weight +and its available space, and the other items that fall on its row and column and their respective weights. + +If it cannot fit based on its intrinsic minimum size, then it is placed in the next row and column. +Once all the number of items that can fit the new row and column is calculated, +then its final width and size is calculated + +``` kotlin +FlowRow() + { repeat(20) { Box(Modifier.size(20.dp).weight(1f, true) } } + +``` + +#### Create a maximum number of items in row or column +You may choose to limit the number of items that appear in each row in `FlowRow` or column in `FlowColumn` +This can be configured using `maxItemsInEachRow` or `maxItemsInEachColumn`: +``` kotlin +FlowRow(maxItemsInEachRow = 3) + { repeat(10) { Box(Modifier.size(20.dp).weight(1f, true) } } +``` + +## Examples + For examples, refer to the [samples](https://github.com/google/accompanist/tree/main/sample/src/main/java/com/google/accompanist/sample/flowlayout). ## Download diff --git a/flowlayout/api/current.api b/flowlayout/api/current.api index 57c716548..0fee2de0c 100644 --- a/flowlayout/api/current.api +++ b/flowlayout/api/current.api @@ -1,29 +1,29 @@ // Signature format: 4.0 package com.google.accompanist.flowlayout { - public enum FlowCrossAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; + @Deprecated public enum FlowCrossAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; } public final class FlowKt { - method @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); - method @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); } - public enum MainAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; + @Deprecated public enum MainAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; } - public enum SizeMode { - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Expand; - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Wrap; + @Deprecated public enum SizeMode { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Expand; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Wrap; } } diff --git a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt index 1ffd98a4d..f68bf2b94 100644 --- a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt +++ b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt @@ -44,6 +44,17 @@ import kotlin.math.max * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last row. */ @Composable +@Deprecated( + """ +accompanist/FlowRow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowRow", + "androidx.compose.foundation.layout.FlowRow", + "androidx.compose.ui.Modifier" + ) +) public fun FlowRow( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -82,6 +93,17 @@ public fun FlowRow( * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last column. */ @Composable +@Deprecated( + """ +accompanist/FlowColumn is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowColumn", + "androidx.compose.foundation.layout.FlowColumn", + "androidx.compose.ui.Modifier" + ) +) public fun FlowColumn( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -108,6 +130,12 @@ public fun FlowColumn( /** * Used to specify the alignment of a layout's children, in cross axis direction. */ +@Deprecated( + """ +accompanist/FlowCrossAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class FlowCrossAxisAlignment { /** * Place children such that their center is in the middle of the cross axis. @@ -123,12 +151,24 @@ public enum class FlowCrossAxisAlignment { End, } +@Deprecated( + """ +accompanist/FlowMainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public typealias FlowMainAxisAlignment = MainAxisAlignment /** * Layout model that arranges its children in a horizontal or vertical flow. */ @Composable +@Deprecated( + """ +accompanist/Flow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) private fun Flow( modifier: Modifier, orientation: LayoutOrientation, @@ -278,6 +318,12 @@ private fun Flow( * Used to specify how a layout chooses its own size when multiple behaviors are possible. */ // TODO(popam): remove this when Flow is reworked +@Deprecated( + """ +accompanist/SizeMode is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class SizeMode { /** * Minimize the amount of free space by wrapping the children, @@ -294,6 +340,12 @@ public enum class SizeMode { /** * Used to specify the alignment of a layout's children, in main axis direction. */ +@Deprecated( + """ +accompanist/MainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class MainAxisAlignment(internal val arrangement: Arrangement.Vertical) { // TODO(soboleva) support RTl in Flow // workaround for now - use Arrangement that equals to previous Arrangement diff --git a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt index 784d1da60..970db01dd 100644 --- a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt +++ b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt @@ -33,6 +33,7 @@ import java.util.concurrent.CountDownLatch import java.util.concurrent.TimeUnit import kotlin.math.roundToInt +@Suppress("DEPRECATION") @RunWith(AndroidJUnit4::class) class FlowLayoutTest : LayoutTest() { @Test diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt index 874f2755c..c9b9d305a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowColumn import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowColumnSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt index ef5d44b46..3eb06e71a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowRow import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowRowSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) From 07ba8da6a6291041071aa2dbc06df7f1ce0c8f36 Mon Sep 17 00:00:00 2001 From: Faithful Uchenna Okoye Date: Thu, 26 Jan 2023 17:32:37 +0000 Subject: [PATCH 04/13] [FlowLayout] Deprecate FlowRow and FlowColumn This deprecates FlowRow and FlowColumn in Accompanist for the official FlowRow and FlowColumn in Androidx.Compose Foundations. FlowLayouts is now supported in Androidx.Compose. Provided is a migration guide to move to the official version. --- docs/flowlayout.md | 117 +++++++++++++++++- flowlayout/api/current.api | 32 ++--- .../com/google/accompanist/flowlayout/Flow.kt | 54 ++++++++ .../accompanist/flowlayout/FlowLayoutTest.kt | 1 + .../sample/flowlayout/FlowColumnSample.kt | 1 + .../sample/flowlayout/FlowRowSample.kt | 1 + 6 files changed, 186 insertions(+), 20 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 767c248ea..c1a8543f2 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -2,12 +2,17 @@ [![Maven Central](https://img.shields.io/maven-central/v/com.google.accompanist/accompanist-flowlayout)](https://search.maven.org/search?q=g:com.google.accompanist) -Flow layouts adapted from the versions which were available in [Jetpack Compose][compose] until they were removed. +Flow Layouts in Accompanist is now deprecated. Please see the migration guide below to begin using +Flow Layouts in Androidx. -Unlike the standard `Row` and `Column` composables, these layout children across multiple rows/columns if they exceed the available space. +The official `androidx.compose.foundation` FlowLayouts support is very similar to accompanist/flowlayouts, with a few changes. -## Usage +It is most similar to `Row` and `Column` and shares similar modifiers and the scopes. +Unlike the standard `Row` and `Column` composables, these layout children across multiple +rows/columns if they exceed the available space. +## Usage + ``` kotlin FlowRow { // row contents @@ -18,7 +23,111 @@ FlowColumn { } ``` -For examples, refer to the [samples](https://github.com/google/accompanist/tree/main/sample/src/main/java/com/google/accompanist/sample/flowlayout). +## Migration Guide to the official FlowLayouts + +1. Replace import packages to point to Androidx.Compose +``` kotlin +import androidx.compose.foundation.layout.FlowColumn +``` + +``` kotlin +import androidx.compose.foundation.layout.FlowRow +``` + +For `FlowColumn`: +2. Replace Modifier `mainAxisAlignment` with `verticalArrangement` +3. Replace Modifier `crossAxisAlignment` with `horizontalAlignment` + +For `FlowRow` +4. `mainAxisAlignment` is now `horizontalArrangement` +5. `crossAxisAlignment` is now `verticalAlignment` + +``` kotlin +FlowColumn( + modifier = Modifier, + verticalArrangement = Arrangement.Top, + horizontalAlignment = Alignment.Start, + content = { // columns } +) +``` + +``` kotlin +FlowRow( + modifier = Modifier, + horizontalArrangement = Arrangement.Start, + verticalAlignment = Alignment.Top, + content = { // rows } +) +``` + +6. Replace `mainAxisSpacing` with `VerticalArrangement.spacedBy(50.dp)` in `FlowColumn` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowRow` +``` kotlin +FlowColumn( + verticalArrangement = VerticalArrangement.spacedBy(50.dp), + content = { // columns } +) +``` + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + content = { // rows } +) +``` + +7. `crossAxisSpacing` can be supported by adding a padding to each child + +``` kotlin +FlowRow( + { repeat(10) { Box(Modifier.padding(bottom = 20.dp) } } +) +``` + +8. `lastLineMainAxisAlignment` can be supported by using `alignBy` on the respective child + +``` kotlin +FlowRow( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp) +) { Box(Modifier.alignBy(FirstBaseLine) } + +``` + +### New Features: +#### Add weights to each child +To scale an item based on the size of its parent and the space available, adding weights are perfect. +Adding a weight in `FlowRow` and `FlowColumn` is different than in `Row` and `Column` + +In `FlowLayout` it is based on the number of items placed on the row it falls on and their weights. +First we check to see if an item can fit in the current row or column based on its intrinsic size. +If it fits and has a weight, its final size is grown based on the available space and the number of items +with weights placed on the row or column it falls on. + +Because of the nature of `FlowLayouts` an item only grows and does not reduce in size. Its width in `FlowRow` +or height in `FlowColumn` determines it minimum width or height, and then grows based on its weight +and its available space, and the other items that fall on its row and column and their respective weights. + +If it cannot fit based on its intrinsic minimum size, then it is placed in the next row and column. +Once all the number of items that can fit the new row and column is calculated, +then its final width and size is calculated + +``` kotlin +FlowRow() + { repeat(20) { Box(Modifier.size(20.dp).weight(1f, true) } } + +``` + +#### Create a maximum number of items in row or column +You may choose to limit the number of items that appear in each row in `FlowRow` or column in `FlowColumn` +This can be configured using `maxItemsInEachRow` or `maxItemsInEachColumn`: +``` kotlin +FlowRow(maxItemsInEachRow = 3) + { repeat(10) { Box(Modifier.size(20.dp).weight(1f, true) } } +``` + +## Examples + +For examples, refer to the [Flow Row samples](https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/foundation/foundation-layout/samples/src/main/java/androidx/compose/foundation/layout/samples/FlowRowSample.kt) +and the [Flow Column samples](https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/foundation/foundation-layout/samples/src/main/java/androidx/compose/foundation/layout/samples/FlowColumnSamples.kt). ## Download diff --git a/flowlayout/api/current.api b/flowlayout/api/current.api index 57c716548..0fee2de0c 100644 --- a/flowlayout/api/current.api +++ b/flowlayout/api/current.api @@ -1,29 +1,29 @@ // Signature format: 4.0 package com.google.accompanist.flowlayout { - public enum FlowCrossAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; + @Deprecated public enum FlowCrossAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Start; } public final class FlowKt { - method @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); - method @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowColumn(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); + method @Deprecated @androidx.compose.runtime.Composable public static void FlowRow(optional androidx.compose.ui.Modifier modifier, optional com.google.accompanist.flowlayout.SizeMode mainAxisSize, optional com.google.accompanist.flowlayout.MainAxisAlignment mainAxisAlignment, optional float mainAxisSpacing, optional com.google.accompanist.flowlayout.FlowCrossAxisAlignment crossAxisAlignment, optional float crossAxisSpacing, optional com.google.accompanist.flowlayout.MainAxisAlignment lastLineMainAxisAlignment, kotlin.jvm.functions.Function0 content); } - public enum MainAxisAlignment { - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment End; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; - enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; + @Deprecated public enum MainAxisAlignment { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Center; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment End; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceAround; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceBetween; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment SpaceEvenly; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.MainAxisAlignment Start; } - public enum SizeMode { - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Expand; - enum_constant public static final com.google.accompanist.flowlayout.SizeMode Wrap; + @Deprecated public enum SizeMode { + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Expand; + enum_constant @Deprecated public static final com.google.accompanist.flowlayout.SizeMode Wrap; } } diff --git a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt index 1ffd98a4d..f30b2efc1 100644 --- a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt +++ b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt @@ -14,6 +14,8 @@ * limitations under the License. */ +@file:Suppress("DEPRECATION") + package com.google.accompanist.flowlayout import androidx.compose.foundation.layout.Arrangement @@ -44,6 +46,17 @@ import kotlin.math.max * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last row. */ @Composable +@Deprecated( + """ +accompanist/FlowRow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowRow", + "androidx.compose.foundation.layout.FlowRow", + "androidx.compose.ui.Modifier" + ) +) public fun FlowRow( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -82,6 +95,17 @@ public fun FlowRow( * @param lastLineMainAxisAlignment Overrides the main axis alignment of the last column. */ @Composable +@Deprecated( + """ +accompanist/FlowColumn is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""", + replaceWith = ReplaceWith( + "FlowColumn", + "androidx.compose.foundation.layout.FlowColumn", + "androidx.compose.ui.Modifier" + ) +) public fun FlowColumn( modifier: Modifier = Modifier, mainAxisSize: SizeMode = SizeMode.Wrap, @@ -108,6 +132,12 @@ public fun FlowColumn( /** * Used to specify the alignment of a layout's children, in cross axis direction. */ +@Deprecated( + """ +accompanist/FlowCrossAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class FlowCrossAxisAlignment { /** * Place children such that their center is in the middle of the cross axis. @@ -123,12 +153,24 @@ public enum class FlowCrossAxisAlignment { End, } +@Deprecated( + """ +accompanist/FlowMainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public typealias FlowMainAxisAlignment = MainAxisAlignment /** * Layout model that arranges its children in a horizontal or vertical flow. */ @Composable +@Deprecated( + """ +accompanist/Flow is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) private fun Flow( modifier: Modifier, orientation: LayoutOrientation, @@ -278,6 +320,12 @@ private fun Flow( * Used to specify how a layout chooses its own size when multiple behaviors are possible. */ // TODO(popam): remove this when Flow is reworked +@Deprecated( + """ +accompanist/SizeMode is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class SizeMode { /** * Minimize the amount of free space by wrapping the children, @@ -294,6 +342,12 @@ public enum class SizeMode { /** * Used to specify the alignment of a layout's children, in main axis direction. */ +@Deprecated( + """ +accompanist/MainAxisAlignment is deprecated. +For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration +""" +) public enum class MainAxisAlignment(internal val arrangement: Arrangement.Vertical) { // TODO(soboleva) support RTl in Flow // workaround for now - use Arrangement that equals to previous Arrangement diff --git a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt index 784d1da60..970db01dd 100644 --- a/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt +++ b/flowlayout/src/sharedTest/kotlin/com/google/accompanist/flowlayout/FlowLayoutTest.kt @@ -33,6 +33,7 @@ import java.util.concurrent.CountDownLatch import java.util.concurrent.TimeUnit import kotlin.math.roundToInt +@Suppress("DEPRECATION") @RunWith(AndroidJUnit4::class) class FlowLayoutTest : LayoutTest() { @Test diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt index 874f2755c..c9b9d305a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowColumnSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowColumn import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowColumnSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) diff --git a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt index ef5d44b46..3eb06e71a 100644 --- a/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt +++ b/sample/src/main/java/com/google/accompanist/sample/flowlayout/FlowRowSample.kt @@ -29,6 +29,7 @@ import com.google.accompanist.flowlayout.FlowRow import com.google.accompanist.sample.AccompanistSampleTheme import com.google.accompanist.sample.R +@Suppress("DEPRECATION") class FlowRowSample : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) From ac6983d8782ed60e6a6cbfb0eba7aa0dc6b82f80 Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Mon, 17 Apr 2023 13:59:08 +0100 Subject: [PATCH 05/13] Updates FlowLayout migration guide Updates FlowLayout migration guide --- docs/flowlayout.md | 17 +++++++++-------- .../com/google/accompanist/flowlayout/Flow.kt | 9 --------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index c1a8543f2..7522d6387 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -75,22 +75,23 @@ FlowRow( ) ``` -7. `crossAxisSpacing` can be supported by adding a padding to each child +7. `crossAxisSpacing` with `VerticalArrangement.spacedBy(50.dp)` in `FlowRow` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowColumn` ``` kotlin FlowRow( - { repeat(10) { Box(Modifier.padding(bottom = 20.dp) } } + verticalArrangement = VerticalArrangement.spacedBy(50.dp), + content = { // columns } ) ``` -8. `lastLineMainAxisAlignment` can be supported by using `alignBy` on the respective child - ``` kotlin -FlowRow( - horizontalArrangement = HorizontalArrangement.spacedBy(50.dp) -) { Box(Modifier.alignBy(FirstBaseLine) } - +FlowColumn( + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + content = { // rows } +) ``` + +8. `lastLineMainAxisAlignment` is currently not supported in Compose Flow Layouts. ### New Features: #### Add weights to each child diff --git a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt index f30b2efc1..d6f93b368 100644 --- a/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt +++ b/flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt @@ -339,15 +339,6 @@ public enum class SizeMode { Expand } -/** - * Used to specify the alignment of a layout's children, in main axis direction. - */ -@Deprecated( - """ -accompanist/MainAxisAlignment is deprecated. -For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration -""" -) public enum class MainAxisAlignment(internal val arrangement: Arrangement.Vertical) { // TODO(soboleva) support RTl in Flow // workaround for now - use Arrangement that equals to previous Arrangement From 19b47d0398bcbc395a342f718ca79a14a3769924 Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Tue, 25 Apr 2023 23:27:10 +0100 Subject: [PATCH 06/13] Update flowlayout.md --- docs/flowlayout.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 7522d6387..b71496548 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -35,11 +35,16 @@ import androidx.compose.foundation.layout.FlowRow ``` For `FlowColumn`: -2. Replace Modifier `mainAxisAlignment` with `verticalArrangement` + +2. Replace Modifier `mainAxisAlignment` with `verticalArrangement` + 3. Replace Modifier `crossAxisAlignment` with `horizontalAlignment` + For `FlowRow` + 4. `mainAxisAlignment` is now `horizontalArrangement` + 5. `crossAxisAlignment` is now `verticalAlignment` ``` kotlin @@ -147,4 +152,4 @@ dependencies { Snapshots of the development version are available in [Sonatype's `snapshots` repository][snap]. These are updated on every commit. [compose]: https://developer.android.com/jetpack/compose -[snap]: https://oss.sonatype.org/content/repositories/snapshots/com/google/accompanist/accompanist-flowlayout/ \ No newline at end of file +[snap]: https://oss.sonatype.org/content/repositories/snapshots/com/google/accompanist/accompanist-flowlayout/ From bc827ca00d94095bfd2a4a46a316d484cb8d22cd Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Tue, 25 Apr 2023 23:29:07 +0100 Subject: [PATCH 07/13] Update flowlayout.md --- docs/flowlayout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index b71496548..6e856813b 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -145,7 +145,7 @@ repositories { } dependencies { - implementation "com.google.accompanist:accompanist-flowlayout:" + implementation "androidx.compose.foundation:foundation:" } ``` From 9fcc3d062944522ce2007e3e3e2edaf987f78b97 Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Tue, 25 Apr 2023 23:32:24 +0100 Subject: [PATCH 08/13] Update flowlayout.md --- docs/flowlayout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 6e856813b..acf474b23 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -133,7 +133,7 @@ FlowRow(maxItemsInEachRow = 3) ## Examples For examples, refer to the [Flow Row samples](https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/foundation/foundation-layout/samples/src/main/java/androidx/compose/foundation/layout/samples/FlowRowSample.kt) -and the [Flow Column samples](https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/foundation/foundation-layout/samples/src/main/java/androidx/compose/foundation/layout/samples/FlowColumnSamples.kt). +and the [Flow Column samples](https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/compose/foundation/foundation-layout/samples/src/main/java/androidx/compose/foundation/layout/samples/FlowColumnSample.kt). ## Download From 32a65769c82f7aec254beb22b04728385f4484c5 Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Wed, 26 Apr 2023 01:04:45 +0100 Subject: [PATCH 09/13] Update flowlayout.md --- docs/flowlayout.md | 46 ++++++++++++++++++++-------------------------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index acf474b23..450c3c9bc 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -38,20 +38,20 @@ For `FlowColumn`: 2. Replace Modifier `mainAxisAlignment` with `verticalArrangement` -3. Replace Modifier `crossAxisAlignment` with `horizontalAlignment` +3. Replace Modifier `crossAxisAlignment` with `horizontalArrangement` For `FlowRow` 4. `mainAxisAlignment` is now `horizontalArrangement` -5. `crossAxisAlignment` is now `verticalAlignment` +5. `crossAxisAlignment` is now `verticalArrangement` ``` kotlin FlowColumn( modifier = Modifier, verticalArrangement = Arrangement.Top, - horizontalAlignment = Alignment.Start, + horizontalArrangement = Arrangement.Start, content = { // columns } ) ``` @@ -60,39 +60,33 @@ FlowColumn( FlowRow( modifier = Modifier, horizontalArrangement = Arrangement.Start, - verticalAlignment = Alignment.Top, + verticalArrangement = Arrangement.Top, content = { // rows } ) ``` -6. Replace `mainAxisSpacing` with `VerticalArrangement.spacedBy(50.dp)` in `FlowColumn` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowRow` -``` kotlin -FlowColumn( - verticalArrangement = VerticalArrangement.spacedBy(50.dp), - content = { // columns } -) -``` +6. Replace `mainAxisSpacing` with `HorizontalArrangement.spacedBy(50.dp, Alignment.*)` in `FlowRow` and `VerticalArrangement.spacedBy(50.dp, Alignment.*)` in `FlowColumn`. + +7. `crossAxisSpacing` with `VerticalArrangement.spacedBy(50.dp, Alignment.*)` in `FlowRow` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowColumn`. + +Here `Alignment.*` is the Alignment you wish to use such as `Alignment.Start`, `Alignment.Top` etc + ``` kotlin FlowRow( - horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), + modifier = Modifier, + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp, Alignment.Start), + verticalArrangement = VerticalArrangement.spacedBy(50.dp, Alignment.Top), content = { // rows } ) ``` - -7. `crossAxisSpacing` with `VerticalArrangement.spacedBy(50.dp)` in `FlowRow` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowColumn` -``` kotlin -FlowRow( - verticalArrangement = VerticalArrangement.spacedBy(50.dp), - content = { // columns } -) -``` - ``` kotlin FlowColumn( - horizontalArrangement = HorizontalArrangement.spacedBy(50.dp), - content = { // rows } + modifier = Modifier, + verticalArrangement = VerticalArrangement.spacedBy(50.dp, Alignment.Top), + horizontalArrangement = HorizontalArrangement.spacedBy(50.dp, Alignment.Start), + content = { // columns } ) ``` @@ -117,9 +111,9 @@ Once all the number of items that can fit the new row and column is calculated, then its final width and size is calculated ``` kotlin -FlowRow() - { repeat(20) { Box(Modifier.size(20.dp).weight(1f, true) } } - +FlowRow() { + repeat(20) { Box(Modifier.size(20.dp).weight(1f, true) } +} ``` #### Create a maximum number of items in row or column From 0ba54df2692afd4d9a8e7030c589717759432d90 Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Wed, 26 Apr 2023 01:08:42 +0100 Subject: [PATCH 10/13] Update flowlayout.md --- docs/flowlayout.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 450c3c9bc..2a604fe99 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -67,7 +67,7 @@ FlowRow( 6. Replace `mainAxisSpacing` with `HorizontalArrangement.spacedBy(50.dp, Alignment.*)` in `FlowRow` and `VerticalArrangement.spacedBy(50.dp, Alignment.*)` in `FlowColumn`. -7. `crossAxisSpacing` with `VerticalArrangement.spacedBy(50.dp, Alignment.*)` in `FlowRow` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowColumn`. +7. Replace `crossAxisSpacing` with `VerticalArrangement.spacedBy(50.dp, Alignment.*)` in `FlowRow` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowColumn`. Here `Alignment.*` is the Alignment you wish to use such as `Alignment.Start`, `Alignment.Top` etc From f822cb4f77f773b5787cd38f8fb2a1cac467725d Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Wed, 26 Apr 2023 01:10:04 +0100 Subject: [PATCH 11/13] Update flowlayout.md --- docs/flowlayout.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 2a604fe99..e93391256 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -120,8 +120,9 @@ FlowRow() { You may choose to limit the number of items that appear in each row in `FlowRow` or column in `FlowColumn` This can be configured using `maxItemsInEachRow` or `maxItemsInEachColumn`: ``` kotlin -FlowRow(maxItemsInEachRow = 3) - { repeat(10) { Box(Modifier.size(20.dp).weight(1f, true) } } +FlowRow(maxItemsInEachRow = 3) { + repeat(10) { Box(Modifier.size(20.dp).weight(1f, true) } +} ``` ## Examples From fd0df8340e7fcc2d3e794599606486455dad34f7 Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Wed, 26 Apr 2023 18:04:47 +0100 Subject: [PATCH 12/13] Update flowlayout.md --- docs/flowlayout.md | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index e93391256..981ae188e 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -94,21 +94,17 @@ FlowColumn( ### New Features: #### Add weights to each child -To scale an item based on the size of its parent and the space available, adding weights are perfect. -Adding a weight in `FlowRow` and `FlowColumn` is different than in `Row` and `Column` +To scale an item based on the size of its parent and the space available, adding weights is helpful. +Adding a weight in `FlowRow` and `FlowColumn` is different than in `Row` and `Column`. -In `FlowLayout` it is based on the number of items placed on the row it falls on and their weights. +In `FlowLayout`, it is based on the number of items placed on the row it falls on and their weights. First we check to see if an item can fit in the current row or column based on its intrinsic size. -If it fits and has a weight, its final size is grown based on the available space and the number of items +If it fits and has a weight, its final size is expanded based on the available space and the number of items with weights placed on the row or column it falls on. -Because of the nature of `FlowLayouts` an item only grows and does not reduce in size. Its width in `FlowRow` -or height in `FlowColumn` determines it minimum width or height, and then grows based on its weight -and its available space, and the other items that fall on its row and column and their respective weights. - -If it cannot fit based on its intrinsic minimum size, then it is placed in the next row and column. -Once all the number of items that can fit the new row and column is calculated, -then its final width and size is calculated +Because of the nature of `FlowLayouts` an item only expands and does not shrink in size. Its width in `FlowRow` +or height in `FlowColumn` determines it minimum width or height, and then expands based on its weight and +the available space remaining after row items' width/height have been determined. ``` kotlin FlowRow() { From 599f242dcc7ceba08828b24b98d93c845c911391 Mon Sep 17 00:00:00 2001 From: "Uchenna F. Okoye" Date: Wed, 26 Apr 2023 18:07:05 +0100 Subject: [PATCH 13/13] Update flowlayout.md --- docs/flowlayout.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/flowlayout.md b/docs/flowlayout.md index 981ae188e..165f6918e 100644 --- a/docs/flowlayout.md +++ b/docs/flowlayout.md @@ -8,8 +8,8 @@ Flow Layouts in Androidx. The official `androidx.compose.foundation` FlowLayouts support is very similar to accompanist/flowlayouts, with a few changes. It is most similar to `Row` and `Column` and shares similar modifiers and the scopes. -Unlike the standard `Row` and `Column` composables, these layout children across multiple -rows/columns if they exceed the available space. +Unlike the standard `Row` and `Column` composables, if it runs out of space on the current row, +the children are placed in the next line, and this repeats until the children are fully placed. ## Usage