VerticalCardSwiper | A marriage between the Shazam Discover UI and Tinder | iOS library

I'm facing a weird issue that I can't seem to figure out or find anything about online.

So I'm trying to replicate the Shazam discover UI with a UICollectionView and a custom UICollectionViewFlowlayout.

So far everything is working pretty well, but when adding the "card stack" effect I (or rather the person who was implementing it) noticed there seems to be a weird issue where on some occasions (or rather, when specific indexes are visible, in the example it's row 5, 9) there will be 4 visible cells instead of 3. My guess would be that this has something to do with cell reuse, but I'm not sure why it's doing this. I looked into the individual cell dimensions and they all seem to be the same so it's not that cells are just sized differently.

Does anyone have an idea as to why this could be happening? Any help or suggestions are really appreciated.

I'll add a code snippet of the custom flowlayout and screenshots below. You can download the full project here, or alternatively, check out the PR on Github.

Here's a visual comparison:

Source code of the custom flowlayout:

I'm trying to recreate the Shazam Discover UI by subclassing UICollectionView/UICollectionViewFlowLayout.

I've got as far as paging the cells and making them the right size, however, I'm having trouble getting the cells to scroll to the background, as in, I don't have a clue on how to get it done, I've searched everywhere but can't seem to find it.

An example of what I'm trying to achieve:

edit: I ended up building my own solution: https://github.com/JoniVR/VerticalCardSwiper

So I need a bit of help since I can't really figure it out and have spent a lot of time on it already without any results. Most of the things I find on the internet are on how to convert a swift project into a framework, but my issue isn't the project itself or cocoapods, it's about how and what I should make accessible to developers.

So I built a Swift framework which you can find here, it's built with a UICollectionView with a custom flowlayout and side swiping functionality.

The problem is that I don't know how I can make this easy to use for developers, I'd like to make it behave like a UICollectionView where you'd need to implement a custom delegate and datasource without having to use the default UICollectionViewDelegate and UICollectionViewDatasource, so I can filter out things that would cause unexpected behaviour or just keep things simple.

So what would be a good approach here? I'm thinking about possibly subclassing the UICollectionView so people don't have to use a UICollectionView (because that might get confusing) but a VerticalCardSwiperView instead which has the same behaviour, but a bit more limited. I just don't know if that's the correct approach here.

Any tips, insights or good examples would be deeply appreciated!

edit 1: I updated the project so it already has the framework structure, I just need to figure out how I'm going to give access to the custom parts to developers.

edit 2: I have gotten one answer but I think the question might be easily misunderstood. The goal is to make it act and behave like a UICollectionView (with delegates, datasource, ...) but more limited, and I'm wondering how I can accomplish that, if it's even possible.

edit 3: Alright, I have most of it working, I'll leave a link to the Github online here so people who need something similar can check it out for themselves. Essentially, what I've done is made a custom VerticalCardSwiperDelegate and VerticalCardSwiperDatasource like this:

So I'm trying to build an open source library combo between Shazam Discover and Tinder based on a UICollectionView with a custom UICollectionViewFlowLayout.

I'm having an issue where, after animating a cell the the side (e.g. swiping it away to the side), the cell will stay in that position when it is being reused by the UICollectionView. (I'm guessing that cell reuse is the issue here since it only seems to happen after scrolling a couple of cells)

Is there any simple way to fix this behavior? Or am I doing something else wrong here? Been looking at it for a couple of days but can't seem to find a fix myself.

You can try/check out the code on Github

I tried posting some code snippets but I'm not sure which ones I should post here since it's a lot of code. If I should post code on here, let me know.

Any help is much appreciated. Have a nice day :)

Here's a demo of what's happening: