Support for infinite-scrolling lists in a form of a card

[richardtop]

Hi, thanks for the interesting framework.

I'm interested, whether it can be used to display an infinite scrollable list in a form of a card. The idea is that the two top- and bottommost parts of the card are rounded, while the shadow is displayed underneath the whole card.

The challenge is that the card can be very large (i.e. transaction history, contact list, etc), so the whole card cannot be loaded into memory, and has to be composed out of multiple reusable components.

Here is the conceptual example of the target result, the bottom card is "infinite".

Many apps are using a similar pattern, for example, Duolingo and Snapchat:

Is it possible to achieve a similar UI to the examples above with the help of the CardParts framework? Or was it meant to be used only for a fixed-length cards?

Thank you in advance!

[croossin]

Hi @richardtop - thanks for the question! If you are asking if the cards are able to be a dynamic height and have an infinite amount of cells in it, then yes, it certainly can!

Let's take the Snapchat example: For simplicity, we will just take about the best friends card and the recent card. You can achieve that by having 2 CardPartTableViews with custom CardPartTableViewCardPartsCells. In your viewModel you could store the logic to filter/sort whom is a best friend and whom is a recent contact. Then you would bind that array of data to each of the tableView's. If for instance, you had 100 recent contacts, your table view would have 100 cells and the card would dynamically grow to be large enough to fit all cells.

Feel free to let us know if you have any other questions!

[richardtop]

Hi @croossin, thank you for your prompt response. I guess, I was misunderstood - my question was about supporting cell reuse in the UITableView in the aforementioned configuration.

I give CardPartTableView a try and increased the number of rows in the example project, so that my ViewModel now looked like this:

class CardPartTableViewModel {

    let listData: Variable<[String]> = Variable([])

    init() {

        var tempData: [String] = []

        for i in 0...100 { // Increased  the number of cells to 100
            tempData.append("This is cell #\(i)")
        }

        listData.value = tempData
    }
}

However, it seems that the UITableView is displayed fully, without the cell reuse. Is there any way to configure the CardPartTableView supporting the built-in cell reuse behavior?

The example of a result I'm trying to achieve: