Simulating iOS’s “Edit Home Screen mode

#1

Anyone here versed in simulating iOS’s “Edit Home Screen” mode?

Specifically, I want to mockup an ios home screen thats editable— allowing you to click-and-drag apps around to rearrange them on the simulated home screen.

The part i am tripping over is how to mimmick the “collision-detection” and “scooting away” engines.

I have tried thinking thru using:

  • The IF widget-x is OVER widget-y trigger — for when the dragged app is dragged over a non-dragged app.
  • And if an app is in column-3, row-4, then move it right to column-4, but if its in column-4, then move it down to row-5, column-1, etc.
  • But theres a reverse domino-effect that has to happen beforehand so that a parking space” opens up for the app being dragged.

I would “program” the columns and rows to shift the appropriate apps over left, right, and up, down.

I am afraid i am getting myself into a too-many, permutations-rabbit hole and nightmare tho’.

I think I only know the “brute strength” approach to these types of axure interactions.

Can someone (perhaps with a front end dev background) offer some pointer please?

Thanks!
John

#2

The easiest way to do this is to give each icon its own code, with every icon having the same code. As you drag, send a message to every icon, and each icon will determine where to go based on where the vacated space is, which you can store in x y variables.

E.g., give each icon a Rotate event handler and fire the Rotate command on each one. I have an example somewhere. I’ll see if I can find it

#3

Here is the one I was thinking of. This works just horizontally, but it could work in a grid as well. The prototype has multiple pages, and the last one explains how it works. But it’s essentially what I described above, but slightly more limited. The stationary icon that the dragged icon is currently above is asked, “is now the time for me to fill the vacant space?”