updating imageViews OR backgroundImages in table row on android.

You must Login before you can answer or comment on any questions.

I've got a table and each row has a an image to act like a toggle to flag/check certain rows. In iOS it works fine and as expected. On android everything works as well EXCEPT the image doesn't reliably swap. Often swapping once, and then being stuck, or not swapping at all. the behind the scenes stuff is functioning properly, the image or backgroundImage value is correctly changing, etc, it's just that the image itself isn't being updated to match the path...

I know many others have mentioned this problem in varios threads, but I've yet to find one with a working answer.

I've tried various SDKs thinking it might work in one of them, but this far have had no luck. I've tried different methods, having the listener on the image view itself, moving the listener to the table and watching for the e.source to match the image, etc... pretty much all of them worked fine in iOS but consistently fail in android.

Anyone know of a working solution to this dilema?

— asked 11 months ago by Trevor Borgmeier
2 Comments

  • maybe you ought to post some code showing how you are trying to accomplish this so we aren't shooting in the dark here.

    — commented 11 months ago by Stephen Feather

  • I agree with Stephen, help us to help you

    — commented 11 months ago by Malcolm Hollingsworth

1 Answer

Did you try the last SDK or even the CI master SDK? There have been several animation issues on android, probably yours was addressed in one of the last SDKs.

In any case you should share some (extracted) code.

— answered 11 months ago by Alexander Bauer
answer permalink
2 Comments

  • Yes, I've tried both the latest on the master branch, 2.2.0.v20120803164111, and 2.1.1.GA

    Though I originally described it as simply an image updating problem, I've done more testing and found that it works perfectly on all the rows the are visible onscreen in the initial load, but once I scroll everything starts getting wacky and images that are touched either don't update at all, or update a completely different row. This is purely a cosmetic issue as behind the scenes everything works. If I click on a row to open the detail window, and then close the detail window, then the rows with the images that weren't properly toggled are now correct. So something is getting refreshed on the tableview when the new window is opened. But even though everything looks right after the detail window is opened and closed, clicking on an image still has poor/wrong behavior.

    This is really just a cosmetic/rendering issue, but without it working properly causes a lot of confusiion to the user.

    So I guess my question is how can I get the table/tablerows to refresh properly all the time when an image is clicked so it works on rows that were out of view upon the initial load?

    Here is the code for the function that generates the row

    createArticlesRow = function(_article) {
 
    Ti.API.info('_article: ' + JSON.stringify(_article));
 
    var row = Ti.UI.createTableViewRow({
        backgroundImage:'/images/backgrounds/table_rows/white.png',
        className:'tvRow',
        height: Ti.UI.SIZE,
        args:_article.args,
        name:_article.name,
        hasChild:false,
        className:'articleRow'
    }),
    spacing = 6,
    imgDimensions = {width:45, height:55},
    nameHeight = 18,
    metaHeight = 14,
    bookmarkID = (_article.args.lic_num + '-' + _article.args.site_num),
    bookmarks = Ti.App.Properties.getObject('bookmarks'),
    bookmarks = bookmarks.articles;
    bookmarkedFlag = (bookmarks.indexOf(bookmarkID) >= 0 ? true : false);       
 
    var bookmarkView = Ti.UI.createView({
        top:0,
        right:0,
        height:imgDimensions.height,
        width:imgDimensions.width,
        backgroundImage:('/images/icons/bookmark_' + (bookmarkedFlag ? 'on' : 'off') + '.png'),
        touchEnabled: true,
        _class:'bookmarkView',
        _args:{
            type:_article.args.type,
            id:bookmarkID
        }
    });
 
    var imgOffset = (spacing + bookmarkView.width);
    row.add(bookmarkView);
 
    var rowView = Ti.UI.createView({
        top:0,
        left:0,
        height: Ti.UI.SIZE,
        touchEnabled: false
    });
 
    var name = Ti.UI.createLabel({
        height:Ti.UI.SIZE,
        color:'#000000',
        font: {
            fontFamily:(Ti.Platform.osname == 'android' ? 'Droid Sans' : ''Helvetica Neue'),
            fontSize:14,
            fontWeight:'bold'
        }   
        text:_article.name,
        top:spacing,
        left:spacing,
        right:imgOffset,
        height:nameHeight,
        touchEnabled: false
    })=);
    rowView.add(name);
 
    var directions = Ti.UI.createLabel({
        color:'#000000',
        font: {
            fontFamily:(Ti.Platform.osname == 'android' ? 'Droid Sans' : ''Helvetica Neue'),
            fontSize:12
        },
        height:Ti.UI.SIZE,
        text: _article.directions,
        top: spacing+nameHeight,
        left:spacing,
        right:imgOffset,
        height: Ti.UI.SIZE,
        textAlign:'left',
        touchEnabled: false
    });
 
    rowView.add(directions);
    row.add(rowView);
 
    return row;
};
    And the listener... 
    tableView.addEventListener('click', function(e){
 
    if(e.source._class === 'bookmarkView'){
        bookmarks = Ti.App.Properties.getObject('bookmarks'),
        bookmarks = bookmarks.articles;
        bookmarkedFlag = (bookmarks.indexOf(bookmarkID) >= 0 ? true : false);
 
        bookmarks = Ti.App.Properties.getObject('bookmarks');
        bookmarkID = e.source._args.id;
 
        e.row.children[0];
 
        if(bookmarks.articles.indexOf(bookmarkID) < 0){
            // add bookmark..
            bookmarks.articles.push(bookmarkID);
            e.source.backgroundImage = '/images/icons/bookmark_on.png';
        } else {
            // remove bookmark...
            bookmarks.articles.remove(bookmarkID);
            e.source.backgroundImage = '/images/icons/bookmark_off.png';
        }
 
        Ti.App.Properties.setObject('bookmarks', bookmarks);
    }
});

    — commented 11 months ago by Trevor Borgmeier

  • Okay, I'm a little closer as I'm getting much better results after adding this to the end of event listener: 

    tableView.updateRow(e.index, e.row);
    It works a lot more consistently and works reliably for more rows, but for some I get weird errors that read "Uncaught Error: Invalid index 17, size is 17" or on a different row, "Uncaught Error: Invalid Index 37, size is 35"

    The "size is #" appears to match the number of rows (+1, since indexing starts with zero) within this section since I'm using headers..

    So I think the only question I have left is how to get the correct index for a row within a section.

    — commented 11 months ago by Trevor Borgmeier

Your Answer

Think you can help? Login to answer this question!