https://kotlinlang.org logo
#compose
Title
# compose
g

grandstaish

09/23/2020, 8:59 PM
How can I draw a dividers between
Column
children?
p

pardom

09/23/2020, 9:01 PM
Invoke the
Divider()
composable between each child.
g

grandstaish

09/23/2020, 9:05 PM
Ah right. In my case i let callers of a custom composable specify the children of its internal
Column
. Then I want my custom composable to be able to add dividers in between each child. Maybe I need a custom Layout for this though
p

pardom

09/23/2020, 9:06 PM
Are you not using
LazyColumnFor
?
g

grandstaish

09/23/2020, 9:07 PM
Nah, just the regular one
p

pardom

09/23/2020, 9:08 PM
It may be possible to do what you're describing, but I don't know enough about the more advanced APIs.
👍 1
z

Zach Klippenstein (he/him) [MOD]

09/23/2020, 9:11 PM
You’d probably need to do something like the old Table composable did for borders. Use a custom layout to measure and save where the spaces in between items are, then use something like the
drawContent
modifier to draw over/under the children in those spaces. If all your items are the same size, you can use the
spacedBy
arrangement with Column and just calculate where the dividers go without doing a custom layout.
👀 1
g

grandstaish

09/23/2020, 9:19 PM
Thanks Zach, I’ll give that a try. Any idea where I could find that Table composable by any chance? (I’m assuming it doesn’t exist anymore.)
z

Zach Klippenstein (he/him) [MOD]

09/23/2020, 9:47 PM
g

grandstaish

09/23/2020, 9:52 PM
thanks, this should help a lot 🙏
z

Zach Klippenstein (he/him) [MOD]

09/23/2020, 9:55 PM
The main issue with that approach is that the first frame is rendered without the dividers unfortunately (i think this is one of the reasons why they removed the old Table composable)
g

grandstaish

09/23/2020, 10:26 PM
maybe i need to re-think my component 🤔
So is this implementation drawing dividers based on the previous round's measurements? Couldn't those have changed?
Maybe I could use a mutable "out" array for storing the item heights, tho I feel like that's a bit hacky
z

Zach Klippenstein (he/him) [MOD]

09/23/2020, 10:44 PM
If the measurements change on every frame (e.g. during animation), then yea the dividers will lag by a frame unfortunately.
👍 1
This feels like it might be overkill, but another path you might want to explore is writing a custom SubcomposeLayout. There’s probably a way to use that to avoid the frame off-by-one issue.
l

Louis Pullen-Freilich [G]

09/23/2020, 10:47 PM
Yes,
SubcomposeLayout
is designed exactly for these sort of use cases - you can avoid the 1f lag this way by measuring the content first, and then composing the dividers afterwards.
👍 3
g

grandstaish

09/23/2020, 10:49 PM
Neat, TIL. It's well past my ability to write code tonight, but i'll read up on
SubcomposeLayout
tomorrow. Thanks both!
e

efemoney

09/23/2020, 11:02 PM
@Louis Pullen-Freilich [G] Any docs on how to understand and use
SubcomposeLayout
?
z

Zach Klippenstein (he/him) [MOD]

09/23/2020, 11:11 PM
both
LazyList
and
WithConstraints
use it, which are pretty different use cases so looking at their implementations is helpful.
l

Louis Pullen-Freilich [G]

09/23/2020, 11:42 PM
You can take a look at the sample in the documentation, otherwise yes
LazyList
and
WithConstraints
can be useful. Or for a more high level 'component' point of view, you can see the
TabRow
implementation, or the upcoming Scaffold change that moves to using
SubcomposeLayout
g

grandstaish

09/24/2020, 9:44 AM
cool,
TabRow
is doing dividers too, so this makes things pretty easy for me 🙂
SubcomposeLayout
(and
Layout
) are so easy to use 👏. I managed to add my dividers fairly easily: https://gist.github.com/grandstaish/9eec95d879eb754cb5109caa49822dce
🎉 2
e

efemoney

09/25/2020, 10:48 AM
Possible to add a screenshot of the final result to the gist?
1
g

grandstaish

09/25/2020, 11:22 AM
Sure!
Still has a long way to polish the component, but the general idea is there. I think it’s pretty awesome that i can dynamically add more composables (the dividers) after measuring the content
36 Views