Hi, I'm still working on my custom layout and I ha...

# compose

[Nat Strangerweather]

Hi, I'm still working on my custom layout and I have a question. The Layout modifier applies to the whole layout, unsurprisingly. If I wanted the modifier to apply to each of the placeables, how would I go about it? For instance, in the case of a draggable modifier, I don't really want the whole layout to be dragged, but only the individual elements of the layout. I have posted this on stackoverflow, if anyone wanted to have a look... https://stackoverflow.com/questions/67457124/how-to-apply-the-layout-modifier-to-each-placeable-individually-in-jetpack-compo . Thanks! 😊

[orangy]

I don’t think it’s possible. But I feel like you’re trying to mix two concepts into one component, and you may be need to decouple them a bit.

Let’s imagine you want your “test” and “ing” boxes to be draggable to the left and right side with the animation, so you can quickly swing “test” to the right and it floats to the right edge.

Your layout system should be using something similar to Arrangement to position elements, but with a value from 0 to 1 to indicate position on the line from start to end (mind RTL). You will likely need your own system, like Row has it’s MeasurePolicy implementations (look into source) depending on the arrangement, but with the added animation-in-progress behavior.

Then, you need to have quasi-modifier, that you will put on children in the component’s content block. It would be what you have in your .draggable(…) call, as an extension function like fun Modifier.animateDraggableArragement(…) or something more suiting your real scenario. It will have optional ArrangementState argument (kinda like ScrollState) and do all the magic to animate the arrangement on that particular child for you.

When you have all these in place, you can really use your custom layout and this quasy-modifier in multiple scenarios. In the trivial one when you have a list of items, a simple foreach would do everything for each child without any duplication of code. You can then easily add more features when you need them – “lock items” (do not emit the quasi-modifier), “move in batches”, whatever.

PS: I didn’t actually try to implement this and didn’t have similar cases yet. Take it with a grain of salt 🧂 😄

[Nat Strangerweather]

Thanks for this detailed reply, which I'll reread tomorrow with a fresh mind. 😅 I seem to be struggling with logic at the moment lol, but never mind, coding is fun anyway! 😉

[Doris Liu]

It seems like you need to have a draggable modifier on each child to detect the drag on the children, and subsequently offset the one being dragged from its placement done by the CustomLayout

[Nat Strangerweather]

Interesting, in my original code I had the draggable modifier in my Tile composable and it was all working fine, but I then got the impression that was the wrong thing to do in terms of efficiency. That's why I have been spending days trying to find another solution. Maybe it was ok the first time then?

[orangy]

You really don’t want to couple dragging, arrangement and animation together. Since this is unidirectional UI and single source of truth, some code out there can modify arrangement (start or end) by other means (imagine “all to the right!” button), and the effect should be essentially the same – animated move to the right. (I’m assuming what I can guess from the SO question. May be the real case is different and it’s all wrong)

[orangy]

@Nat Strangerweather you mention Tile, what exactly are you trying to build? A “tiled” clone? An inventory system for an RPG with drag-n-drop reordering? 🙂

[Nat Strangerweather]

I was trying to make a "word merge" game but maybe it would be better for me to use a Canvas. At first it looked like it might be possible with Jetpack Compose's versatility... In any case, my first objective is to understand and learn how to use Jetpack Compose properly. 🙂

[Doris Liu]

I'm not sure this is coupling dragging and arrangement, if I understand you correctly. I see it as quite the opposite, the dragging and placement/arrangement are influencing offsets independently (from the snippet in SO), which in combination affect where the children are in terms of final position.

[orangy]

@Doris Liu that’s not what I meant. There is no data model that could be operated from outside. You can’t change offsets programmatically, there is no model you can externalize (e.g. save game), etc. The only way you can do it is with dragging. But it depends a lot on the task at hand, of course.

[Doris Liu]

I see. 🙂 Yea, if you need to programmatically control the pieces, you'll need a model as the single source of truth for the positioning. And layout placement and dragging need to negotiate with the model.

[Nat Strangerweather]

Ok that's perfect thanks, it's good to know that a model is the way to go!