Note: This post mentions an iOS app called MLP Symbol ID. I discontinued my Apple Developer subscription, so MLP Symbol ID is not available in the App Store anymore.
Backstory
About three years ago, I built an iPhone application for my wife called MLP Symbol ID (as in My Little Ponies, oh my!) using Xcode. We had a backlog of suggestions and planned updates, but other projects kept me from coding the new features for years. Eventually I found some time and decided to give Appcelerator’s Titanium Studio a try. My familiarity with JavaScript and my desire to release the app on Google Play made Titanium Studio an attractive option.
I started version two about a year ago, and you know how they say the last 20% takes 80% of the time? Well, here I am a year later with a feature-complete app and absurdly sluggish tables. I tested the database connection — that’s not the problem. The images displayed in my table are smaller than quarks. After some reading, I decided to convert my TableViews to ListViews and confess my failures in a blog entry about it. ;)
Overview
The documentation for ListViews (in print format for easier reading) says the following:
ListView is designed as a replacement for TableView as a way to display data in a scrollable list. Both list view and table view present data to a user as a vertically scrolling list of rows. However, ListView is designed to perform better with a large number of rows.
So ListViews must be the solution, right? Hopefully!
Before: Table Views
Check out this code for creating a TableView and loading it with sections of data:
var mainTableView,
sections = [
Titanium.UI.createTableViewSection({ headerTitle:"Section One" }),
Titanium.UI.createTableViewSection({ headerTitle:"Section Two" })
];
for ( /* data source items */) {
var mySectionIndex = ...;
sections[mySectionIndex].add(Titanium.UI.createTableViewRow({
"title": [row-text-here],
"whateveryouwant": [some-other-data-if-you-want],
"whateveryouwant2": [some-other-data-if-you-want]
}));
}
mainTable = Titanium.UI.createTableView({ "style": Titanium.UI.iPhone.TableViewStyle.PLAIN });
mainTable.setData(sections);
Notice how the sections are created first, then the data is added row-by-row to the sections using TableViewSection.add(). Afterward, the sections are added to the TableView, and voilà.
ListViews
Other articles around the web say things like, “ListViews require a whole new way of thinking” or “it was very difficult for us to make the switch to ListViews.” Aside: I haven’t provided sources because these aren’t direct quotes — cue the tiniest violin in the world. Back on topic: I’m really not sure what those authors are smoking. Just check this out:
var mainListView,
sections = [],
sectionConfig = [
{ "headerTitle": "Section 1", "items": [] },
{ "headerTitle": "Section 2", "items": [] }
];
for ( /* data source items */) {
var mySectionIndex = ...;
sectionConfig[mySectionIndex].items.push({
"properties": {
"title": [row-text-here],
"whateveryouwant": [some-other-data-if-you-want],
"whateveryouwant2": [some-other-data-if-you-want]
}
});
}
for (var i = 0; i < sectionConfig.length; i++) {
sections.push(Titanium.UI.createListSection(sectionConfig[i]));
}
mainListView = Ti.UI.createListView({ "sections": sections });
Aside from the following differences, it was pretty much the same:
- ListView items are generic JavaScript objects rather than instances of a row class.
- I added these items to a ListSection in one go rather than one-by-one. This might not even be required:
ListSection.appendItems()is similar toTableViewSection.add(), butappendItems()looked like a post-render method when I read the documentation. So this part is probably up to you — perhaps we could cross this item out?
That’s it for this fairly trivial table. For more complex lists, you’d create templates for your ListView and specify the appropriate template for each list item. Consult the official ListView documentation for information about templates.
Anyway, things feel much snappier now thanks to ListView. Perhaps I’ll even release this MLP Symbol ID update this year?
