What is the best way to display list items (thousand+) in AIR Mobile app?

Question

I'm working on an app right now displaying a contact list. The app is for Android and iOS, developed in AS3. That contact list contains on a basic usage 1000 items and that could go to 10 000.

Now a displayList with that many items does not work of course.

So I tried using BitmapData (the same item is updated, moved, and "stamped" on the BitmapData) before rendering but again, that's too big for a bitmapData.

I am now thinking about calculating the position of the scroll in the contact list and render on the displayList only what's on screen but I'm not sure how to handle this.

What are the best practices for that kind of issue?

Thanks

Answer 1

I am now thinking about calculating the position of the scroll in the contact list and render on the displayList only what's on screen but I'm not sure how to handle this.

That's the correct way to do it, it's a form of object pooling and I think it's also known as layout virtualization. I don't know how to do it in classic AS, but I've been using the Starling framework (gpu rendered display list), and the components lib there (known as Feathers), has such a list, you may wish to check its implementation. Here's a demo (check the List), I've tested this with thousands of items and it works perfectly: Feathers Component Explorer

But in short the idea is to create visual components equal to the maximum that can be seen at the same time. Then, whenever the list moves you must check which are the visible indexes. When they change, which happens when an item becomes invisible - for example going off the top, you move it to the bottom and reuse it with new data, corresponding to its index.

Answer 2

It's best to use some framework for that - search for UI tools. If you are using Starling - there is Feathers. Also you can use MadComponents which is pretty nice. For simple cases you can use MinimalComponents.

They all have built in lists. If you don't like them, you should build one by yourself.

The best practice is to show only the visible items, and have others removed from stage. So you have to calculate the current position of the list that is being scrolled, calculate the items that are visible, and then add them and display them. Everything else should be removed and hidden.

But again, I think some of those I mentioned should fit your needs.