Add horizontal scrolling example to Example app

[bmarkowitz]

Related to Issue #101

Describe your changes

As a newcomer to the library, I figured a good way to get my feet wet would be to try to add something to the Example app. As mentioned in the issue, we're looking for several new examples, including a horizontal section, so that's what I tried to do here.

To enable this, I essentially followed the example set by the Colors and People sections and added a new PlanetModel. Then, I added a horizontally scrolling section to the Grid tab's comp layout logic to display the 8 planets, as well as the accompanying cell view model mapping.

At the end, I renamed the GridColorCell to BasicGridCell as a way to just reuse the existing cell for both sections, but happy to just create a separate cell if that's preferred. Also, I'm not sure if the tab is best described as Grid now that there's a non-grid section - let me know if we're prefer to rename that, have a new tab, etc.

One other tweak I made was to have the supplementary views not follow the content insets of the section. This is super minor (happy to delete if we'd like), but I noticed that there was a tiny gap between the edge of the section headers and the edge of the screen, so this would address that. It's hard to show in a screenshot, but can be seen by looking closely in the sim.

Concerns

These are pre-existing things so I didn't investigate them much further, but I'm happy to create Issues for them to discuss them further.

1. I'm noticing that shuffling the collection slowly/eventually resets the scroll offset to 0. If you scroll down to the bottom then shuffle a bunch of times, you'll eventually be back at the top.
2. When the app first loads, there's a slight flicker of the empty state as well as the Colors section/section header.

Demo

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-10-26.at.17.18.03.mp4

[bmarkowitz]

Noticed a small bug here where, because of line 87 in GridViewController, when you delete everything in the first or second section, the Planets section becomes a grid instead of horizontally scrolling.

I wonder if, similar to the flowLayoutDelegate, it makes sense to have something for comp layout exposed on the driver so that the layout can be more closely tied to the contents of the collection view without needing to maintain additional external state?

[bmarkowitz]

Fixed the above issue.

Before

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-10-27.at.11.54.04.mp4

After

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-10-27.at.11.51.16.mp4

[jessesquires]

Hey thanks for doing this @bmarkowitz! 🙌🏼 I'll try to take a look soon. 😄

[jessesquires]

Thanks @bmarkowitz! Sorry for the delay in review.

I appreciate all the effort you put in here. It's my fault for not elaborating on this a bit more in #101.

I was hoping to keep this much simpler.

For now, what I'd prefer to do is just make the existing 2 sections do horizontal scrolling and not introduce any new model types.

Let me know if you're up for making those changes! If not, that's totally cool. 😄

[jessesquires]

As for introducing new model types, I have some ideas for this in #105 that we can discuss later. 😊

[bmarkowitz]

Can do! Does that mean we want a new tab, or did we want to repurpose an existing tab?

[jessesquires]

Can do! Does that mean we want a new tab, or did we want to repurpose an existing tab?

I think we can just modify the existing grid view! 😄

I'm imagining each section has 2 rows and scrolls horizontally.

[bmarkowitz]

each section has 2 rows and scrolls horizontally

@jessesquires dumb follow-up question:

Are you thinking we just have 2 identical rows, or are you hoping for the first row to snake into the 2nd?

[jessesquires]

dumb follow-up question:

Are you thinking we just have 2 identical rows, or are you hoping for the first row to snake into the 2nd?

Not a dumb question!

I'd like to have a layout like this screenshot, but:

• Only 2 rows per section (no duplicated data), in other words, a 2xN grid
• Horizontal scrolling for each section

See also:

https://lickability.com/blog/getting-started-with-uicollectionviewcompositionallayout/

[bmarkowitz]

Ah gotcha, that clarifies it! Sounds good!

[bmarkowitz]

@jessesquires Updated. Dang, I really did overthink the first approach, lol.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2024-11-16.at.13.25.02.mp4

[jessesquires]

Updated. Dang, I really did overthink the first approach, lol.

Haha, it's all good!

This looks great! 😄 Thanks so much for doing this. 💯

[jessesquires]

🥳