Titanium Community Questions & Answer Archive

Question

Reusing Image on Multiple Table Cells

I'm using a graphic to indicate that a certain item is a "favorite". I've created two states for the graphic:

var star = Titanium.UI.createImageView({
    url:'images/star.png', 
    defaultImage:'images/star.png', 
    width:32, 
    height:32, 
    left: 5
    });
var starf = Titanium.UI.createImageView({
    url:'images/starf.png', 
    defaultImage:'images/star.png', 
    width:32, 
    height:32, 
    left: 5
    });

for(var i=0; i<200; i++) {
    var row = Titanium.UI.createTableViewRow();
    if(fav[i] = fav) {
        row.add(starf);
    } else {
        row.add(star);
    }
}

I'm not 100% sure what is happening, but it appears as if the star image object isn't copying so much as just being referenced. Only the last row on the table has the image (and scrolling continually moves the image down to the last row).

I'm think this has something to do with the image object being referenced vs. duplicated, but it's just outside my area of comfort, and I'm having a hard time searching for answers without really knowing what's wrong.

Using this works:

for(var i=0; i<200; i++) {
    var row = Titanium.UI.createTableViewRow();
    if(fav[i] = fav) {
        row.add(Titanium.UI.createImageView({
            url:'images/starf.png', 
            defaultImage:'images/star.png', 
            width:32, 
            height:32, 
            left: 5
            }););
    } else {
        row.add(Titanium.UI.createImageView({
            url:'images/star.png', 
            defaultImage:'images/star.png', 
            width:32, 
            height:32, 
            left: 5}););
    }
}

…but as I add click events to the images, this seems like it will unnecessarily complicate the code.

Appreciate any feedback,

Best,
Nate

Answer 1

Thanks Bill –

I took a look at the RSS feed that I've used for all of my iPad questions so far, and it looks like the trick is to put the star creation (var star = …) within the for loop. I'm guessing that the original method was making 1 star image view that could only be in one spot. By repeatedly recreating the image within the loop it works fine.

While this code all uses JavaScript, there are certainly a number of learning curves that come along with developing a "real" application. This is just another.

Thanks for the help!
Nate

Answer 2

Hi,

Also try giving each 'row' a unique 'className' property.

eg: row.className = 'myrow'+i;

Answer 3

Pretty old post, but since it was the third hit in Google on a search, i thought i'd add my 2 cents.

a view can only be added to one parent, so if you add it to another view, it will be removed from the first. So putting it inside the loop would fix the problem, since you now create one view per row.

also, you need not worry about the image itself, iOs (and android aswell i would guess) will only load the image once in memory based on the image path.

Answer 4

It may have something to do with how you're adding the rows to the tableview. Maybe try adding each row to the tableview immediately after it's created and you've added the star image (i.e. right after the 'if…else' statement).

Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Reusing Image on Multiple Table Cells

4 Answers