Add horizontal scrolling example to Example app

bmarkowitz commented 1 month ago

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.

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.
When the app first loads, there's a slight flicker of the empty state as well as the Colors section/section header.

Demo

https://github.com/user-attachments/assets/cfb235cf-dee6-42bc-b13b-400c00fc0068

bmarkowitz commented 4 weeks ago

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 commented 4 weeks ago

Fixed the above issue.

Before

https://github.com/user-attachments/assets/b990bb5b-8cf0-4fb7-9861-162acb4afc83

After

https://github.com/user-attachments/assets/90396276-bdfc-4172-8319-fa95c751aa33

jessesquires commented 3 weeks ago

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

jessesquires commented 2 weeks ago

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

bmarkowitz commented 2 weeks ago

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

jessesquires commented 2 weeks ago

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 commented 1 week ago

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 commented 1 week ago

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

Screenshot 2024-11-12 at 11 14 40 AM

jessesquires / ReactiveCollectionsKit