Jetpack Compose will increase developer productiveness in views, particularly with regards to
Adapter. We solely must
- outline a composable (
- set the objects and parts for every merchandise,
- … yeah, that’s all!
There are different composable corresponding to
Column too. On this article, we’ll see some use circumstances of
LazyColumn, and tips on how to deal with the scroll motion inside them.
Disclaimer: All supply code uncovered right here has been developed with artifact December 2022 launch of Compose Bom. Please be aware that some supply code might change with new variations.
Column can be utilized to rearrange some views with a particular orientation (horizontal or vertical). In different phrases, we are able to deal with Row/Column like
LinearLayout in XML. The distinction is scroll might be set on to Row/Column modifier utilizing
LazyColumn to exchange RecyclerView in XML. Use these parts when we have to:
- Show objects with unknown/giant sizes, with
objects()API inside LazyRow/LazyColumn (
- Solely compose and lay out objects which might be seen within the element’s viewport (similar precept as RecyclerView).
Nested Scroll with Nested Objects
Let’s take an instance: Instagram residence display screen. The display screen is scrollable with infinite posts. There’s additionally a horizontal scroll within the story part.
Sometimes, first, we are going to add a
Column to wrap the story and submit part as one vertical scroll. Then, use
LazyColumn for every part as beneath.
If we attempt to preview the outcomes, an error from Android Studio will probably be proven, which prevents us from creating nested scrolls with the identical orientation with out mounted peak/width. By default view system (XML), it’s much like including
RecyclerView inside a
NestedScrollView. It might harm app efficiency because the recycler’s capability is omitted when it’s inside a nested scroll.
java.lang.IllegalStateException: Vertically scrollable element was measured with an infinity most peak constraints, which is disallowed. One of many widespread causes is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you wish to add a header earlier than the listing of things please add a header as a separate merchandise() earlier than the principle objects() contained in the LazyColumn scope. There are might be different causes for this to occur: your ComposeView was added right into a LinearLayout with some weight, you utilized Modifier.wrapContentSize(unbounded = true) or wrote a customized structure. Please attempt to take away the supply of infinite constraints within the hierarchy above the scrolling container. at androidx.compose.basis.CheckScrollableContainerConstraintsKt.checkScrollableContainerConstraints-K40F9xA(CheckScrollableContainerConstraints.kt:35) at androidx.compose.basis.lazy.LazyListKt$rememberLazyListMeasurePolicy$1$1.invoke-0kLqBqw(LazyList.kt:192) at androidx.compose.basis.lazy.LazyListKt$rememberLazyListMeasurePolicy$1$1.invoke(LazyList.kt:191) at androidx.compose.basis.lazy.structure.LazyLayoutKt$LazyLayout$1$2$1.invoke-0kLqBqw(LazyLayout.kt:71) .....
To realize nested scroll, as an alternative of making a brand new LazyColumn inside a Column, we should always straight wrap all of the composable inside guardian
LazyColumn as beneath. The idea is much like ConcatAdapter.
And the result’s… Tadaaa! The nested scrolls work each horizontally and vertically.
Final, because the use case is widespread, let’s create a basic composable element to make it reusable. The entire supply code of the outcomes might be proven beneath.