Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FlowLayout] Deprecate FlowRow and FlowColumn #1494

Merged
merged 17 commits into from
May 3, 2023
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 121 additions & 6 deletions docs/flowlayout.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -18,7 +23,117 @@ 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`
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved


For `FlowRow`

4. `mainAxisAlignment` is now `horizontalArrangement`

5. `crossAxisAlignment` is now `verticalAlignment`
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved

``` kotlin
FlowColumn(
modifier = Modifier,
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.Start,
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved
content = { // columns }
)
```

``` kotlin
FlowRow(
modifier = Modifier,
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.Top,
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved
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` with `VerticalArrangement.spacedBy(50.dp)` in `FlowRow` and `HorizontalArrangement.spacedBy(50.dp)` in `FlowColumn`
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved

``` kotlin
FlowRow(
verticalArrangement = VerticalArrangement.spacedBy(50.dp),
content = { // columns }
)
```

``` kotlin
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
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
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved

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/FlowColumnSample.kt).

## Download

Expand All @@ -30,11 +145,11 @@ repositories {
}

dependencies {
implementation "com.google.accompanist:accompanist-flowlayout:<version>"
implementation "androidx.compose.foundation:foundation:<compose-version>"
}
```

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/
[snap]: https://oss.sonatype.org/content/repositories/snapshots/com/google/accompanist/accompanist-flowlayout/
10 changes: 5 additions & 5 deletions flowlayout/api/current.api
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Signature format: 4.0
package com.google.accompanist.flowlayout {

public enum FlowCrossAxisAlignment {
@Deprecated public enum FlowCrossAxisAlignment {
method public static com.google.accompanist.flowlayout.FlowCrossAxisAlignment valueOf(String name) throws java.lang.IllegalArgumentException;
method public static com.google.accompanist.flowlayout.FlowCrossAxisAlignment[] values();
enum_constant public static final com.google.accompanist.flowlayout.FlowCrossAxisAlignment Center;
Expand All @@ -10,11 +10,11 @@ package com.google.accompanist.flowlayout {
}

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<kotlin.Unit> 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<kotlin.Unit> 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<kotlin.Unit> 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<kotlin.Unit> content);
}

public enum MainAxisAlignment {
@Deprecated public enum MainAxisAlignment {
method public static com.google.accompanist.flowlayout.MainAxisAlignment valueOf(String name) throws java.lang.IllegalArgumentException;
method public static com.google.accompanist.flowlayout.MainAxisAlignment[] values();
enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Center;
Expand All @@ -25,7 +25,7 @@ package com.google.accompanist.flowlayout {
enum_constant public static final com.google.accompanist.flowlayout.MainAxisAlignment Start;
}

public enum SizeMode {
@Deprecated public enum SizeMode {
method public static com.google.accompanist.flowlayout.SizeMode valueOf(String name) throws java.lang.IllegalArgumentException;
method public static com.google.accompanist.flowlayout.SizeMode[] values();
enum_constant public static final com.google.accompanist.flowlayout.SizeMode Expand;
Expand Down
51 changes: 48 additions & 3 deletions flowlayout/src/main/java/com/google/accompanist/flowlayout/Flow.kt
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
* limitations under the License.
*/

@file:Suppress("DEPRECATION")

package com.google.accompanist.flowlayout

import androidx.compose.foundation.layout.Arrangement
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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",
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved
"androidx.compose.foundation.layout.FlowColumn",
"androidx.compose.ui.Modifier"
)
)
public fun FlowColumn(
modifier: Modifier = Modifier,
mainAxisSize: SizeMode = SizeMode.Wrap,
Expand All @@ -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.
Expand All @@ -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(
uchennafokoye marked this conversation as resolved.
Show resolved Hide resolved
"""
accompanist/Flow is deprecated.
For more migration information, please visit https://google.github.io/accompanist/flowlayouts/#migration
"""
)
private fun Flow(
modifier: Modifier,
orientation: LayoutOrientation,
Expand Down Expand Up @@ -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,
Expand All @@ -291,9 +339,6 @@ public enum class SizeMode {
Expand
}

/**
* Used to specify the alignment of a layout's children, in main axis direction.
*/
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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down