Question

I have a ScrollableView in Titanium (targeting only Android) that has to scroll through a few dozen views. Each view is about a paragraph or two of text, with maybe an image or two.

I’m worried that it would be too stressful on the CPU to populate all the views right from the start. So, my plan was to only have 3 views actually in the ScrollableView at a time.

Here is a solution I came up with. Views are numbered 1 to 10. The bold numbered view is the one currently active. The dashes are placeholders. When the user views the first view:

1 2 3 – – – – – – –

The user scrolls right.

1 2 3 – – – – – – –

The user scrolls right again, and view 1 is removed. View 4 is now added to the ScrollableView in anticipation.

– 2 3 4 – – – – – –

And so on.

The obstacle I face with this is that, as far as I can tell, there is no way to insert views before the existing ones (as would be the case of scrolling left).

How should I implement this?

Answer 1

I’ve created a Titanium module, based off of this GitHub gist, that does just this.

Usage is like so:

var VirtualScroller = require('ui/common/VirtualScroller');

var virtualScroller = VirtualScroller({
    itemCount: 10,
    start: 0,
    getView: function(i) {
        return Titanium.UI.createLabel({
            width: Titanium.UI.FILL,
            height: Titanium.UI.FILL,
            text: "This is item " + (i + 1)
        });
    },
    isInfinite: false
});

window.add(virtualScroller.view);

The module works by controlling a ScrollableView with three views (like the original gist). It supports finite (above example) and infinite scrolling.

I’ve posted details on my blog, and it’s available at BitBucket.